浏览器报错处理 Blocked aria-hidden on an element because aria-hidden

遇到的问题，作个笔记！

bootstrap model 关闭的时候控制台提示报错信息：

 Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus.

是 aria-hidden 的属性产生的：

查看页面代码 model 模态框 把 aria-hidden=true 加到了 .modal 这个节点上了，将这个属性去掉就解决了

关于 aria-hidden 属性的详解：
aria-hidden 是一个与可访问性（accessibility）相关的 HTML 属性，它用于告知屏幕阅读器和其他辅助技术是否应该忽略某个元素，从而不将该元素呈现给使用这些技术的用户。

ARIA（Accessible Rich Internet Applications）

ARIA 是一组专门用于提高 Web 内容可访问性的属性，尤其针对使用屏幕阅读器等辅助工具的用户。aria-hidden 是其中一个属性，它与语义 HTML 标签的作用不同，而是帮助向辅助技术表明某些元素是否对残障人士可见或可访问。

aria-hidden 的作用

• aria-hidden="true"：该属性的值为 true 时，表示该元素和它的所有子元素会被屏幕阅读器忽略。这样，这些元素将不被读取或呈现给使用屏幕阅读器的用户。即使元素的样式使其可见，屏幕阅读器也不会将其读取。
• aria-hidden="false"：这个值表示该元素对屏幕阅读器是可见的，允许它作为正常内容被屏幕阅读器读取。如果没有显式设置 aria-hidden，默认情况下元素对屏幕阅读器是可访问的。

应用场景

1. 隐藏装饰性元素：

   • 你可能希望屏幕阅读器忽略一些纯粹用于装饰或视觉效果的元素（例如图标、背景图片等），因为这些元素并不为内容提供有意义的信息。
   • 例如，假设你有一个图标元素，它只用于视觉展示，而不包含任何有用信息，可以设置 aria-hidden="true" 来让屏幕阅读器忽略它。

   <div aria-hidden="true">
     <i class="icon">xxxxxx</i>  <!-- 这是装饰性图标，屏幕阅读器会忽略它 -->
   </div>

2. 隐藏不必要的内容：

   • 有时你可能希望动态地隐藏一些内容，这些内容可能不适合当前的用户（例如，某些信息只适用于特定条件下的用户）。可以使用 aria-hidden 来隐藏这些内容。

   <div aria-hidden="true">
     <p>这个内容在当前情况下对屏幕阅读器用户不可见。</p>
   </div>

3. 动态控制可见性：

   • aria-hidden 还可以用于动态控制元素的可访问性。例如，当某个弹出窗口（如模态框）被打开时，可以使用 aria-hidden="true" 来隐藏背景内容，从而让用户集中注意力在弹出窗口上。

   <div aria-hidden="true">这是被隐藏的背景内容，屏幕阅读器不会读取它。</div>
   <div>这是可见的前景内容，屏幕阅读器将读取它。</div>

4. 改善用户体验：

   • aria-hidden 可以帮助优化用户体验，尤其是在设计复杂的用户界面时。通过正确使用它，可以减少不必要的干扰，使用户能够专注于他们需要关注的内容。

注意事项

• 影响范围：aria-hidden="true" 不仅会影响当前元素，还会递归地影响该元素的所有子元素。如果父元素被设置为 aria-hidden="true"，它的所有子元素都会被屏幕阅读器忽略。

  <div aria-hidden="true">
    <p>这个段落和其内部的所有内容都会被屏幕阅读器忽略。</p>
  </div>

• 使用时机：aria-hidden 应该小心使用。误用可能导致有意义的内容被错误地隐藏，影响用户的访问体验。最好只在元素确实是纯粹装饰性，或在某些条件下不需要被读取时使用。
• 对可视化的影响：aria-hidden 仅影响屏幕阅读器和其他辅助技术的行为，它不会改变元素的可视化显示。即使一个元素被设置为 aria-hidden="true"，它仍然会在屏幕上显示。要完全隐藏该元素，可以使用 CSS 设置 display: none 或 visibility: hidden。

总结

• aria-hidden="true"：使元素和其子元素对屏幕阅读器隐藏，忽略该元素。
• aria-hidden="false"：明确表示该元素对屏幕阅读器可见（如果没有显式设置，则默认为 false）。
• aria-hidden 是帮助提高网页可访问性的重要工具，特别是在有复杂界面时。
• 使用时要小心，确保不会误隐藏那些有意义的内容，从而影响用户体验。

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/1260.html

转载时须注明出处及本声明