語意在網頁導覽中的作用
您已瞭解可用性、語意，以及輔助技術如何使用無障礙樹狀結構，為使用者打造其他使用者體驗。您可以看到，只要撰寫表達力強的語意式 HTML，就能輕鬆實現許多無障礙功能，因為許多標準元素都內建語意和支援行為。
在本課程中，我們將介紹一些不太明顯的語義，這些語義對螢幕閱讀器使用者非常重要，尤其是在導覽方面。在簡單的網頁中，如果有許多控制項但內容不多，您就能輕鬆掃描網頁，找到所需的內容。不過，在內容豐富的網頁 (例如 Wikipedia 條目或新聞匯總) 上，從頭到尾閱讀所有內容並不實際，你需要有效率地瀏覽內容的方法。
開發人員經常誤以為螢幕閱讀器使用起來很麻煩且速度很慢，或是螢幕上的所有內容都必須可供螢幕閱讀器聚焦才能找到。但實際上並非如此。
螢幕閱讀器使用者通常會依靠標題清單來找出資訊。大多數螢幕閱讀器都提供簡單的方法，可隔離及掃描頁面標題清單，這項重要功能稱為旋轉器。讓我們來看看如何有效使用 HTML 標題來支援這項功能。
有效使用標題
首先，讓我們重申先前的觀點：DOM 順序很重要，不僅是焦點順序，也包括螢幕閱讀器順序。在測試 VoiceOver、NVDA、JAWS 和 ChromeVox 等螢幕閱讀器時，您會發現標題清單會依 DOM 順序排列，而非視覺順序。
這項規定適用於一般螢幕閱讀器。由於螢幕閱讀器會與無障礙樹狀結構互動，而無障礙樹狀結構又以 DOM 樹狀結構為基礎，因此螢幕閱讀器所感知的順序會直接以 DOM 順序為準。這表示適當的標題結構比以往更為重要。
在大多數結構良好的網頁中，標題層級會以巢狀方式排列，以表示內容區塊中的父項和子項關係。WebAIM 檢查清單中多次提到這項技巧。
- 1.3.1 提到「使用語意標記來指定標題」
- 2.4.1 提到標題結構是用來略過內容區塊的一種技巧
- 2.4.6 會討論撰寫實用標題的相關細節
- 2.4.10 指出「在適當情況下，請使用標題指定內容的個別部分」
並非所有標題都必須顯示在畫面上。舉例來說，維基百科使用一種技術，刻意將部分標題放在螢幕外，專門讓螢幕閱讀器和其他輔助技術專屬存取。
<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 功能 (這是一種簡單的方法，可用來隔離及掃描頁面標題清單)，存取網頁上的連結清單。有時候，如同 Wiki 上有許多連結，讀者可能會在連結中搜尋字詞。這樣一來，命中次數就會限制在實際包含該字詞的連結，而非網頁上每個出現該字詞的情況。
只有在螢幕閱讀器可以找到連結，且連結文字有意義時，這項功能才有用。舉例來說，以下是一些常見的模式，會讓使用者難以找到連結。
- 沒有
href屬性的錨點標記。這些連結目標經常用於單頁應用程式，但會對螢幕閱讀器造成問題。詳情請參閱這篇關於單頁應用程式的文章。 - 使用連結實作的按鈕。這會導致螢幕閱讀器將內容解讀為連結，而按鈕功能就會消失。在這些情況下，請將錨點標記替換為實際按鈕，並適當設定樣式。
- 用於連結內容的圖片。有時，連結圖片可能無法供螢幕閱讀器使用。為確保連結能正確顯示在輔助技術中，請確認圖片有
alt屬性文字。
連結文字不佳也是另一個問題。可點選的文字 (例如「瞭解詳情」或「按一下這裡」) 不會提供連結的語意資訊。請改用描述性文字，例如「瞭解更多關於回應式設計」或「查看此畫布教學課程」，協助螢幕閱讀器提供有意義的連結背景資訊。
旋鈕也可以擷取表單控制項清單。讀者可以使用這個清單搜尋特定項目，並直接前往該項目。
螢幕閱讀器常見的錯誤是發音，舉例來說，螢幕閱讀器可能會將「Udacity」讀成「oo-dacity」，將電話號碼讀成大整數，或將大寫文字讀成縮寫字詞。有趣的是，螢幕閱讀器使用者相當習慣這種怪異的情況，並會將其納入考量。
部分開發人員會提供僅供螢幕閱讀器使用的音標文字，以改善這種情況。以下是拼音拼字的簡單規則：不要使用，這只會讓問題更嚴重！舉例來說，如果使用者使用點字顯示器，系統會將字詞拼寫錯誤，導致更多混淆。螢幕閱讀器可將字詞拼音出來，因此請讓使用者自行控制使用體驗，並決定何時需要這項功能。
讀者可以使用旋轉條查看地標清單。這份清單可協助讀者找到主要內容，以及 HTML 地標元素提供的一組導覽地標。
HTML5 引入了一些新元素，可協助定義網頁的語意結構，包括 header、footer、nav、article、section、main 和 aside。這些元素會在網頁中提供結構性線索，但不會強制使用任何內建樣式 (您還是應該使用 CSS)。
語意結構元素可取代多個重複的 div 區塊，為作者和讀者提供更清晰、更具描述性的方式，直觀地表達網頁結構。