隐藏元素的 12 种写法以及是否会阻止读屏软件朗读

Legend80s
249 阅读3分钟

Accessibility Tree

首先介绍一个新名词，辅助功能树 Accessibility Tree。通过辅助功能树，检查无障碍不再繁琐，无需打开手机读屏功能就能快速检测某个元素是否被读屏软件识别。

如何使用辅助功能树

F12 后，点击右侧的双箭头，可以看到 Accessibility，点击它，然后选中元素即可看到该元素是否在辅助功能树上，以下截图是默认情况下，文字在辅助功能树上，可被读屏软件朗读：

image.png

当我们尝试增加 visibility: hidden：

image.png

可以看到 Ignored，说明不会被读屏软件识别或朗读。

CSS 隐藏元素的方法和对读屏软件的影响

以下是CSS中可以隐藏元素的几种方法，以及它们是否会阻止读屏软件朗读的说明：

  1. display: none;

    • 效果：完全隐藏元素，元素不占据任何空间。
    • 是否阻止读屏软件朗读：是，读屏软件无法访问该元素[1] [6].

  2. visibility: hidden;

    • 效果：隐藏元素，但元素仍然占据空间。
    • 是否阻止读屏软件朗读：是，读屏软件无法访问该元素[9].

  3. opacity: 0;

    • 效果：使元素完全透明，但仍然占据空间。
    • 是否阻止读屏软件朗读：否，读屏软件仍然会朗读该元素[3] [6].

  4. position: absolute; 并将元素移出屏幕

    • 效果：通过设置 position: absolute; 并将 top 或 left 设置为一个非常大的负值，将元素移出可视区域。
    • 是否阻止读屏软件朗读：否，读屏软件仍然会朗读该元素[2].

  5. clip-path 或 clip

    • 效果：通过裁剪元素，使其不可见。
    • 是否阻止读屏软件朗读：否，读屏软件仍然会朗读该元素[3].

  6. height: 0; width: 0; overflow: hidden;

    • 效果：将元素的高度和宽度设置为0，并隐藏溢出内容。
    • 是否阻止读屏软件朗读：否，读屏软件仍然会朗读该元素[1].

  7. z-index: -1;

    • 效果：将元素置于其他元素的下方，从而不可见。
    • 是否阻止读屏软件朗读：否，读屏软件仍然会朗读该元素[3].

  8. transform: scale(0);

    • 效果：将元素缩放为不可见。
    • 是否阻止读屏软件朗读：否，读屏软件仍然会朗读该元素[2].
隐藏方式是否被读屏软件识别是否占据空间说明
display: none🚫🚫元素从渲染树中移除，不占据空间[1] [3].
visibility: hidden🚫占据元素隐藏但仍占据空间[8].
opacity: 0✅占据元素透明但仍可被读屏软件识别，占据空间[1] [7].
position: absolute; left: -9999px 或 top: -9999px✅🚫将元素移出视口范围，不占据空间[6].
clip-path: inset(50%) 或 clip: rect(0, 0, 0, 0)✅占据元素被裁剪为不可见，但仍占据空间[6].
width: 0; height: 0; overflow: hidden✅占据元素尺寸为0，内容不可见，但仍占据空间[1].
transform: scale(0)✅占据元素缩放为0，不可见但仍占据空间[6].
z-index: -1✅占据元素被置于其他元素下方，可能不可见，但仍可被读屏软件识别，占据空间[6].
filter: opacity(0)✅占据类似于 opacity: 0，元素透明但仍可被读屏软件识别，占据空间[1].
hidden 属性🚫🚫HTML 属性，等同于 display: none;[7].
动态移除 DOM 元素🚫🚫使用 JavaScript 删除元素，如 element.remove()[7].
aria-hidden="true"🚫占据仅对读屏软件隐藏，视觉上仍可见[3].

总结

  • 会阻止读屏软件朗读的 4 种方式
    • CSS：display: none; 和 visibility: hidden;。
    • DOM 属性 hidden 和 aria-hidden="true" 也会阻止
  • 不会阻止读屏软件朗读的 6 种 CSS：opacity: 0;、position: absolute;（移出屏幕）、clip-path、height: 0; width: 0; overflow: hidden;、z-index: -1;、transform: scale(0);。

选择合适的隐藏方式需要根据具体的需求来决定，例如是否需要屏幕阅读器访问内容。

avatar
文章
阅读
粉丝