語意在網頁導覽中的角色
您已瞭解預設用途、語意，以及輔助技術如何使用 無障礙樹狀結構，為使用者打造替代的使用者體驗。 如您所見，編寫語意式 HTML 有許多 更容易操作 許多標準元素 內建語意和支援行為。
本課程將介紹一些較不明顯的語意 以便在瀏覽時更迅速簡單來說， 提供許多控制項，但內容不多， 使用者只要瀏覽網頁就能輕鬆找到內容 需求。但放在含有大量內容的網頁上，例如維基百科條目或新聞 從上到下逐一閱讀所有內容並不可行；你 才能有效瀏覽內容
開發人員常有誤以為螢幕閱讀器的操作速度很慢 或是畫面上的所有內容都必須是畫面的焦點項目 讀者才能輕鬆找到所需內容但事實並非如此。
螢幕閱讀器的使用者通常會透過標題清單尋找資訊。大多數 螢幕閱讀器能讓您輕鬆隔離及瀏覽一連串網頁標題， 稱為轉盤的重要功能。現在來看看如何使用 HTML 標題 以便支援這項功能
有效使用標題
首先，我們來重申一下先前的點：DOM 順序 問題，不僅限於 也就是用於配合螢幕閱讀器順序在嘗試使用螢幕閱讀器時 例如 VoiceOver、NVDA、JAWS 和 ChromeVox 等等，您可以找到標題清單 DOM 順序而非視覺順序
這點適用於一般螢幕閱讀器。因為螢幕閱讀器會與 無障礙樹狀結構，以及無障礙功能樹狀結構，是以 DOM 樹狀結構為基礎 讀取螢幕閱讀器的感受，因此直接取決於 DOM 順序。這個 因此，適當的標題結構比以往更重要。
在最結構良好的頁面上，標題層級會以巢狀方式來表示 內容區塊中的父項/子項關係。WebAIM 的 檢查清單重複提及 這是標準文字處理技術
畫面上不一定要顯示所有標題。 例如 Wikipedia 是採用 刻意將一些標題放置在畫面外，明確讓標題 「只能」透過螢幕閱讀器和其他輔助技術存取。
<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>
對於複雜的應用程式而言，這樣就能在標題中 視覺設計不需要或預留可見標題的空間。
其他導覽選項
雖然標題良好的頁面有助於螢幕閱讀器使用者瀏覽， 使用者可在網頁四周移動時可使用的其他元素，包括連結、表單 控制項和地標。
讀者可以透過螢幕閱讀器的轉軸功能，輕鬆 並掃描網頁標題清單)，以存取網頁上的連結清單。 有時就如同維基而言，連結的數量很多，因此讀者可能會搜尋 未列在連結中的字詞。這會將命中限制在實際包含 ，而非每次網頁上出現該字詞時個別出現的字詞。
這項功能只有在螢幕閱讀器可找到連結和連結時才能派上用場 會標示出有意義的文字以下列舉幾個常見的連結模式 不易找到
- 不含
href屬性的錨定標記。通常用於單頁中 這些連結目標會造成螢幕閱讀器發生問題。你可以 詳情請參閱這篇文章，瞭解單頁應用程式的相關資訊。 - 透過連結實作的按鈕。這樣螢幕閱讀器才能 將內容解讀為連結，但按鈕功能已無法使用適用對象 這時，請將錨定標記替換成真正的按鈕，並設定樣式 才是正確的做法
- 用作連結內容的圖片。在某些情況下
無法在螢幕閱讀器上正常運作為了確保
輔助技術，請確認圖片含有
alt屬性文字。
連結文字品質不佳是另一個問題。可點按的文字，例如「瞭解詳情」或按一下 這裡」沒有關於連結位置的語意資訊。而是改用 描述性文字，例如「進一步瞭解回應式設計」或「查看這個無框畫」 教學課程」，協助螢幕閱讀器提供有意義的連結背景資訊。
轉輪也可以擷取表單控制清單。讀者可以運用這份清單 搜尋特定項目並直接前往相關頁面
螢幕閱讀器的常見錯誤是發音。例如螢幕 讀卡機可能會唸出「Udacity」也可以把電話號碼當成「oo-dacity」 大型整數，或將大寫文字視為縮寫。 有趣的是，螢幕閱讀器使用者經常能理解這種困境， 會考量哪些因素
有些開發人員想設法改善這種情況，只提供螢幕閱讀器 拼音的文字。以下是拼音的簡單規則： 切勿嘗試；這只會讓問題更糟！舉例來說，如果使用者使用 則系統會改寫錯別字， 混淆不清螢幕閱讀器可以朗讀字詞，因此請留 並控管自己的閱讀體驗，決定何時需要
讀者可以使用轉輪查看地標清單。這份清單可幫助讀者 尋找主要內容和 HTML 提供的一組導覽界標 地標元素
HTML5 導入了一些新元素，有助於定義
網頁，包括 header、footer、nav、article、section、main 和
aside。這些元素會明確提供網頁中的結構線索
而不會強制使用任何內建樣式 (請一律使用 CSS)。
語意元素會取代多個重複的 div 區塊，
提供更清晰易懂的網頁架構
供作者和讀者閱讀