当我们谈论创建可访问的网站时，确保所有用户（包括那些依赖屏幕阅读器等辅助技术的用户）都可以导航并与我们的内容交互是关键。

然而，实现这种程度的包容性并不总是那么简单，尤其是在处理复杂的 Web 应用程序时。这就是 ARIA（可访问的富互联网应用程序）的用武之地。

在本文中，我们将探讨 ARIA 是什么、它为何重要以及如何有效地使用它来构建更具包容性的 Web 应用程序。

  什么是 ARIA？

ARIA 是一组指南，旨在通过为辅助技术提供额外的语义和上下文来增强 Web 内容的可访问性。

它允许开发人员使依赖屏幕阅读器和其他辅助工具的用户更容易理解自定义组件和动态内容。

  为什么 ARIA 很重要？

现代 Web 开发已经超越了静态 HTML，今天我们使用 JavaScript 驱动的组件、单页应用程序和交互式小部件。

虽然这些发展增强了用户体验，但对于许多人来说，它们经常扰乱屏幕阅读器解释网页内容的方式，从而带来可访问性挑战。

例如，使用divs和spans制作的自定义下拉菜单对于没有视觉障碍的用户来说可能效果很好，但对于屏幕阅读器用户来说却显示为令人困惑的文本块。 ARIA 通过提供帮助辅助技术正确理解和宣布这些组件的属性来解决这个问题。

通过使用 ARIA 属性，开发人员可以确保所有用户都可以访问下拉列表、模式和轮播等元素。

了解如何有效使用 ARIA

ARIA 属性直接添加到 HTML 元素中，增强了辅助技术的语义含义。以下是一些关键属性：

  • role ：定义辅助技术的元素类型（例如， button 、 alert 、 dialog ）。
<span class="nt">&lt;div</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">&gt;</span>Click me<span class="nt">&lt;/div&gt;</span>

Enter fullscreen mode Exit fullscreen mode

  • aria-label ：为没有可见文本的元素提供可访问的名称
<span class="nt">&lt;button</span> <span class="na">aria-label=</span><span class="s">"Close menu"</span><span class="nt">&gt;</span>X<span class="nt">&lt;/button&gt;</span>

Enter fullscreen mode Exit fullscreen mode

  • aria-labelledby ：将一个元素链接到另一个作为其标签的元素。
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"profile"</span> <span class="na">role=</span><span class="s">"region"</span> <span class="na">aria-labelledby=</span><span class="s">"profile-heading"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"profile-heading"</span><span class="nt">&gt;</span>User Profile<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;p&gt;</span>Name: John Doe<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;p&gt;</span>Email: johndoe@example.com<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>

Enter fullscreen mode Exit fullscreen mode

根据上面的代码， <div>中的aria-labelledby属性引用 ID 为 profile-heading 的<h2>元素。这告诉辅助技术区域<div>应由<h2> （“用户配置文件”）的内容标记。因此，屏幕阅读器用户可以更好地理解该区域是“用户配置文件”部分。

  • aria-live ：通知屏幕阅读器有关动态内容更改。
<span class="nt">&lt;div</span> <span class="na">aria-live=</span><span class="s">"polite"</span><span class="nt">&gt;</span>New notifications will appear here.<span class="nt">&lt;/div&gt;</span>

Enter fullscreen mode Exit fullscreen mode

从上面的代码来看， aria-live="polite"属性确保辅助技术在不中断用户的情况下宣布此更新。它非常适合通知用户有关后台操作（例如保存确认或状态更新）的信息。

更多 ARIA 实际应用示例

示例 1：可访问的模态对话框

没有 ARIA 的模式对话框可能不会将自己声明为对话框，从而使屏幕阅读器用户不知道它的存在。

  与咏叹调：

<span class="nt">&lt;div</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"dialog-title"</span> <span class="na">aria-describedby=</span><span class="s">"dialog-description"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;h2</span> <span class="na">id=</span><span class="s">"dialog-title"</span><span class="nt">&gt;</span>Subscribe to our newsletter<span class="nt">&lt;/h2&gt;</span>
  <span class="nt">&lt;p</span> <span class="na">id=</span><span class="s">"dialog-description"</span><span class="nt">&gt;</span>Enter your email address below to subscribe.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">aria-label=</span><span class="s">"Close dialog"</span><span class="nt">&gt;</span>X<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>

Enter fullscreen mode Exit fullscreen mode

这可确保正确宣布对话框的目的和内容。

  示例 2：自定义选项卡

如果没有 ARIA，屏幕阅读器可能无法识别选项卡及其关联内容。

  与咏叹调：

<span class="nt">&lt;div</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-selected=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"panel-1"</span><span class="nt">&gt;</span>Tab 1<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"panel-2"</span><span class="nt">&gt;</span>Tab 2<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"panel-1"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>Content for Tab 1<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"panel-2"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">hidden</span><span class="nt">&gt;</span>Content for Tab 2<span class="nt">&lt;/div&gt;</span>

Enter fullscreen mode Exit fullscreen mode

ARIA 属性（如role="tablist" 、 aria-selected和aria-controls在选项卡及其内容之间创建了清晰的关系。

何时使用 ARIA（以及何时不使用）

尽管 ARIA 功能强大，但它不应该是您的可访问性的首选。 <button> 、 <input>和<select>等本机 HTML 元素已经具有内置的辅助功能。只要有可能，就使用它们，而不是使用 ARIA 和 JavaScript 重新创建它们。

ARIA 最适合在以下情况下使用：

  • 您正在构建缺乏语义 HTML 等效项的自定义组件。
  • 您需要增强或阐明复杂小部件的可访问性。然而，滥用 ARIA 有时会损害可访问性。例如，过度使用角色或提供冲突的属性可能会使屏幕阅读器感到困惑。

  结论

ARIA 不仅仅适合辅助功能专家；它还适合辅助功能专家。它适合每一位致力于构建适合所有人的网络的开发人员。通过深思熟虑地学习和应用 ARIA，您可以一次为一个下拉列表、对话或轮播提供更具包容性的数字空间。

因此，下次构建动态 Web 功能时，问问自己：这对每个人来说如何？然后让 ARIA 引导您找到答案。