版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
【移动应用开发技术】如何隐藏Web中的元素方法
这篇文章将为大家详细讲解有关如何隐藏Web中的元素方法,在下觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。可访问性对visibility:hidden的影响该元素被隐藏,其后代将从可访问性树中删除,并且屏幕阅读器不会渲染该元素。(1)Positioning要隐藏带有position属性的元素,我们应该将它移到屏幕外,并将其大小设置为0(宽度和高度)。个例子就是跳转导航链接。考虑下面的图:要将链接放置在屏幕之外,我们应该添加以下内容「css」.skip-link
{
position:
absolute;
top:
-100%;
}值-100%将推动元素100%的视口高度。结果,它将被完全隐藏。一旦它聚焦在键盘上,它就会像这样显示出来.skip-link:focus
{
position:
absolute;
top:
0;
}可访问性对position:absolute|fixed的影响屏幕阅读器可访问该元素,并且键盘可聚焦。它只是从视口中隐藏起来。ClipPath当在元素上使用clip-path时,它创建一个裁剪区域,该区域定义应该显示和隐藏哪些部分。在上面的例子中,透明的黑色区域有clip-path。当clip-path应用于元素时,透明黑色区域下的任何内容都不会显示。为了更直观地演示以上内容,我将使用clippy工具。在下面的GIF中,我有如下的clip-path:将每个方向的多边形值设置为00,则裁剪区域的大小将调整为0。结果,图像将不会显示。同样,这也可以用一个圆来代替多边形:img
{
clip-path:
circle(0
at
50%
50%);
}可访问性对clip-path的影响元素仅在视觉上隐藏,屏幕阅读器和键盘焦点仍然可以使用它。事例源码:https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100三、控制颜色和字体大小虽然这两种技术不像我们前面讨论的那样常见,但它们可能对某些用例有用。1.颜色透明通过使文本的颜色透明,它将隐藏在视觉上。这对于只有图标的按钮非常有用。2.字体大小此外,将字体大小设置为0也很有用,因为这会在视觉上隐藏文本。考虑下面的示例,其中有一个具有以下结构的按钮:<button>
<svg
width="24"
height="24"
viewBox="0
0
24
24"
aria-hidden="false"
focusable="false">
<!--
Path
data
-->
</svg>
<span>Like</span>
</button>我们的目标是以可访问的方式隐藏文本。为此,我添加了以下CSS.button
span
{
color:
transparent;
font-size:
0;
}这样,文本就被隐藏了。它甚至可以在不更改颜色的情况下工作,但是我出于解释目的添加了它。AriaHidden当向元素添加aria-hidden属性时,它将从可访问性树中删除该元素,这可以增强屏幕阅读器用户的体验。注意,它并没有在视觉上隐藏元素,它只针对屏幕阅读器用户<button>
Menu
<svg
aria-hidden="true"><!--
--></svg>
</button>在上面的例子中,我们有一个带有标签和图标的菜单按钮。为了向屏幕阅读器隐藏图标,添加了aria-hidden。根据MozillaDeveloperNetwork(MDN),下面是属性的用例隐藏装饰性的内容,如图标、图像。隐藏复制文本。
隐藏屏幕外或折叠的内容。可访问性对aria-hidden="true"的影响是为屏幕阅读器设计的,因为它只对屏幕阅读器隐藏内容。然而,内容对于有视力的用户仍然是可见的,并且键盘是可聚焦的。(1)动画与互动当我们想让一个隐藏的元素动起来时,例如,显示隐藏的移动导航,它需要以一种可访问的方式来完成。为了获得一种可访问的体验,我们将探索一些值得学习的好例子,以及一些不好的例子,以避免犯可能会给屏幕阅读器用户带来不好体验的错误。菜单动画-不好的例子我们有一个菜单,在展开时需要有滑动动画。最简单的方法是在菜单中添加以下内容:ul
{
opacity:
0;
transform:
translateX(100%);
transition:
0.3s
ease-out;
}
ul.active
{
opacity:
1;
transform:
translateX(0);
}有了上述内容,菜单将根据.active类展开和折叠,该类将通过JavaScript如下添加:menuToggle.addEventListener('click',
function(e){
e.preventDefault();
navMenu.classList.toggle('active');
});结果可能看起来不错,但它有一个很大的错误。使用opacity:0不会隐藏可访问性树的导航。即使导航在视觉上是隐藏的,它仍然可以通过键盘聚焦,并且可以被屏幕阅读器访问。必须将其隐藏以避免混淆用户。下面是来自Chrome开发工具的accessibilitytree的截图:简而言之,accessibilitytree是屏幕阅读器用户可以访问的所有内容的列表。在我们的例子中,导航列表在那里,而它在视觉上是隐藏的。我们需要解决两个问题:菜单隐藏时避免用键盘聚焦当导航隐藏时,避免通过屏幕阅读器告知导航下面的屏幕截图显示了MacOS上的VoiceOver转子是如何看到页面的。导航列表在那里,而它是隐藏的菜单动画-好的例子为了修正这个错误,我们需要使用visibility:hidden作为导航菜单。这将确保菜单是隐藏的视觉和屏幕阅读器。「css」ul
{
visibility:
hidden;
opacity:
0;
transform:
translateX(100%);
transition:
0.3s
ease-out;
}
ul.active
{
visibility:
visible;
opacity:
1;
transform:
translateX(0);
}添加后,菜单将从屏幕阅读器中隐藏。让我们再次测试,看看VoiceOver将显示什么:自定义复选框默认的复选框设计很难自定义,因此,我们需要为复选框创建自定义设计。让我们看看基本的HTML:<p
class="c-checkbox">
<input
class="sr-only"
type="checkbox"
name=""
id="c1">
<label
class="c-checkbox__label"
for="c1">Custom
checkbox</label>
</p>要自定义复选框,我们需要以一种可访问的方式隐藏输入。为此,应该使用position和其他属性。有一个常见的CSS类,称为sr-only或visual-hidden,它只在视觉上隐藏一个元素,并让键盘和屏幕阅读器用户可以访问它。.sr-only
{
border:
0;
clip:
rect(0
0
0
0);
-webkit-clip-path:
polygon(0px
0px,
0px
0px,
0px
0px);
clip-path:
polygon(0px
0px,
0px
0px,
0px
0px);
height:
1px;
margin:
-1px;
overflow:
hidden;
padding:
0;
position:
absolute;
width:
1px;
white-space:
nowra
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 下半年的初三毕业班工作计划2篇
- 超市营业员实习报告内容6篇
- “系统维护与管理”实习报告2篇
- 装潢公司室内设计实习周记2篇
- 组织部2024-2024年度个人工作总结2篇
- 公司写给员的感谢信3篇
- 妇女节活动方案范例3篇
- 水利工程施工验收规范中的治理效果评估
- 如何制定适应不同组织的安全管理制度
- 水利工程施工质量验收规范对施工闸门的安装要求
- 高中男子足球训练课时计划
- 物理化学实验-课程目标达成度评价报告
- 电力电子技术完整版课件全套ppt教学教程电子教案讲义最全(最新)
- DB32 T 4264-2022 金属冶炼企业中频炉使用安全技术规范
- 工程咨询公司规章制度汇编
- 无领导小组讨论(30页)ppt课件
- 送达地址确认书(法院最新版)
- 厂房租赁安全生产管理责任告知书 (2)
- 水工建筑物课程设计-混凝土重力坝设计
- LTPS-LCD工艺流程简介
- 说课与无生课堂
评论
0/150
提交评论