HTML5 使用 role

    ■知識點(diǎn)

    role是HTML5新增屬性，其作用是告訴Accessibility類應(yīng)用（如屏幕閱讀器等）當(dāng)前元素所扮演的角色，主要是供殘疾人使用。使用role可以增強(qiáng)文本的可讀性和語義化。

    在HTML5元素內(nèi)，標(biāo)簽本身就是有語義的，因此role作為可選屬性使用，但是在很多流行的框架 (如Bootstrap)中都很重視類似的屬性和聲明，目的是為了兼容老版本的瀏覽器（用戶代理)。

    role屬性主要應(yīng)用于文檔結(jié)構(gòu)和表單中。例如，設(shè)置輸入密碼框，對于正常人可以用placaholder提示輸入密碼，但是對于殘障人士是無效的，這個時候就需要role了。另外，在老版本的瀏覽器中，由于不支持HTML5標(biāo)簽，所以有必要使用role屬性。

    例如，下面代碼告訴屏幕閱讀器，此處有一個復(fù)選框，且己經(jīng)被選中。

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

    下面是常用的role角色值。 

    role="banner"(橫幅）

    面向全站的內(nèi)容，通常包含網(wǎng)站標(biāo)志、網(wǎng)站贊助者標(biāo)志、全站搜索工具等。橫幅通常顯示在頁面的頂端，而且通常橫跨整個頁面的寬度。

    使用方法：將其添加到頁面級的header元素，每個頁面只用一次。 

    role="navigation"(導(dǎo)航）

    文檔內(nèi)不同部分或相關(guān)文檔的導(dǎo)航性元素（通常為鏈接）的集合。

    使用方法：與nav元素是對應(yīng)關(guān)系。應(yīng)將其添加到每個nav元素，或其他包含導(dǎo)航性鏈接的容器。這個角色可在每個頁面上使用多次，但是同nav—樣，不要過度使用該屬性。 

    role="main"(主體）

    文檔的主要內(nèi)容。

    使用方法：與main元素是對應(yīng)關(guān)系。最好將其添加到<main>#簽中，也可以添加到其他表示主體內(nèi)容的元素（可能是div)中。在每個頁面僅使用一次。 

    role="complementary"(補(bǔ)充性內(nèi)容）

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

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

    role="contentinfo"(內(nèi)容信息）

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

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

    ■實(shí)例設(shè)計

    下面的代碼演示了文檔結(jié)構(gòu)中如何應(yīng)用role。

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

<div class="container">

    <header role="banner">

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

    </header>

    <!—應(yīng)用CSS后的第一欄-->

    <main role="main">

        <article></article>

        <article></article>

        [其他區(qū)塊]

    </main>

    <!--結(jié)束第一欄-->

    <!--應(yīng)用CSS后的第二欄-->

    <div class="sidebar">

        <aside role="complementary"x/aside>

        <aside role="complementary"x/aside>

        [其他區(qū)塊]

    </div>

    <!--結(jié)束第二欄-->

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

</div>

<!--結(jié)束頁面容器-->

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