WAI-ARIA 介紹之三 : O3noBLOG

10月 17日

WAI-ARIA 介紹之三

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

WAI-ARIA 介紹之一
WAI-ARIA 介紹之二
WAI-ARIA 介紹之三 - 本篇文章

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 讓身心障礙人士獲益。

O3noBLOG

單篇彙整