如今，使用JavaScript完成的某些事情确实令人赞叹。 互联网本身还很年轻，但是在其短暂的历史中经历了几次演变-最重要的也许是AJAX之后令人难以置信的Web应用程序的爆炸式增长。 但是有一个失败者，那就是可及性 。 但是，由于Web可访问性倡议的可访问富Internet应用程序（WAI ARIA）的发展，现在我们已经达到了可访问性赶超的地步。
ARIA原则
ARIA规范的核心是一组属性语义 ，用于使辅助技术可以访问交互式内容。 毕竟，屏幕阅读器用户应该如何知道以下标记代表什么？
<label>
<button>25%</button>
</label>如下所示，ARIA添加了至关重要的角色和状态信息，使事情变得容易理解。
<label>
<button role="slider"
aria-orientation="horizontal"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="25"
aria-valuetext="25%">25%</button>
</label>通过使用属于以下三个大类的数据属性，ARIA可以以屏幕阅读器和其他访问技术可以访问的方式构建动态界面，自定义窗口小部件以及现代Web应用程序的所有各种组件。
- 描述元素角色的属性，例如
dialog，progressbar或slider。 - 描述元素的属性 ，如属性
aria-required，aria-multiselectable，或aria-valuemax。 - 描述元素状态的属性，例如
aria-selected，aria-hidden或aria-valuenow。
ARIA的作用
对于您中的许多人来说，您对ARIA的最大了解可能是具有里程碑意义的角色 ，这些角色可以用在任何HTML样式中来描述主要内容块：
<div role="main" id="content"></div>
<div role="complementary" id="sidebar"></div>
<div role="navigation" id="menu"></div>
<div role="contentinfo" id="footer"></div>在HTML5中，界标角色映射到主要结构元素：
<article role="main" id="content"></article>
<aside role="complementary" id="sidebar"></aside>
<nav role="navigation" id="menu"></nav>
<footer role="contentinfo" id="footer"></footer>除了HTML5结构元素之外，还使用地标性角色是桥接技术的一个示例，这是一种临时解决方案，其受益于当前的辅助技术，该技术支持ARIA角色，但尚不了解HTML5语义。 ARIA是专门为提供这种临时解决方案而设计的，并且最终可能会用更好的东西代替ARIA的任何当前属性。
像HTML5这样的正式规范需要花费很长的时间来开发，这比开发人员提出新想法所需的时间长得多。 标准只能反应到什么正在去年完成，而有远见的开发商都远远更感兴趣的是我们现在正在做的事情。 ARIA可以弥补这一差距。
键盘可访问的拖放
现在，我们继续一个示例，该示例使用拖放功能来展示ARIA如何将可访问的语义添加到常见的脚本行为中。 不久之前，拖放操作被认为根本无法访问-一种本质上基于鼠标的交互，无法转换为键盘。 但是，像我的dbx库这样的早期创新表明，可以通过考虑实际的拖放操作然后提供一个可实现相同结果的键盘界面来完成此操作。
我们所说的拖放实际上是两种不同类型的交互。 第一个是内容重新排序，可以在其中上下移动元素以对其进行排序。 第二个是抓取和移动操作，例如在文件夹之间拖动文件。 dbx库在设计时考虑了第一个交互，而ARIA规范着重于第二个交互。
在下面的演示中，以三种不同的方式实现拖放操作-使用draggable属性及其关联的事件（无法通过键盘访问），为不支持draggable浏览器添加鼠标事件，然后添加键事件使键盘用户可以访问它。
键盘交互基于ARIA创作实践中建议的交互：
- 使用Tab键可在项目之间移动。
- 按空格键选择一个项目。
- 使用Tab键可在放置目标之间移动。
- 按Enter或Ctrl + M将所选项目移动到所选放置目标中。
- 或者，按Esc键取消并取消选择该项目。
空格键确实有意义，因为它已经用于选择单选按钮和复选框。 而且， Ctrl + M快捷键是不直观的，并且与Mac OS X中的“ 最小化至停靠”
快捷方式冲突。在我看来，按Enter更为明显并且可用，因此，两者都已实现。 该演示还包含流动的tabindex使用动态tabindex值将元素按本机选项卡顺序放置或放置，具体取决于接口的当前状态。 演示中的每个放置目标是一个列表，每个可拖动对象是一个列表项。 因此，在默认状态下，只有项目按Tab键顺序排列：
<ul>
<li tabindex="0">1</li>
<li tabindex="0">2</li>
<li tabindex="0">3</li>
</ul>
<ul>
<li tabindex="0">4</li>
</ul> 选择一个项目后，列表必须按Tab键顺序排列，以便您可以选择一个作为放置目标。 但是，此时其他项目不再需要按Tab键排序，因为在完成当前项目之前，您不能选择其他项目。 除了在父列表上设置tabindex="0" ，我们还将其从各个项目中删除，这使它们完全脱离了制表符顺序。 这是一件很简单的事情，但这意味着用户只需要按几次键就可以找到他们想要的目标，而不必先跳过所有其他项目！
<ul tabindex="0">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul tabindex="0">
<li>4</li>
</ul> tabindex的原理几乎可以在任何地方使用，因此，在任何给定时间，tab顺序中唯一的元素就是用户现在可以与之交互的元素。
添加ARIA语义
一旦获得了键盘支持，辅助技术我们要做的另一件事就是添加两个ARIA属性aria-droptarget aria-grabbed和aria-droptarget 。 第一个是布尔标志，指示是否已选择元素进行拖动，而第二个是布尔标志，指示是否现在是放置目标。 因此，在默认状态下，不会抓取物品，也没有活动的放置目标：
<ul aria-dropeffect="none">
<li aria-grabbed="false">1</li>
<li aria-grabbed="false">2</li>
<li aria-grabbed="false">3</li>
</ul>
<ul aria-dropeffect="none">
<li aria-grabbed="false" tabindex="0">4</li>
</ul>选择一个项目后，该项目将被抓取，父列表成为放置目标。
<ul aria-dropeffect="move">
<li aria-grabbed="true">1</li>
<li aria-grabbed="false">2</li>
<li aria-grabbed="false">3</li>
</ul>
<ul aria-dropeffect="move">
<li aria-grabbed="false">4</li>
</ul> 为了说明这些更改，该演示包括一个带有浮动工具提示的版本，该版本显示了属性如何随每次交互而更改。 在这种情况下， aria-droptarget值是move ，这意味着所选项目将从一个目标移动到另一个目标。 其他可能的值包括使用copy创建副本和使用link创建引用或快捷方式。
ARIA什么也没做
尽管aria-droptarget属性具有不同的值，但它们实际提供的只是辅助技术的信息 ，因此它们可以告诉用户将会发生什么。 属性本身根本不做任何事情。 因此，ARIA不会改变我们构建Web应用程序的方式，它只是提供用于描述它们的语义属性。
可以（应该）使用ARIA的另一个主要示例是通过AJAX对页面进行动态更新时，ARIA之前的屏幕阅读器根本无法理解。 屏幕阅读器使用一种虚拟缓冲区 ，它是设备实际读取的当前页面的临时快照。 当使用AJAX加载新内容并将其添加到DOM时，虚拟缓冲区不会更新，这就是屏幕阅读器无法访问第一代AJAX应用的原因。
ARIA通过其aria-live属性解决了这个问题，该属性可用于指示内容何时更改以及更改的重要性。 例如，如果您在元素上设置aria-live="assertive" ，然后更新其内容，则内容更改将立即传达给用户。 或者，如果您设置aria-live="polite" ，则会在用户方便时进行通信。 这些优先级基于用户当前正在执行的操作，因此， assertive更改会立即打断他们，而polite更改会等到他们不忙为止。 由屏幕阅读器决定这些优先级如何在用户的工作流程中体现。
从开发人员的角度来看，您只需要考虑更新的重要性。 polite值将用于大多数内容在后台发生变化的情况，例如实时新闻头条或体育比赛结果。 assertive值将用于需要立即注意的事情，例如表单验证错误。
结论
ARIA并不是完美的，并且尚未完全实现，但是尽管如此，我还是建议您在适用的情况下尝试使用它。 所有自定义窗口小部件和Web应用程序都应至少具有基本的ARIA支持，因为这使某些可访问性与根本没有可访问性有所区别。
如果您想了解有关使用WAI ARIA的更多信息，我建议您介绍WAI ARIA简介 。 Gez Lemon的JuicyStudio和Steve Faulkner的Paciello Group Blog也是有用的书签。 最终，您会发现自己正在阅读ARIA 规范和创作实践 （祝您好运！）
您也可以从本文下载演示：
From: https://www.sitepoint.com/accessibility-in-modern-interfaces/
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
