Divi WordPress Theme

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

幸运的是,有一个系统可以帮助您 全部 的用户体验了您辛勤工作的结果。 将可访问的富Internet应用程序(ARIA)集成到您网站的HTML中仅需花费一点额外的精力,就可以取得巨大的收益。 这篇文章将向您介绍ARIA及其使用方法。 我们走吧!

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

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

这是因为将ARIA合并到HTML中会影响浏览器为屏幕阅读器修改网页的方式。 修改后的内容显示在可访问性树中,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发生冲突。

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

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

一张表格,解释ARIA for HTML的规则。

第一列指定HTML元素,第二列列出隐式角色。 如果元素具有列出的隐式角色,则无需为此元素包括其他ARIA角色。 第三列根据最佳实践列出了每个HTML元素可以具有的角色。

2.将角色添加到HTML标签

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

因此,例如,如果您想创建一个警报来通知用户他们需要安装更新,则可以使用“ alert”角色,如下所示:

<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>

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

<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开发时,创建可访问的内容可能并不是您的第一件事。 但是,通过遵循网络可访问性最佳做法,并将ARIA HTML合并到您的站点中,您可以在使所有人都能使用网络方面发挥作用。

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

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

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

文章缩略图EgudinKa / shutterstock.com


【免费外贸推广营销视频培训教程】
https://school.yooopaaa.com

WordPress著名Avada主题官方优惠
https://1.envato.market/xxPav

WordPress可视化建站Elementor插件
https://elementor.com/?ref=19904

WordPress外贸独立站DIVI主题官方优惠
https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=59787

亚马逊选品工具Jungle Scout官方优惠
https://junglescout.grsm.io/jieqiu1568

独立站SEO优化工具Semrush免费7天试用
https://shareasale.com/r.cfm?b=1577772&u=2541755&m=97231&urllink=&afftrack=