HTML5 使用 role

    ■知识点

    role是HTML5新增属性，其作用是告诉Accessibility类应用（如屏幕阅读器等）当前元素所扮演的角色，主要是供残疾人使用。使用role可以增强文本的可读性和语义化。

    在HTML5元素内，标签本身就是有语义的，因此role作为可选属性使用，但是在很多流行的框架 (如Bootstrap)中都很重视类似的属性和声明，目的是为了兼容老版本的浏览器（用户代理)。

    role属性主要应用于文档结构和表单中。例如，设置输入密码框，对于正常人可以用placaholder提示输入密码，但是对于残障人士是无效的，这个时候就需要role了。另外，在老版本的浏览器中，由于不支持HTML5标签，所以有必要使用role属性。

    例如，下面代码告诉屏幕阅读器，此处有一个复选框，且己经被选中。

    <div role="checkbox" aria-checked= "checked"><input type="checkbox" checked></div>

    下面是常用的role角色值。 

    role="banner"(横幅）

    面向全站的内容，通常包含网站标志、网站赞助者标志、全站搜索工具等。横幅通常显示在页面的顶端，而且通常横跨整个页面的宽度。

    使用方法：将其添加到页面级的header元素，每个页面只用一次。 

    role="navigation"(导航）

    文档内不同部分或相关文档的导航性元素（通常为链接）的集合。

    使用方法：与nav元素是对应关系。应将其添加到每个nav元素，或其他包含导航性链接的容器。这个角色可在每个页面上使用多次，但是同nav—样，不要过度使用该属性。 

    role="main"(主体）

    文档的主要内容。

    使用方法：与main元素是对应关系。最好将其添加到<main>#签中，也可以添加到其他表示主体内容的元素（可能是div)中。在每个页面仅使用一次。 

    role="complementary"(补充性内容）

    文档中作为主体内容补充的支撑部分。它对区分主体内容是有意义的。

    使用方法：与aside元素是对应关系。应将其添加到aside或div元素（前提是该div仅包含补充性内容）。可以在一个页面里包含多个complementary角色，但不要过度使用。

    role="contentinfo"(内容信息）

    包含关于文档信息的大块、可感知区域。这类信息的例子包括版权声明和指向隐私权声明的链接等。

    使用方法：将其添加至整个页面的页脚（通常为footer元素）。每个页面仅使用一次。

    ■实例设计

    下面的代码演示了文档结构中如何应用role。

<!--开始页面容器-->

<div class="container">

    <header role="banner">

        <nav role="navigation"> [包含多个链接的列表]</nav>

    </header>

    <!—应用CSS后的第一栏-->

    <main role="main">

        <article></article>

        <article></article>

        [其他区块]

    </main>

    <!--结束第一栏-->

    <!--应用CSS后的第二栏-->

    <div class="sidebar">

        <aside role="complementary"x/aside>

        <aside role="complementary"x/aside>

        [其他区块]

    </div>

    <!--结束第二栏-->

    <footer role=" con tent inf o"x/footer>

</div>

<!--结束页面容器-->

    对表单元素来说，form角色是多余的；search用于标记搜索表单；application则属于高级用法。当然，不要在页面上过多地使用地标角色。过多的role角色会让屏幕阅读器用户感到累赘，从而降低role的作用，影响整体体验。