欢迎使用CSDN-markdown编辑器

来源：互联网发布：足球比赛抽签软件编辑：程序博客网时间：2024/05/16 07:42

遵循WAI-ARIA实现无障碍站点

今天在阅读一本关于CSS响应式的一本书中提到了WAI-ARIA的内容，这些东西实际上我们经常能在网页中撞见，只不过大多数时候，并不明白他是做什么的。今天我就将书本里的东西总结总结，以免下次掉坑。

WAI-ARIA是Web Accessibility - Accessiable Rich Internet Applications的缩写，指的是无障碍网页应用技术。听起来挺难理解的，实际上这种技术就是为了帮助残障人士，帮助他们无障碍的访问网页中的内容。例如，屏幕上的一个组件正在显示不断变化的股票价格,如何让访问网页的盲人用户也知道这一点呢？APIA技术就在尝试解决这一类问题。这种技术提供了一种描述自定义组件（网页应用中的动态片段）的角色、状态、属性的方法，这样这些组件就可以被依赖辅助技术的用户找到并加以利用。当然，如果网页中没有这些内容，普通人还是可以浏览网页。

ARIA的地标角色
取一个HTML5导航结构如下：

<nav>  <ul>    <li><a href="#">Why?</a></li>    <li><a href="#">Synopsis</a></li>    <li><a href="#">Stills/Photos</a></li>    <li><a href="#">Videos</a></li>    <li><a href="#">Quotes</a></li>    <li><a href="#">Quiz</a></li>  </ul>

我们让导航区轻松定位，只需要追加一个role属性就可以了。如下：

<nav role="navigation">  <ul>    <li><a href="#">Why?</a></li>    <li><a href="#">Synopsis</a></li>    <li><a href="#">Stills/Photos</a></li>    <li><a href="#">Videos</a></li>    <li><a href="#">Quotes</a></li>    <li><a href="#">Quiz</a></li>  </ul>

简单吧，诸位肯定在阅读网页的过程中遇到过这种技术。针对文档结构的各部分分别有如下的地标角色：

application:用来定义用作网页应用的区域
banner:用来定义一个站点级别（而不是某个特定文档）的区域。如网站的头部和logo
complementary:用来定义一个对页面主要区域进行补充说明的区域
contentinfo:用来定义与页面主要内容相关的信息区域，如页脚的网站版权信息区域
form:不用多说
main:页面主题内容
navigation:用来定义链向当前文档或相关文档的导航链接
search:用来定义一个用于搜索的区域
【无障碍网页应用技术进阶】
无障碍网页应用技术并非只有地标角色。想要做进阶应用，请参阅完整的角色列表及其简要使用说明：Accessible Rich Internet Applications (WAI-ARIA) 1.0

That’s all.

参考文档：《响应式Web设计：HTML5和CSS3实战》

0 0