仅使用标准HTML，现代Web应用程序就可以将具有可访问性需求的用户拒之门外。
HTML是在线的主要标记语言， 近83％的现有网站使用 HTML。 自创建以来的25年中发生了一些变化，但即使是较新的迭代（例如HTML5和AMP）也有很多不足之处，尤其是在可访问性方面。 这就是ARIA的用武之地。在本教程中，我将讨论ARIA是什么，为何对您的站点有用，以及可以将其添加到站点的几种方法。
什么是ARIA？
ARIA（也称为WAI-ARIA）代表Web无障碍倡议的可访问富Internet应用程序。 完整的规格文档可在此处找到 。 请注意，完整的规范文档非常密集，因此从阅读本文并检查下面我链接的其他一些资源开始可能是一个好主意。
ARIA的主要目的是允许HTML内部具有高级语义结构，以代替HTML的语法繁重的性质。 换句话说，HTML告诉浏览器事物去向，而ARIA告诉事物它们如何相互作用。
谁负责ARIA？
ARIA是W3C（万维网联盟）主办的项目。 该项目遵循与其他计划相同的更新和编辑标准。 他们还提供了一个包含多个测试的GitHub存储库，您可以运行这些测试以确保您的页面正常运行。
我当前的网站标记出了什么问题？
对于自适应技术（例如屏幕阅读器），大多数具有结构化，经过深思熟虑的设计的网站都做得很好。 但是，让用户能够弄清楚如何使用您的网站并易于使用是不同的事情。 低视力用户约占总人口的2％ ，对于他们来说，差异可能意味着在尝试执行基本的在线任务时节省了大量时间和侦探工作。 为游客提供壮观的体验和为他们提供迷宫般的导航之间可能会有所不同。
除了传统的可访问性方法之外，ARIA正在探索进入提供新的标准交互方式的技术。 越来越多的语音系统，聚合浏览（例如，车载计算机）和其他创新技术使ARIA得以利用，以利用其增强的语义功能。
好的，但是它做什么呢？
总体而言，ARIA以语义上有意义的方式将元素连接在一起。 它为用户提供了有关交互的其他含义。 以下是一些实际使用示例：
- 关联非嵌套元素：使用纯HTML，用户的浏览器只能查看基于父/子关系的关系。 但是，在某些情况下，我们可能需要一系列与HTML层次结构中的内容平行的按钮。 使用ARIA，我们可以定义每个按钮是什么类型的控制器，以及它在文档中其他位置所控制的元素。
- 声明交互元素：尽管HTML提供了一些交互元素，但ARIA定义了数十个元素，从而可以更精细地描述页面的每个元素可以做什么。 此外，可以将这些标签分配给通常不用于此目的HTML标签，但在您的特定情况下可能有意义。 例如，对于一系列不想由表单元素组成的复选框，可以使用
<li>标记。 - 实时区域更新通知：ARIA提供的另一个功能是定义“实时”内容区域。 当以此方式定义内容区域时，只要该元素内的内容发生更改，ARIA就会通知用户。 当确保低视力用户知道您页面上的某些内容已更改时，此功能很有用。
将ARIA添加到您的网页
我们已经讨论了ARIA可以做什么，所以现在让我们看一些最常见的例子。 我们将在每个部分的开头简要说明要实现的目标，然后提供有关如何实现目标的代码示例。
使用ARIA创建替代标签
当涉及替代标签时，大多数开发人员都熟悉<img>标签上常用的alt属性。 这个标签有一个重要的用途：描述它所附着的图像以增加可访问性（或作为常见的SEO策略，具体取决于您的角度）。
ARIA提供了一个称为aria-label的相似属性，可以将其附加到任何HTML元素，从而不仅改善了图像的可访问性，而且还改善了站点部分，表单控件等的可访问性。 这是一个看起来像的例子：
<!-- adding alternative labeling to an image (with non-visible text) -->
<img aria-label="Descriptive image text" src="#" />
<!-- adding alternative labeling to an image (with visible text) -->
<img aria-labelledby="image-text-desc" src="#" />
<div id="image-text-desc">A text description of the image, visible on the screen</div>定义特定于ARIA的UI元素
HTML已经提供了许多用于创建网页的元素，但是它们的主要重点通常是一般性地定义区域并向用户提供网站的结构。 ARIA提供了几十个其他元素，这些元素更加关注元素的使用方式，例如计时器，工具提示或进度条。
这里的一个示例用法是您可能在表单上找到的工具提示。 创建链接的方法有很多种，从触发一些JavaScript的链接到悬停时创建模式的元素，不一而足。 这里缺少的部分是，尽管视障用户可能会使用它，但低视力用户可能甚至都不知道该工具提示存在。
您可以使用ARIA定义工具提示，如下所示：
<!-- Defining a question mark image as a tooltip UI element -->
<img src=”questionmark.png” role=”tooltip” />可用的ARIA定义
为了扩展这些UI元素，这里简要列出了一些可以定义的最有趣的“角色”。 完整列表可在参考的规范文档中找到。
-
search -
banner -
presentation -
toolbar -
status -
menuitem -
log -
dialog -
link
在父母/子女结构之外建立关系
现在，让我们扩展一下我们之前讨论的一点：HTML的强制结构。 父母/子女关系可以很好地决定事物的订购方式，但是当需要更有意义的联系时，这种关系就显得不足。 一个例子就是兄弟元素。 一些库增加了遍历同级或其他形式的元素关系的功能，但这通常以JavaScript或标记之外的另一种语言发生。
ARIA使我们能够在标记中正确定义这些关系，从而更容易对菜单项进行分组，创建非标准导航以及将控件附加到通常难以完成的元素区域。
让我们看一下如何使用它来将某些控件连接到内容区域：
<img src=”nextbutton.jpg” role=”button” aria-controls=”tutorial” />
<div id=”tutorial”>
Your tutorial's content
</div> 该片段说明nextbutton.jpg图像是一个按钮，是下面的div控件。
在ARIA中创建“实时”元素
我们将在此处介绍的ARIA的最后一个功能是aria-live属性。 尽管ARIA的其他大多数功能都涉及语义连接，但该功能直接涉及向用户提供内容或元素更改通知的想法。
对于许多视力低下的人来说，可能尚不清楚他们与您网站的互动是否会导致页面其他位置发生变化。 对于细微的更改尤其如此，例如可能会更改但保持相对相同长度的小文本模糊。 通过使用此属性，每次在定义的元素内更改内容时，都会通知您的用户。
我们可以将此属性添加到这样的元素中：
<div aria-live=”true”>
Content that updates, ie. guided directions
</div>使网络成为所有用户的理想之所
在美国人口中，略高于2％的人口带有某种形式的弱视标签 ，因此改善网站的可访问性可以极大地增加您网站的覆盖面。 对于网站遍及多个国家/地区的用户来说，这个数字甚至更大。 除了可访问性之外，ARIA还为非浏览器界面提供了一种利用您的站点的方法，许多基于语音的设备已经提供了支持。
实施ARIA不仅可以帮助您的用户，而且可以帮助您的访问量，所以请继续努力！
我是否想念任何细节，或者您还有其他疑问？ 在下面发表评论！
如果您想了解完整的ARIA文档或尝试使用官方测试工具，请查看以下链接：
翻译自: https://code.tutsplus.com/articles/site-accessibility-getting-started-with-aria--cms-31707
537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
