标签：产品 部件 结构 foo role 音频 应用 导航 功能
一、创建页眉 <header role="banner">
页眉包括网站标志、主导航和其他全站链接，甚至搜索框。也适合对页面深处的一组介绍性或导航性内容进行标记。
注意：role=“banner”（横幅）地标角色改善可访问性
二、标记导航 <nav role="navigation"> <ul>无序链接列表</ul> 或 <ol>有序链接列表</ol> </nav>
nav 标记文档中重要的链接群。
三、标记页面的主要区域 <main role="main">
main元素包围着代表页面主题的内容，一个页面仅使用一次。
四、创建文章 <article>段落、列表、音频、视频、图像、图形</article>
article元素表示文档、页面、应用或网站的一个独立的容器。可以是一篇帖子、文章、评论或交互式的小部件或小工具。
五、定义区块 <section>段落、列表、音频、视频、图像、图形</section>
section元素代表文档或应用的一个一般的区块。section是具有相似主题的一组内容，通常包含一个标题。
注意：section可嵌套在article里，反之不行。
六、指定附注栏 <aside role="complementary">
使用aside的例子包括重要引述、侧栏、指向相关文章的一组链接、广告、nav元素组（友情链接）、相关产品列表等。
注意：对于与内容有关的图像（图表、图形或带有说明文字的插图）使用figure而非aside。
七、创建页脚 <footer>
footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。页脚通常包含关于它所在区块的信息，如相关文档的链接、版权信息、作者或其他类似条目。
注意：只能对页面级的footer使用role="contentinfo",且一个页面只能使用一次。
八、创建通用容器 <div>
div是没有任何语义的通用容器。有了div就可以为其添加样式或javascript效果。
注意：div是块级内容的无语义容器。span是短语内容的无语义容器，可放在段落p元素内。
九、使用ARIA改善可访问性
WAI-ARIA:无障碍网页倡议-无障碍的富互联网应用。ARIA的地标角色可以帮助用户识别页面区域，从而让屏幕阅读器用户可以直接跳到这些区域。通常，对这些区域指定role属性就可以了。
十、为元素添加title属性
可以使用title属性为网站任何部分加上提示标签，在屏幕阅读器可以为用户朗读title文本，提升无障碍访问功能。
标签：产品 部件 结构 foo role 音频 应用 导航 功能
原文地址：http://www.cnblogs.com/zhuqs/p/7493988.html
