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"(補充性內容）

    文檔中作為主體內容補充的支撐部分。它對區(qū)分主體內容是有意義的。

    使用方法：與aside元素是對應關系。應將其添加到aside或div元素（前提是該div僅包含補充性內容）。可以在一個頁面里包含多個complementary角色，但不要過度使用。

    role="contentinfo"(內容信息）

    包含關于文檔信息的大塊、可感知區(qū)域。這類信息的例子包括版權聲明和指向隱私權聲明的鏈接等。

    使用方法：將其添加至整個頁面的頁腳（通常為footer元素）。每個頁面僅使用一次。

    ■實例設計

    下面的代碼演示了文檔結構中如何應用role。

<!--開始頁面容器-->

<div class="container">

    <header role="banner">

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

    </header>

    <!—應用CSS后的第一欄-->

    <main role="main">

        <article></article>

        <article></article>

        [其他區(qū)塊]

    </main>

    <!--結束第一欄-->

    <!--應用CSS后的第二欄-->

    <div class="sidebar">

        <aside role="complementary"x/aside>

        <aside role="complementary"x/aside>

        [其他區(qū)塊]

    </div>

    <!--結束第二欄-->

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

</div>

<!--結束頁面容器-->

    對表單元素來說，form角色是多余的；search用于標記搜索表單；application則屬于高級用法。當然，不要在頁面上過多地使用地標角色。過多的role角色會讓屏幕閱讀器用戶感到累贅，從而降低role的作用，影響整體體驗。