调查：ARIA Web标准和HTML应用程序的可访问性
W3C的可访问性Web标准旨在用残障用户可以有效使用的可访问丰富Internet应用程序（ARIA）填充网络。
真正开放和包容的Web需求技术，允许残障用户依靠辅助技术来享受动态Web内容和现代Web应用程序。
WAI-ARIA是针对Open Web Platform的跨平台跨设备解决方案，因此不仅要考虑网站，还要考虑游戏，数字娱乐，医疗保健，移动和其他类型的应用程序。
它提供了可以轻松插入HTML文档的附加标记。
ARIA是Web Accessibility Intitiative（WAI）发布的众多可访问性标准和指南之一 。
在本文中，我们将探讨如何借助WAI-ARIA标准为HTML文档添加可访问性。
ARIA框架
对于完全掌握自己感觉的访问者来说，这几乎不是问题，但它可能会阻止辅助技术用户了解屏幕上正在发生的事情并探索他们的选择。
HTML的语法并不总是允许开发人员正确地描述元素，识别其角色并指定它们之间的关系。
咏叹调前缀的属性有两种类型：描述那些在整个页面生命周期内不太可能更改的功能的属性 ，以及提供有关由于用户交互而经常更改的内容的信息的状态 。
这是ARIA寻求我们帮助的关键点，因为它可以借助地标性角色定义不同元素的目的，并使用aria前缀属性描述其性质。
地标角色
具有里程碑意义的角色使开发人员能够识别网页上可感知的较大区域 ，辅助技术用户可能希望快速访问这些区域。
具有里程碑意义的角色是ARIA 角色模型的最著名形式（其他角色是抽象角色，小部件角色和文档结构角色）。
ARIA标志性角色有8种类型，需要将它们作为属性添加到相关HTML标签中。
角色=“横幅”
在任何HTML文档或应用程序中只能使用标题角色一次，这一点很重要。
通常将它作为属性添加到徽标和其他重要站点范围信息的站点主标题中。
标语角色主要用于与整个网站相关的内容，而不仅仅是与单个页面相关的内容。
角色=“主要”
后者被添加到W3C规范中，目的是将ARIA的主要地标角色映射到语义HTML元素。
它通常遵循<div role="main">语法，或者在HTML5中采用更具语义的<main role="main"> 。
它不能在任何HTML页面上多次使用。
主要的里程碑作用与文档的主要内容有关。
角色=“导航”
角色=“互补”
相关文章，热门文章，最新评论是自主补充内容的典型示例。
需要将其放置在DOM层次结构中与role="main"类似的级别。
互补地标角色描述了与网站主要内容相关的其他内容。
角色=“ contentinfo”
它通常用于网站的页脚。
contentinfo角色通知用户代理有关存在区域的区域，在该区域中可以找到不同种类的元数据，例如版权信息，法律和隐私声明。
角色=“形式”
对于搜索表单，应改为使用role="search" 。
表单界标角色指示等待用户输入的表单。
角色=“搜索”
角色=“应用程序”
您只应谨慎使用此标志性角色。
不建议将其包含在传统网站中，因为它暗示辅助技术将从正常浏览模式切换到应用程序浏览模式。
您可以将应用程序地标角色用于要声明为Web应用程序而不是Web文档的区域。
状态和属性
状态和属性都用aria- * 前缀的aria- * 属性标记。
使用角色可以定义HTML标记的含义，而状态和属性则为用户提供了有关如何与它们交互的更多信息。
Aria必需是属性，因为它是输入元素的永久功能（即用户必须填写），而aria-checked是一种状态，因为复选框可能会由于用户交互而频繁更改其值。
最著名的ARIA属性可能是aria必需的属性和aria校验状态。
Aria前缀属性的语法
此示例中的语法如下所示： <div id="some-id" class="some-class" aria-live="assertive"><div> 。
状态和属性有时采用令牌值（一组有限的预定义值），例如aria-live属性可以具有3个不同的值： off ， polite ， assertive 。
在其他情况下，带有aria前缀的属性的值由字符串 ， 数字 ， 整数 ， ID引用或true / false值表示。
如何利用ARIA的状态和属性
1.使用关系属性在元素之间建立关系
例如， aria-labelledby属性标识标记当前元素的元素。
使用关系属性指示站点上不同元素之间的关系，而这些关系无法通过文档结构确定。
<div role="main" aria-labelledby="some-id">
<h1 id="some-id">This Is A Heading</h1>
Main content...
</div>2.使状态和属性与元素的生命周期同步
在用户必须与站点进行交互（例如填写表格或运行搜索查询）的情况下，这至关重要。
在HTML页面上的可感知区域设置ARIA地标角色后，如果根据屏幕上发生的事件更改ARIA前缀的状态和子元素的属性，它将对辅助技术有很大帮助。
3.匹配视觉界面和可访问界面
通过使用具有以下语法的aria选择状态可以轻松实现： <option aria-selected="true"></option> 。
例如，如果用户选择表单中的选项，则它也需要显示为辅助技术而已选择。
可访问性设计的一般经验法则是，辅助技术始终需要可感知用户界面的当前状态。
W3C的WAI-ARIA创作实践指南可以为您提供许多其他有关如何正确协调网站的视觉和可访问界面的好主意。
不要过度使用ARIA
在这种情况下，没有必要单独设置ARIA标志性角色。
当您使用HTML5的语义标记（例如<button></button>或<form></form> ，现代的网络浏览器默认会添加适当的ARIA语义。
使用ARIA角色和属性有时可能是多余的。
同时使用HTML的本机属性和适当的ARIA属性也是多余的。
代替<form role="form"></form>语法，仅使用<form></form>就足够了。
例如，不必使用表单界标角色来定义<form>元素。
因此，如果您已经将隐藏的 HTML属性添加到了表单输入中，则无需添加aria-hidden状态，因为浏览器默认包含它。
下一篇： Hibernate源码分析2