2011年12月2日

我看到地標了,但不是101

2020/6/25更新
許多觀光客到台北旅遊時必定會造訪的熱門景點就是地標建築「台北 101」了,只要沒有視線的阻擋,連站在台北近郊的山上都能看得到,而「台北 101」就在熱鬧繁華的信義商圈內,若能看到「台 北101」的建築,也就表示信義商圈就在那裡,所以「台 北101」可說是信義商圈的地標。

如果瀏覽網頁的時候,在頁面眾多的項目裡也有一些如同「台北 101」般的地標,那麼要找頁面上的特定內容就容易多了,網頁上也有顯而易見的地標可以讓我很容易的找到特定的位置嗎?

傳統的 HTML 所建構的網頁是屬於比較靜態的型式,對於現在講求互動或是雲端運算的應用是無法滿足其需求的,因此就有許多技術如 Javascript、AJAX 等的出現,使得網路的使用多元且豐富,不過這也造成了身心障礙者瀏覽網頁時不小的障礙。製定 HTML 標準的國際性組織 W3C (World Wide Web Consortium) 陸續提出解決方法,ARIA 也就應運而生了。

ARIA 全名是 Accessible Rich Internet Applications,它是一套可使網頁應用程式達到無障礙的規範,對於應用上述技術所構成的動態網頁或是網頁應用程式能夠有效的解決身心障礙者所遭遇到的無障礙問題,其中地標 (Landmark) 就可以解決前面所提到的定位需求。

有了地標,螢幕報讀軟體的使用者可以了解頁面上不同區塊的用途,好快速的定位到想要去的位置。利用 NVDA 瀏覽網頁,當頁面上有地標便可按快速鍵 D 或是 Shift+D 迅速往前或往回移到相關的區塊位置,這些地標有其特定的名稱及所代表的意義,說明如下:

橫幅區 (banner)
跨網頁,屬於網站整體的內容,像是每個頁面上方總是會出現的相同標題、廣告或是 Logo 等。

搜尋區 (search)
頁面上僅提供搜尋功能的表單區域。

表單區 (form)
頁面上提供表單項目的區域。

導覽區 (navigation)
頁面上的主選單、次選單等連結的區域皆是。

主要內容區 (main)
頁面的主要內容呈現於此。

補充區 (complementary)
和主要內容區相關的東西,不過可以獨立於主要內容之外,例如在入口網站提供的天氣資訊。

資訊區 (contentinfo)
頁面的相關資訊,例如註腳、版權宣告、隱私權聲明等,通常都位於頁面的下方。。

網頁上的地標是隱形的,也就是說螢幕畫面並不會看到有什麼特別的東西在上面,所以不會破壞頁面整體的美觀,這對於網頁開發人員來說應該是一件好事。

新一代的 HTML 5 增加了一些可表示網頁區塊目的的結構元素,這些元素與原本 ARIA 地標的表達重疊,NVDA 也會根據相關的結構元素而有相應的地標提示,整理如下。

橫幅區 <header>
表單區 < form>
導覽區 <nav>
主要內容區 <main>
補充區 <aside>
資訊區 <footer>

雖然不是每一個網站都會使用 ARIA 地標或者是結構元素,不過隨著知名網站的導入與 HTML 5 接受度提升而有逐漸增加的趨勢,例如 Google 在搜尋結果的頁面可以按 D 兩三次就能跳到主要內容區的位置,該區塊即是搜尋結果呈現的地方,再按 H 就可以逐一檢視每筆搜尋結果了,是不是很方便呢!