掩藏 Web 中的元素方式及优缺陷实例教程详解

2020-11-01 11:57 jianzhan

例证源代码:

https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100

5. 可浏览性对visibility: hidden的危害

该元素被掩藏,其子孙后代将从可浏览性树中删掉,而且显示屏阅读文章器不容易3D渲染该元素。

(1) Positioning

要掩藏带有position特性的元素,大家应当将它移到显示屏外,并将其尺寸设定为0(宽度和高宽比)。个事例便是自动跳转导航栏连接。考虑到下面的图:

要将连接置放在显示屏以外,大家应当加上下列內容

「css」

.skip-link { 
    position: absolute; 
    top: ⑴00%; 
} 

值⑴00%将促进元素100%的视口高宽比。結果,它将被彻底掩藏。1旦它聚焦在电脑键盘上,它就会像这样显示信息出来

.skip-link:focus { 
    position: absolute; 
    top: 0; 
} 

 例证源代码:

https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100

6. 可浏览性对position: absolute | fixed的危害

显示屏阅读文章器可浏览该元素,而且电脑键盘可聚焦。它只是从视口中掩藏起来。

Clip Path当在元素上应用clip-path时,它建立1个剪裁地区,该地区界定应当显示信息和掩藏哪些一部分。

在上面的事例中,全透明的黑色地区有clip-path。当clip-path运用于元素时,全透明黑色地区下的任何內容都不容易显示信息。

以便更直观地演试以上內容,我将应用clippy专用工具。在下面的GIF中,我有以下的clip-path:

将每一个方位的多边形值设定为0 0,则剪裁地区的尺寸将调剂为0。結果,图象将不容易显示信息。一样,这还可以用1个圆来替代多边形:

img { 
    clip-path: circle(0 at 50% 50%); 
} 

7. 可浏览性对clip-path的危害

元素仅在视觉效果上掩藏, 显示屏阅读文章器和电脑键盘聚焦点依然可使用它。

例证源代码:

https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100

3、操纵色调和字体样式尺寸

尽管这两种技术性不像大家前面探讨的那样普遍,但它们将会对一些测试用例有效。

1. 色调全透明

根据使文字的色调全透明,它将掩藏在视觉效果上。这针对仅有标志的按钮十分有效。

2. 字体样式尺寸

另外,将字体样式尺寸设定为0也很有效,由于这会在视觉效果上掩藏文字。考虑到下面的示例,在其中有1个具备下列构造的按钮:

<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; 
} 

这样,文字就被掩藏了。它乃至能够在不变更色调的状况下工作中,可是我出于解释目地加上了它。

例证源代码:

https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100

3. Aria Hidden

当向元素加上aria-hidden特性时,它将从可浏览性树中删掉该元素,这能够提高显示屏阅读文章器客户的体验。留意,它并沒有在视觉效果上掩藏元素,它只对于显示屏阅读文章器客户

<button> 
    Menu 
    <svg  aria-hidden="true"><!-- --></svg> 
</button> 

在上面的事例中,大家有1个带有标识和标志的菜单按钮。以便向显示屏阅读文章器掩藏标志,加上了aria-hidden。

依据Mozilla Developer Network (MDN),下面是特性的测试用例

  • 掩藏装饰设计性的內容,如标志、图象。
  • 掩藏拷贝文字。
  •  掩藏显示屏外或折叠的內容。

4. 可浏览性对aria-hidden="true"的危害

是为显示屏阅读文章器设计方案的,由于它只对显示屏阅读文章器掩藏內容。但是,內容针对有眼睛视力的客户依然是可见的,而且电脑键盘是可聚焦的。

(1) 动漫与互动交流

当大家想让1个掩藏的元素动起来时,比如,显示信息掩藏的挪动导航栏,它必须以1种可浏览的方法来进行。以便得到1种可浏览的体验,大家将探寻1些值得学习培训的好事例,和1些不太好的事例,以免犯将会会给显示屏阅读文章器客户带来不太好体验的不正确。

菜单动漫-不太好的事例

大家有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'); 
}); 

結果将会看起来非常好,但它有1个很大的不正确。应用opacity: 0不容易掩藏可浏览性树的导航栏。即便导航栏在视觉效果上是掩藏的,它依然能够根据电脑键盘聚焦,而且能够被显示屏阅读文章器浏览。务必将其掩藏以免搞混客户。

下面是来自Chrome开发设计专用工具的 accessibility tree 的截图:

简而言之,accessibility tree是显示屏阅读文章器客户能够浏览的全部內容的目录。在大家的事例中,导航栏目录在那里,而它在视觉效果上是掩藏的。大家必须处理两个难题:

  • 菜单掩藏时防止用电脑键盘聚焦
  • 当导航栏掩藏时,防止根据显示屏阅读文章器告之导航栏

下面的显示屏截图显示信息了Mac OS上的VoiceOver转子是怎样看到网页页面的。导航栏目录在那里,而它是掩藏的

例证源代码:

https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100

菜单动漫-好的事例

以便调整这个不正确,大家必须应用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将显示信息甚么:

例证源代码:

https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110

5. 自定复选框

默认设置的复选框设计方案很难自定,因而,大家必须为复选框建立自定设计方案。让大家看看基础的 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> 

要自定复选框,大家必须以1种可浏览的方法掩藏键入。为此,应当应用position和别的特性。有1个普遍的CSS类,称为sr-only或visual -hidden,它只在视觉效果上掩藏1个元素,并让电脑键盘和显示屏阅读文章器客户能够浏览它。

.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: ⑴px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px; 
  white-space: nowrap; 
} 

例证源代码:https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100

掩藏按钮

在Twitter上,有1个名为“查询新推文”(See New Tweets)的按钮,针对带有aria-hidden內容的显示屏阅读文章器来讲是掩藏的,仅有在有新推文能用时才会显示信息出来。

总结

到此这篇有关掩藏 Web 中的元素方式及优缺陷实例教程详解的文章内容就详细介绍到这了,更多有关掩藏 Web 中的元素內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!