hidden 和 aria-hidden 属性有什么区别

hidden 和 aria-hidden 属性的区别

HTML 使用 ARIA(可访问的富 Internet 应用程序)使残障人士可以访问 Web 内容和应用程序。

有一些关键字如“隐藏”是 HTML 和 ARIA 共有的,从而在学习者之间造成混淆。

当某些内容不再相关时,将使用 HTML 隐藏属性。
也可能需要在满足某些条件之前不允许用户查看元素。
当元素具有隐藏属性时,浏览器不应显示它。
之后,在 Javascript 的帮助下,我们可以删除隐藏属性并使元素可见。

使用隐藏属性的示例:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        text-align: center;
      }
      h1 {
        color: #225d9c;
      }
    </style>
  </head>
  <body>
    <h1>Example of the "hidden" attribute</h1>
    <!-- hidden paragraph -->
    <p hidden>经历过风雨,才懂得阳光的温暖。</p>
  </body>
</html>

aria-hidden 属性告诉屏幕阅读器他们是否必须忽略该元素。
它指定由作者实现的元素及其后代元素对用户不可见或者不可感知。
只有当隐藏此内容的过程旨在通过删除冗余内容来改善辅助技术用户的体验时,才必须谨慎使用此属性来隐藏辅助技术可见的呈现内容。
作者必须确保辅助技术可以访问等效和相同的含义和功能。

使用 aria-hidden 属性的示例:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        text-align: center;
      }
      h1 {
        color: #225d9c;
      }
    </style>
  </head>
  <body>
    <h1>使用 "aria-hidden" 属性示例</h1>
    <!-- aria-hidden="false" paragraph -->
    <p aria-hidden="false">
      Here is some text
    </p>
  </body>
</html>
日期:2020-06-02 22:15:14 来源:oir作者:oir