ARIA States 简介

最初发布于a11ywithlindsey.com。如果您想观看屏幕阅读器如何解读这些内容的视频示例，它们就在源头！

嘿，朋友们！今天的博文来自我的Patreon 粉丝投票。它是我之前一篇关于“揭秘 ARIA”的文章的后续。ARIA 可能非常神秘且令人望而生畏，但它却非常实用。我最喜欢的用法之一是向屏幕阅读器传达状态。

我看到 a11y 社区出现了一种积极的趋势。a11y 社区成员不再使用类来设置元素样式，而是在 CSS 中使用 ARIA 属性来设置样式。这有助于强制执行无障碍标准，并防止有人在无障碍方面作弊。今天我要讲解的​​属性是aria-expanded、hidden、aria-hidden和aria-current。

属性aria-expanded​

aria-expanded是少数几个没有 HTML5 对应版本的 aria 属性之一。如果我错了，请在推特上留言，但在撰写本文时，我认为这个说法是正确的。在“无障碍手风琴”一文中，我曾经用它aria-expanded来传达部分的状态。

为什么这很有用？让我们以我在上一段链接的博客文章中讨论过的手风琴折叠面板为例：

注意：我更改了上述示例中的代码，使 CSS 更多地与属性联系在一起，而较少与 CSS 类联系在一起。

如果你用屏幕阅读器阅读这段文字，你会看到类似这样的信息：“第 1 部分，已折叠，按钮”。然后，当你使用屏幕阅读器命令打开它时，它会显示：“第 1 部分，已展开，按钮”。（如果你想观看此视频示例，请查看原始博客文章。）

想象一下，如果我们去掉我在单独的 CodePenaria-expanded中所做的属性。

注意：我保留了大部分原始代码。这样，我可以演示视觉上的打开和关闭。此外，它还展示了屏幕阅读器用户无法使用此功能的情况。

如果不添加此aria-expanded属性，当我按下打开菜单时，它不会停止显示“第 1 部分，按钮”，而是告诉我折叠面板是否已打开。这种中断有助于理解空间。（如果您想观看此视频示例，请查看原始博客文章。）

你注意到了吗？当我打开按钮时，它并没有显示该部分是打开还是关闭？这对于屏幕阅读器用户了解当前情况至关重要。不通过语言传达状态信息会让屏幕阅读器用户感到困惑。

每当我们隐藏需要用户操作才能展开的内容时，请使用aria-expanded。当您使用 JavaScript 切换它时，它会获得更好的用户体验。

属性hidden​

如果你看过我上面的注释，你可能已经注意到我修改了代码。之前，我使用了一个aria-hidden属性来实现手风琴折叠面板（稍后会详细介绍）。点击按钮时，我会将值切换为true或false。这样做的原因是hidden是 HTML 中 的等价物display: none。

当我开始研究无障碍功能时，隐藏屏幕阅读器内容的动机让我感到困惑。我为什么要把它们从内容中排除出去呢？我以前一直很抗拒使用，hidden但现实是，有时它是必要的。对于某些形式的内容，我们不希望在与用户交互之前将其暴露给用户。例如，对于模态窗口和手风琴，我们只想在它们打开时看到里面的内容。

何时使用aria-hidden

aria-hidden和之间有一个显著的区别hidden：

aria-hidden仅对屏幕阅读器隐藏元素，而hidden对所有人隐藏。

我问自己，是否存在主要用于装饰的 HTML 元素。如果有，我可能想用aria-hidden它来隐藏它，使其对屏幕阅读器可见，但对视力正常的用户则不可见。

我最喜欢使用的原因之一aria-hidden是避免重复。例如，这是 Twitter 的 Home 按钮：

<a class="js-nav js-tooltip js-dynamic-tooltip">
  <span class="Icon Icon--home Icon--large"></span>
  <span class="Icon Icon--homeFilled Icon--large u-textUserColor"></span>
  <span class="text" aria-hidden="true">Home</span>
  <span class="u-hiddenVisually a11y-inactive-page-text">Home</span>
  <span class="u-hiddenVisually a11y-active-page-text">
    Home, current page.
  </span>
  <span class="u-hiddenVisually hidden-new-items-text">
    New Tweets available.
  </span>
</a>

在这个例子中，屏幕阅读器会根据页面上下文朗读其中一条“a11y 页面文本”。请注意以下这行代码：

<span class="text" aria-hidden="true">Home</span>

这是实际显示在屏幕上的按钮。我们为屏幕阅读器提供了动态选项，例如“主页”、“主页，当前页面”和“加载新推文”。如果我们能看到视觉提示，就不需要在“主页”按钮上添加上下文。

话虽如此，我的规则是，如果我们要切换状态，我会使用hidden。如果有重复或不必要的内容，我会使用aria-hidden。

属性aria-current​

有趣的是，这个对我来说完全是新东西。直到我看到Eric Bailey关于a11y 项目重新设计的推文，我才知道这一点：

关于网络和无障碍实践最棒的一点是，我每天都能学到新东西。看到这条推文后，我找到了Léonie 在 aria-current 上的帖子。他们指出，我们主要使用 CSS 来直观地显示“当前”元素。在我使用 Drupal 的那些日子里，大多数主题都会.is-active在菜单项上添加一个类来反映当前的 URL。

正如 Léonie 所说，这种方法的问题在于 CSS 主要是视觉元素。这意味着（除了一个例外）所有样式都不会暴露给屏幕阅读器。使用 aria-current 有助于确保我们将上下文传达给屏幕阅读器用户。根据WAI-ARIA 1.1aria-current ，可以采用以下几个值：

• 一组分页链接中的链接页面、导航中所表示的当前页面等。
• 步骤表示基于步骤的流程。
• date为当前日期。
• time为当前时间。

此外，一组元素中应该只有一个元素可以有aria-current值。否则，屏幕阅读器会感到困惑！

结论

我计划在未来发布更多关于 ARIA 和状态的博客文章。希望本文能帮助您揭开更多 aria 属性的神秘面纱。

在推特上告诉我你的想法！另外，我现在有了一个Patreon！如果你喜欢我的作品，可以考虑成为我的 Patreon。只要你承诺 5 美元或以上，就可以为以后的博客文章投票！干杯！祝你一周愉快！