实施ARIA的最佳做法

今天，为了纪念国际残疾人日，我们在Envato Tuts +上强调了可访问性 。

ARIA是Web开发人员可以用来帮助使其网站更易于访问的重要功能。 在之前的文章中，我们讨论了如何实现ARIA，无论您是在电子商务网站上还是在更小众的地方。

到目前为止，本系列的重点是如何实现ARIA，例如，如何在元素中添加角色或如何编写更易访问的表单。 通过这篇文章，重点将转移到在线可访问性的其他方面，例如为什么以及何时应该使用ARIA。 在整个系列的前几篇文章中，我们还将介绍一些常见问题。

好吧，让我们开始吧！

什么是ARIA？

从根本上来说，ARIA是对当前Web开发语言（主要是HTML）的扩展，可以增强对最终用户的可访问性。

不过，这到底是什么意思？

使用ARIA扩展HTML

HTML在定义元素的方式以及元素之间如何相互关联方面存在一些缺陷。

在许多情况下，HTML元素（例如<div>标记）定义得太宽泛，以至于无法使用屏幕阅读器浏览网站的人使用该元素，或者该元素可能具有太多可能的含义而无法解释（例如，图像也可能用作按钮）。 ARIA向HTML元素添加了其他属性，以允许可以在现有标记语言之上分层的定义，并根据需要增加清晰度。

第二个主要好处是元素之间的关系。 使用HTML，每个元素都作为另一个元素的子元素和/或父元素存在。 但是这种结构不能捕获所有语义关系。 如果将它们放置在单独的div容器中，则可能导致诸如控制器及其所控制的元素之类的场景无法明确关联。 在复杂的网站结构中或使用JavaScript更改DOM时，这一点变得越来越重要。

除了这两个好处之外，还有许多其他好处往往会引起人们的注意，但仍然提供出色的功能。

先进的可访问性的ARIA

尽管Web上的许多网站都在朝着更易于使用的UX方向发展，但是ARIA在其他可能无法简化其结构的人中扮演着重要的角色。 在某些情况下，网站可能需要树控件，例如文件系统常用的树控件。 通过提供其他结构，ARIA使那些可能无法通过其他方式访问它们的人可以使用这些更高级的控件，尤其是对于寻求创建具有拖放功能的网站的用户而言。

ARIA的另一个关键功能是ARIA不仅扩展了HTML，而且还可以用于使其他对访问性不太友好的技术可供更多用户使用。 对于将AJAX或DHTML用于其Web应用程序的人来说，通常是这种情况。

确实，这些只是表面上的问题。 如果您想了解有关功能，属性和其他有用参数的更多信息，请查看WAI-ARIA概述 。

为什么要使用ARIA？

就可访问性而言，ARIA已成为最广泛采用的标准之一，在前一百万个网站中 ，有25％以上都在使用它。

使用WAI-ARIA的最大好处是，它可以增加您网站上的可访问性。 依靠屏幕阅读器，视力低下或使用替代界面访问网络的用户将从实施中受益匪浅 -在某些情况下，如果没有网站，他们可能无法充分使用该网站。 对于许多人来说，可访问性被视为Web的核心价值，作为开发人员，我们应尽可能提供它。

除了最佳实践方面，还有实施ARIA的商业动机。 2-3％的美国人有某种形式的弱视 ，大多数市场中有很大一部分将从该标准的使用中受益。 此外，随着ARIA在非标准Web界面中的采用越来越多，并逐渐渗透到诸如智能扬声器之类的设备中，现在实施就将是有益的。

实施ARIA的最佳做法

到目前为止，我们一直专注于本系列中的实际实现方法。 现在就拥有如何将ARIA添加到您的站点的基础知识，让我们看一下一些将您自己的实现组合在一起的关键准则。

使用轻触方式

良好的ARIA实施并不需要每一次机会都需要其他属性和角色。

尽可能使用最少的附加代码来传达必要的信息是理想的。 例如，过度使用ARIA类似于使您的网站首页成为视觉用户的完整网站地图。 使用屏幕阅读器的人们会因过度使用ARIA的页面上的通知数量和附加标记而感到不知所措，与我们所寻求的相反。

目标是提供足够的附加标记以使您的重要元素的上下文清晰可见，而超出此范围的任何内容可能都是不必要的。

避免冗余（尤其是在使用HTML5时）

在本系列的前几篇文章中，我们讨论了role属性。 我们将其放置在需要用户注意的每个位置。 但是，有一个重要的例外，那就是我们之前没有讨论过，这是避免冗余的必要。

每当要添加ARIA的元素已经明确定义了它的含义时，都可以跳过向其添加ARIA的操作。 为什么是这样？ 因为ARIA旨在扩展现有代码以使其更具可读性，但是在某些情况下，代码已经清晰，结构化且易于理解。

对于使用HTML5中引入的元素的人们来说，这种情况经常发生。 例如，当使用<button>元素时，您不再需要添加attribute role="button" ，因为该角色已经由HTML代码明确定义。

使用屏幕阅读器进行测试

创建良好的ARIA实现的另一个关键是要确保您使用一两个屏幕阅读器来测试您的网站。 您可能会对它们的功能细节以及使您的网站因意外使用而烦恼的容易程度感到惊讶。

许多ARIA属性可以为最终用户创建通知或警报，如果您使用的是每10秒更改一次的aria直播内容区域，则可能是由于实施方式使您使用网站变得更加困难。

Web的迭代可访问性

向网站添加其他可访问性度量时，请务必记住这不是一项全部任务或一无所有的任务。 您无需一次尝试就完全覆盖整个网站，而迭代添加可能是最好的方法。

从主要内容区域和导航开始，然后在整个站点中缓慢传播是一个可靠的策略，随着时间的流逝，它会不断完善。 即使您每月计划安排15或30分钟来增加对站点的可访问性，这也是朝着正确方向迈出的一步。

良好的用户体验就是良好的可访问性（反之亦然）

对于可访问性问题，ARIA并非万灵药。 作为可访问性工具包中的另一个工具，至关重要的是，高度重视出色的UX设计，尤其是在文本可读性方面。

如果您想更深入地研究如何利用UX和开发（在ARIA之外）来改善可访问性，请参阅Web Content Accessibility Guidelines 。

您还可以查看我们的《 Web无障碍完整学习指南》 。

有关ARIA的常见问题

这个关于ARIA的系列引起了许多读者的共鸣，并引发了社区中的讨论。 让我们保持下去！ 提高知名度和改进这些教程是将可访问性带到最前沿的最佳方法。

以下是一些网络上最常见的问题和评论：

哪些浏览器支持WAI-ARIA？

一堆！ 大多数现代浏览器都在某种程度上支持ARIA的功能，尽管不同浏览器对此略有不同。 如果要查看每个浏览器的详细信息，可以使用“ 我可以使用吗？”之类的工具。

可以将ARIA与WordPress一起使用吗？

是的 一些WordPress主题已经集成了ARIA，但是您可以将其添加到可以编辑源代码的任何主题中。 此外，您还可以将ARIA与几乎所有内容管理系统一起使用！

如果不支持ARIA，会发生什么？

由于ARIA不会影响渲染，所以什么都没有！ 在大多数情况下，如果设备不支持ARIA，它将被完全忽略。

使网络更美好！

将本系列的所有文章放在一起，希望您现在拥有改善站点可访问性所需的所有工具！

如果您有任何疑问，反馈或对我所说的内容有更正，请在评论中让我知道！

翻译自: https://code.tutsplus.com/articles/best-practices-for-aria-implementation--cms-32238