如何在 WordPress 网站的 HTML 中使用 ARIA

已发表: 2019-06-29

Web 开发的主要目标之一是创建引人入胜的用户体验。 您通常会通过在您的网站上包含交互功能和令人惊叹的视觉元素来做到这一点。 但是，并非每个潜在访问者都可以访问这些方面，尤其是那些依赖屏幕阅读器的访问者。

幸运的是，有一个系统可以帮助您的所有用户体验您辛勤工作的成果。 将可访问的富 Internet 应用程序 (ARIA) 合并到您站点的 HTML 中只需要一点点额外的努力，它可以带来巨大的回报。 这篇文章将向您介绍 ARIA 以及如何使用它。 我们走吧！

ARIA 简介：它是什么以及为什么要使用它

简而言之，ARIA 是一种指定 HTML 属性的方法，以便屏幕阅读器可以准确识别它们，然后将它们传递给访问者。 它是可访问 Web 开发的一个关键方面，有助于为屏幕阅读器用户创建更准确的体验。

这是因为在 HTML 中加入 ARIA 会影响浏览器为屏幕阅读器修改网页的方式。 修改后的内容显示在可访问性树中，ARIA 负责将您的 HTML 元素转换为该树。

例如，假设您有一个带有复选框的页面，并且您在 HTML 中使用了 ARIA。 ARIA 会告诉屏幕阅读器通知用户页面上有一个复选框，并指示它是否被选中。 本机 HTML 不能单独执行此操作。

想一想您使用网络的频率，不仅在工作中，而且在日常生活中。 现在想象一下，如果您无法使用大部分网络。 您将获得更少的教育、就业、医疗保健、信息、通信甚至娱乐资源。

使用无障碍 Web 开发的最佳实践是尽自己的一份力量，使互联网成为所有人（无论年龄或能力如何）机会均等的地方。 这被联合国视为一项基本人权，是一个值得追求的目标。

但是，如果这还不足以让您投入使用 ARIA，那么您可能还需要注意，从业务角度来看，可访问的开发也很有用。 它与搜索引擎优化最佳实践重叠，并增加您网站的覆盖面。 另外，在某些情况下，这是法律要求的。 换句话说，有很多理由可以采取一些简单的步骤来使您的网站更易于访问。

如何在 WordPress 网站的 HTML 中使用 ARIA（3 个关键实践）

我们绝对建议您继续就 ARIA 和 Web 可访问性进行自我教育，这超出了本文的范围。 您可能特别想考虑测试您网站的当前可访问性。

也就是说，要开始在 WordPress 网站的 HTML 中使用 ARIA，您只需要知道三件事。 学习以下实践应该为您提供坚实的基础。

1. 将 ARIA 与语义 HTML 结合使用

在我们讨论如何将 ARIA 应用于您的 HTML 之前，重要的是要注意什么时候使用它是合适的。 虽然原生 HTML 本身并不能提供可访问的 Web 内容，但有一些语义元素要么使 ARIA 变得不必要，要么如果使用不当就会与 ARIA 发生冲突。

语义元素——例如<header> 、 <figure>和<nav> ——描述了它们的 HTML 的用途。 将 ARIA 合并到这些元素中是多余的，因为语义 HTML 已经暗示了元素的角色（我们稍后将更多地讨论 ARIA 角色）。

此外，还有一些适用于使用 ARIA 的规则，以防止开发人员以与语义 HTML 冲突的方式使用它。 万维网联盟 (W3C) 有一个有用的表格，可以分解哪些语义 HTML 元素暗示了 ARIA 角色：

解释 HTML 的 ARIA 规则的表格。

第一列指定一个 HTML 元素，而第二列列出隐含的角色。 如果元素列出了隐含的角色，则不需要为其包含额外的 ARIA 角色。 根据最佳实践，第三列列出了每个 HTML 元素可以具有的角色。

2. 为 HTML 标签添加角色

一旦您确定您正在处理的 HTML 元素需要使用 ARIA，您就可以开始使用“角色”和“属性”。 您可能已经从上一节中了解了 ARIA 角色的作用。 它们指定标签中包含的元素类型，并表示元素的用途。

因此，例如，如果您想创建警报以通知用户他们需要安装更新，您可以像这样使用“警报”角色：

 <div role="警报">
<p>请安装最新更新！</p>
</div>

正如我们之前解释过的，如果元素是语义化的并且暗示了角色，则您不需要分配角色，并且您不应该为与其暗示角色冲突的元素分配新角色。 但是，您还应该注意，您只能对每个元素应用一个角色。

可以这样想——角色定义了元素是什么。 一个元素不能同时是两个东西，所以你应该选择最能描述它的角色。 也就是说，当您需要时，您可以选择将一个元素嵌套在具有不同角色的元素中。

例如，如果您想将上述警报添加到您的标题中，它可能如下所示：

 <header><div role="alert">
<p>请安装最新更新！</p>
</div></header>

这不是说明单个元素既是标题又是警报，而是清楚地表明标题中包含警报。

3. 包括注释状态和属性的属性

属性是构成 ARIA 的第二个元素。 它们与角色的不同之处在于，它们告诉屏幕阅读器有关特定元素的一些重要信息，而不是定义该元素是什么。 有两种类型的 ARIA 属性：

  • 状态共享有关在用户与其交互时可能会更改的功能的信息。 例如，这可能包括复选框或单选按钮。
  • 属性指出在使用过程中不太可能改变的特性。 标记另一个元素的元素，或元素所在的层次级别，都是属性。

两者都很容易发现，因为它们总是以aria-开头，然后是正在使用的特定状态或属性。 例如，用于通知屏幕阅读器默认情况下已填充复选框的状态是aria-checked，如下例所示：

 <span 角色="复选框" 
咏叹调检查=“真”
tabindex="0">
</span>

同样，用于记录一个元素何时标记另一个元素的属性是aria-labelledby。 例如，您可以将此属性应用于图像，以指示与其关联的标题：

 <figure aria-labelledby="operahouse_1" role="group">
<img src="operahousesteps.jpg" alt="悉尼歌剧院">
<figcaption>我们在这里看了歌剧<cite>塞维利亚的理发师</cite>！</figcaption>
</图>

我们建议您查阅 W3C 的允许角色、状态和属性列表，以查看您可以使用的更多属性示例。

结论

在 Web 开发方面，创建可访问的内容可能不是您的第一要务。 但是，通过遵循 Web 可访问性最佳实践，并在您的站点中加入 ARIA HTML，您可以发挥作用，让每个人都可以使用 Web。

在 WordPress 网站上使用 ARIA 的三个关键实践包括：

  1. 将 ARIA 与语义 HTML 结合使用。
  2. 向 HTML 标签添加角色。
  3. 包括注释状态和属性的属性。

您对在 WordPress 网站上使用 ARIA 有任何疑问吗？ 在下面的评论部分让我们知道！

文章缩略图图片 EgudinKa / shutterstock.com