详解Web网页中使用ARIA实现网站无障碍浏览

最近有网友求救，公司希望制作无障碍的网站。其实一开始我也犯难，无从下手，但通过度娘发现大部分政府性网站都有此功能。因此狠下心来钻研，发现使用ARIA技术可以实现，特地将经验分享给大家！
无障碍网站和ARIA简介
无障碍版网站是指视力残障人士和听力残障人士可以利用互联网方便地、无障碍地获取信息、浏览网页信息，如无法正常获取信息，要使用替代式的方式或者辅助工具来帮助人们完成信息的输入输出。网站需要提供辅助工具及语言功能的无障碍服务，方便残障人士从网络上获取信息。
ARIA是Accessible Rich Internet Application的简称，指无障碍富互联网应用。可以使一些有功能障碍（如听力，视力）的人群，使用你的网站。
如何使用ARIA
想要实现无障碍，我们就要用到ARIA的role角色。让我们在声明元素类型并建议其提供的信息作用时，加上role属性，如下：
<div role="contentinfo" id="xttblog">
    This website was built by Georgie.
</div>
这样就表示，id为xttblog的div支持ARIA。我们在配合ARIA属性，让屏幕阅读器，可选择的进行无障碍阅读。ARIA的属性都带有aria-前缀，ARIA有两种属性类型，分别为状态和属性值。
状态值，是在用户交互时必然要修改的
属性值，是不太可能修改的
下面举一个ARIA状态属性aria-checked的例子，去模拟交互元素的显示元素的状态，比如checkbox和radio按钮，但它们本身并不是原生的元素（如：用div和span标签来构建自定义UI元素）
<span role="checkbox" 
      aria-checked="true"
      tabindex="0"
      id="simulatedcheckbox">
</span>
下面在列举一个属性名为aria-label的例子。这是一个在页面中不显示（如果设计要求显示也可以显示），但用来表示form元素的label标签的。当label文字显示，可以使用aria-labelledby属性是。也可以配合figure元素使用，如下：
<figure aria-labelledby="operahouse_1" role="group">
    <img src="operahousesteps.jpg" alt="The Sydney Opera House">
    <figcaption id="operahouse_1">
            We saw the opera <cite>Barber of Seville</cite> here!
    </figcaption>
</figure>
ARIA的使用规则
原则上我们并不希望你在每个元素上都添加ARIA，有两个原因。
浏览器的语义化标签不建议使用，如：nav,article,button已经隐含ARIA的role="navigation",role="article",role="button"声明。在HTML5之前，没有语义化的元素如<div class="main-navigation" role="navigation">则推荐使用ARIA。
一个元素只能有一个ARIA角色
HTML元素不能有两个角色，所有角色都是以这样或那样的方式进行主义化的，就像定义上面说的，一个元素不可能是两种类型的对象。你能想象一个元素既是按钮又是标题吗？不可能，两者只能选其一。选择一个可以最可以体现元素功能的角色。
不要修改原始的语义
不应该为一个语义化的标签定义不同的角色，通过添加role去重定义语义化的标签。例如：
<footer role="button">
但是，如果必须重定义，那就使用嵌套HTML元素来替代
<footer><button>Purchase this e-book</button></footer>
另外推荐大家多使用alt属性，它可以更好的支持搜索引擎，同时可以大大增加标记的无障碍的阅读性，尤其是对屏幕阅读器。
ARIA角色和属性可以改善页面的可读性，如在屏幕阅读器或其他辅助性技术上。由于辅助技术变得越来越普遍，需要把在代码中集成ARIA，作为一个常规项来完成。

参考资料
W3C状态和属性​
默认隐含ARIA语义的标签​
ARIA使用第二规则
版权声明：本文为博主原创文章，未经博主允许不得转载。

： » 详解Web网页中使用ARIA实现网站无障碍浏览