WAI-ARIA 介紹之三

這篇文章是翻譯 Dev.Operv 的Introduction to WAI ARIA這篇文章,分成三篇刊載。由於原文為CC-BY-NC-SA-2.5授權,故此篇文章也採用同樣授權方式。系列文章:

ARIA 可以做什麼用?

使用 ARIA 並不會有不好的副作用,所以你可以馬上開始使用他,而且主流的四個瀏覽器都已經支援或已經有計劃支援了,Opera 9.5 和 Firefox 1.5 已經有支援 ARIA , IE8b 也有支援, Safari 所使用的 WebKit 框架也發表說他們將會開始支援 ARIA , 輔助科技也廣泛的支援 ARIA ,JAWS 7.1、Window-Eyes 5.5+、NVDA、Zoomtext 9+ 和其他輔助科技都有基本的支援,而且還會越來越好。

現在就參與使用

由於使用 ARIA 並沒有任何不好的副作用,而且相關的支援都已經到位,現在就參與使用百利而無一害,即使你的網站非常簡單,你也可以使用文件地標讓使用者有更好的導覽系統可以使用。

使用文件地標

在我的個人網站,我就使用了 main、navigation、search、secondary 這幾個文件地標,以下面的文件結構為例:

<div id="ads">
...
</div>
<div id="nav">
    <form id="searchform" ...>
    ...
    </form>
...
</div>
<div id="content">
...
</div>

我們可以把 role 屬性寫進標記內以加上地標資訊。

<div id="ads" role="banner">
...
</div>
<div id="nav" role="navigation">
    <form id="searchform" role="search" ...>
    ...
    </form>
...
</div>
<div id="content" role="main">
...
</div>

大部分的網頁都會有設計好的結構,好方便使用 CSS 做版面配置,而此範例頁就使用到 id,id 還可以簡單的傳給 JavaScript 函數,下面的範例是一個簡單的 JavaScript 函數,它接收的參數是元素的 id 和 role 角色值,會將指定 id 元素的 role 設為指定的值。

function addARIARole(strID, strRole)
{
    // Find the element to add a role property to
    var objElement = document.getElementById(strID);

    if (objElement)
    {
        // Add the role property to the element
        objElement.setAttribute('role', strRole);
    }
}

接著就可以使用這個函數,傳入文件內元素的 id 和對應的文件地標,而已前面的文件結構來說,我們可以用下面的 JavaScript 來加上地標資訊,而不必直接寫入標籤。

function setupARIA()
{
    // Add ARIA roles to the document
    addARIARole('content', 'main');
    addARIARole('nav', 'navigation');
    addARIARole('searchform', 'search');
    addARIARole('ads', 'banner');
}
window.onload = setupARIA;
標出必填欄位

如果你的表單內有必填欄位,你可以使用 aria-required 屬性,此屬性告訴使用者此欄位在送出前必須要有填值,下面的範例就是有使用 aria-required 的 input 元素。

<label for="contactname">Name</label>
<input type="text"
       id="contactname" 
       name="contactname"
       size="30"
       aria-required="true">

Wordpress 已經有在迴響表單的必填欄位內加上 aria-required 屬性了。

加上其他相關屬性

還有許多 ARIA 屬性可以使用在簡單的網站上,像是 aria-labeledby 和 aria-describerdby,aria-labeledby 是用來定位該元素的標題是哪個或哪些元素裡,aria-describedby 則是用來定位敘述該元素的資訊放在哪。

<h2 id="limg">Paragliding</h2>
<p id="dimg">
A long description of our paragliding trip ...
</p>
<div>
<img src="takeoff.png"
     alt="Getting ready to take off"
     aria-labelledby="limg"
     aria-describedby="dimg">
</div>
更高的優先權

ARIA 的屬性比 HTML 原本的屬性優先權還要高,意思是說 aria-labeledby 和 label 元素的 for一起出現時, aria-labeledby 優先度會較高,不過 label 元素還是可以讓不支援 ARIA 的舊瀏覽器能正確的找出元素間的關係,有個簡單的技巧可以避免衝突,就是用 aria-labeledby 連回 label 元素,不管 ARIA 支援如何,都可以確保 input 元素的標題存在。

<label id="lblef" for="effectiveness">Effectiveness</label>
<input type="image"
       role="slider"
       id="effectiveness"
       aria-labelledby="lblef"
       ...>

看看完整的 ARIA [屬性清單][8] 可以幫助你讓你把網頁內容弄的更具有親和力。

總結

HTML 最初不是設計來製作網路應用程式的,但是設計師們還是藉著製作自定的介面元件,並使用 JavaScript 給予它們可以操作互動的能力而拼湊出網路應用程式,而問題是這些元件的角色、狀態和屬性以及網頁內容的更新情形並不會讓輔助科技正確的知道,因此 ARIA 規範藉由讓設計師可以詳細的描述這些介面元件、定義文件結構和即時更新的區域來解決這個問題。

不論你是要開發最新潮複雜的網路應用程式還是你有的只是簡單的 HTML 文件,你都可以使用 ARIA 讓身心障礙人士獲益。

進階閱讀

comments powered by Disqus