語意在網頁導覽中的作用
您已瞭解可用性、語意,以及輔助技術如何使用無障礙樹狀結構,為使用者打造其他使用者體驗。您可以看到編寫表達式的語意 HTML ,只要不費吹灰之力,就能為您帶來許多助益,因為許多標準元素皆內建語意和支援行為。
在本課程中,我們會介紹一些較不明顯的語意,這對螢幕閱讀器使用者而言極為重要,特別是在導覽方面。在簡單的網頁中,如果有許多控制項但內容不多,您就能輕鬆掃描網頁,找到所需的內容。不過,在具有大量內容的頁面上 (例如 Wikipedia 項目或新聞匯總工具),如要從上往下閱讀所有內容並不可行,因此需要以有效的方式瀏覽內容。
開發人員常有這種誤解:螢幕閱讀器操作過程繁瑣且使用速度緩慢,或是畫面內容必須可供螢幕閱讀器聚焦才能找到。但實際上並非如此。
螢幕閱讀器的使用者通常會透過標題清單尋找資訊。大多數螢幕閱讀器都提供簡單的方式,可隔離及掃描頁面標題清單,這項重要功能稱為旋轉器。我們來看看如何有效使用 HTML 標題 來支援這項功能
有效使用標題
首先,讓我們重申先前的觀點:DOM 順序很重要,不僅是焦點順序,也包括螢幕閱讀器順序。在測試 VoiceOver、NVDA、JAWS 和 ChromeVox 等螢幕閱讀器時,您會發現標題清單會依 DOM 順序排列,而非視覺順序。
這項規定適用於一般螢幕閱讀器。由於螢幕閱讀器會與無障礙樹狀結構互動,而無障礙樹狀結構又以 DOM 樹狀結構為基礎,因此螢幕閱讀器所感知的順序會直接以 DOM 順序為依據。這表示適當的標題結構比以往更為重要。
在大多數結構良好的網頁中,標題層級會以巢狀方式排列,以表示內容區塊中的父項和子項關係。WebAIM 檢查清單中多次提到這項技巧。
並非所有標題都必須顯示在畫面上。舉例來說,維基百科使用一種技術,刻意將部分標題放在螢幕外,專門讓螢幕閱讀器和其他輔助技術只能存取。
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h2 class="sr-only">This heading is offscreen.</h2>
對於複雜的應用程式,如果視覺設計不需要或沒有空間顯示標題,這可能是適合標題的做法。
其他導覽選項
雖然標題完善的網頁有助於螢幕閱讀器使用者瀏覽,但他們也可以使用其他元素在網頁中移動,包括連結、表單控制項和地標。
讀者可以使用螢幕閱讀器的 Rotor 功能 (可輕鬆隔離及掃描頁面標題清單),存取頁面上的連結清單。有時就像維基一樣,連結有許多連結,因此讀者可能會在連結中搜尋該字詞。這樣就能將命中次數限制在實際包含該字詞的連結,而非網頁中出現該字詞的每個連結。
這項功能只有在螢幕閱讀器可找到連結,且連結文字有意義時,才能使用這項功能。舉例來說,以下列舉幾個會導致連結難以找到的常見模式。
- 沒有
href
屬性的錨點標記。這類連結目標通常用於單頁應用程式,會導致螢幕閱讀器發生問題。詳情請參閱這篇關於單頁應用程式的文章。 - 使用連結實作的按鈕。這會導致螢幕閱讀器將內容解讀為連結,而失去按鈕功能。在這些情況下,請將錨點標記替換為實際按鈕,並適當設定樣式。
- 用於連結內容的圖片。有時,連結圖片可能無法供螢幕閱讀器使用。為確保輔助技術能正確暴露連結,請確保圖片具有
alt
屬性文字。
連結文字不佳也是另一個問題。「瞭解詳情」或「按這裡」等可點選的文字,不會提供關於連結位置的語意資訊。請改用描述性文字,例如「瞭解更多關於回應式設計」或「查看此畫布教學課程」,協助螢幕閱讀器提供有意義的連結內容。
旋鈕也可以擷取表單控制項清單。讀者可以使用這個清單搜尋特定項目,並直接前往該項目。
螢幕閱讀器常見的錯誤是發音,舉例來說,螢幕閱讀器可能會將「Udacity」讀音為「oo-dacity」,或是將電話號碼以大整數表示,或者將大寫的文字顯示為縮寫。有趣的是,螢幕閱讀器使用者已經習慣這種怪異的情況,並會將其納入考量。
部分開發人員會提供僅供螢幕閱讀器使用的音標文字,以改善這種情況。以下是拼音拼字的簡單規則:不要使用,這只會讓問題更嚴重!舉例來說,如果使用者使用點字顯示器,系統會將字詞拼寫錯誤,導致更多混淆。螢幕閱讀器可將字詞拼出,因此請讓使用者自行控制體驗,並決定何時需要這項功能。
讀者可以使用旋轉器查看地標清單。這份清單可協助讀者找到主要內容,以及 HTML 地標元素提供的一組導覽地標。
HTML5 引入了一些新元素,可協助定義網頁的語意結構,包括 header
、footer
、nav
、article
、section
、main
和 aside
。這些元素會在網頁中提供結構性線索,但不會強制使用任何內建樣式 (您還是應該使用 CSS)。
語意結構元素可取代多個重複的 div
區塊,為作者和讀者提供更清晰、更具描述性的方式,直觀地表達網頁結構。