海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

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

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

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

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

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

例如,假设您有一个带有复选框的页面,并且您在 HTML 中使用了 ARIA。 ARIA 会告诉屏幕阅读器通知用户页面上有一个复选框,并会指示它是否被选中。 原生 HTML 不能自己做到这一点。

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

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

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

海外社媒SNS代运营Tiktok代运营公司

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

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

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

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

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

语义元素——例如 <标题>, <人物>, 和 <导航> – 描述其 HTML 的用途。 将 ARIA 合并到这些元素中是多余的,因为语义 HTML 已经暗示了元素的角色(我们稍后将更多地讨论 ARIA 角色)。

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

解释 HTML 的 ARIA 规则的表格。

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

2. 为 HTML 标签添加角色

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

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

<div role="alert">
<p>Please install the latest update!</p>
</div>

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

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

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

<header><div role="alert">
<p>Please install the latest update!</p>
</div></header>

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

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

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

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

两者都很容易发现,因为它们总是以 咏叹调- 其次是正在使用的特定状态或属性。 例如,用于通知屏幕阅读器默认情况下填充复选框的状态是 咏叹调检查, 如本例所示:

<span role="checkbox" 
aria-checked="true"
tabindex="0"
id="simulatedcheckbox">
</span>

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

<figure aria-labelledby="operahouse_1" role="group">
<img src="https://www.elegantthemes.com/blog/wordpress/operahousesteps.jpg" alt="The Sydney Opera House">
<figcaption id="operahouse_1">We saw the opera <cite>Barber of Seville</cite> here!</figcaption>
</figure>

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

结论

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

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

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

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

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

海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts