事例源码：
https://*c*ode*pen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100
5. 可访问性对visibility: hidden的影响
该元素被隐藏，其后代将从可访问性树中删除，并且屏幕阅读器不会渲染该元素。
(1) Positioning
要隐藏带有position属性的元素，我们应该将它移到屏幕外，并将其大小设置为0(宽度和高度)。个例子就是跳转导航链接。考虑下面的图:
要将链接放置在屏幕之外，我们应该添加以下内容
「css」
.skip-link { position: absolute; top: -100%; }
值-100%将推动元素100%的视口高度。结果，它将被完全隐藏。一旦它聚焦在键盘上，它就会像这样显示出来
.skip-link:focus { position: absolute; top: 0; }
事例源码：
https://c**o*depen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100
6. 可访问性对position: absolute | fixed的影响
屏幕阅读器可访问该元素，并且键盘可聚焦。它只是从视口中隐藏起来。
Clip Path当在元素上使用clip-path时，它创建一个裁剪区域，该区域定义应该显示和隐藏哪些部分。
在上面的例子中，透明的黑色区域有clip-path。当clip-path应用于元素时，透明黑色区域下的任何内容都不会显示。
为了更直观地演示以上内容，我将使用clippy工具。在下面的GIF中，我有如下的clip-path:
将每个方向的多边形值设置为0 0，则裁剪区域的大小将调整为0。结果，图像将不会显示。同样，这也可以用一个圆来代替多边形:
img { clip-path: circle(0 at 50% 50%); }
7. 可访问性对clip-path的影响
元素仅在视觉上隐藏， 屏幕阅读器和键盘焦点仍然可以使用它。
事例源码：
https://*code**pen.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 spanLike/span /button
我们的目标是以可访问的方式隐藏文本。为此，我添加了以下CSS
.button span { color: transparent; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; }
事例源码：https://codepen.***io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100
隐藏按钮
在Twitter上，有一个名为查看新推文(See New Tweets)的按钮，对于带有aria-hidden内容的屏幕阅读器来说是隐藏的，只有在有新推文可用时才会显示出来。
总结
到此这篇关于隐藏 Web 中的元素方法及优缺点教程详解的文章就介绍到这了,更多相关隐藏 Web 中的元素内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！