Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

語義和內容導航

您已瞭解功能可見性、語義的相關內容,以及輔助技術如何利用無障礙樹爲其用戶打造替代性用戶體驗。如您所見,編寫具有表現力的語義 HTML 讓不費什麼力氣便可獲得大量無障礙功能,因爲許多標準元素同時內置了語義和支持行爲。

在本節課中,我們將闡述一些不太明顯的語義,它們對屏幕閱讀器用戶非常重要,特別是在導航方面。 在一個包含大量控件但沒有多少內容的簡單頁面中,可輕易通過掃描頁面找到所需內容。但在一個內容豐富的頁面(例如維基百科條目或新聞聚合器)中,從上到下通讀所有內容並不現實;您需要找到一種高效的內容瀏覽方式。

開發者往往錯誤地認爲屏幕閱讀器使用起來繁瑣而又效率低下,或者屏幕上的所有內容都必須是可聚焦內容,才能讓屏幕閱讀器找到。實際情況往往並非如此。

屏幕閱讀器用戶通常依賴標題列表來定位信息。大多數屏幕閱讀器都可以輕鬆地隔離和掃描頁面標題列表,這項重要功能稱作“轉子”。讓我們看看如何纔能有效利用 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>

對於複雜應用,如果視覺設計不需要或沒有空間容納可見標題,可能適合採用此方法來容納標題。

其他導航方案

儘管包含有效標題的頁面有助於屏幕閱讀器用戶進行導航,但他們也可利用其他元素在頁面上導航,其中包括鏈接表單控件地標

讀者可以利用屏幕閱讀器的轉子功能(一種輕鬆隔離和掃描頁面標題列表的方法)獲取頁面上的鏈接列表。有時存在許多鏈接(Wiki 上就是如此),因此閱讀器可能會在這些鏈接內查找某個詞語。這會將命中結果限定在實際包含該詞語的鏈接而非該詞語在頁面上的每一次出現。

僅當屏幕閱讀器能找到鏈接並且鏈接文本有意義時,此功能纔有用。 例如,以下這些常見模式會使鏈接變得難以找到。

  • 不帶 href 屬性的錨點標記。這些常用於單頁面應用的鏈接目標會給屏幕閱讀器造成困難。 您可以在這篇有關單頁面應用的文章中閱讀到更多內容。
  • 實現時包含鏈接的按鈕。這些按鈕會使屏幕閱讀器將內容解讀爲鏈接,從而使按鈕功能喪失。 在這些情況下,請將錨點標記替換爲實際按鈕,並對按鈕進行相應的樣式設置。
  • 用作鏈接內容的圖像。有時屏幕閱讀器無法使用某些必要的鏈接圖像。 爲保證向輔助技術正確公開鏈接,確保圖像具有 alt 屬性文本。

還有一個問題是不良鏈接文本。“瞭解詳情”或“點擊此處”等可點擊文本對鏈接的指向未提供任何相關語義信息。 請改用“瞭解有關自適應設計的詳情”或“請參閱此 canvas 教程”,以幫助屏幕閱讀器提供有關鏈接的有意義上下文。

轉子還可檢索表單控件列表。閱讀器可以利用該列表查找並直接跳轉到特定項目。

屏幕閱讀器的一種常犯錯誤是發音錯誤。例如,屏幕閱讀器對“Udacity”的發音可能是“oo-dacity”,以大整數形式讀出電話號碼,或者以首字母縮寫詞形式讀出大寫文本。有趣的是,屏幕閱讀器用戶對這種古怪行爲已習以爲常,在使用時就考慮到了這種情況。

一些開發者嘗試通過提供以語音拼寫的屏幕閱讀器專用文本來改善這一狀況。 以下是有關語音拼寫的一條簡單規則:不要這樣做,這隻會讓問題更加嚴重! 例如,如果用戶使用盲文顯示器,將會出現詞語拼寫不正確的情況,造成更多困惑。屏幕閱讀器允許朗讀式拼寫詞語,因此應交由閱讀器來控制其體驗以及決定何時有必要這樣做。

閱讀器可以利用轉子來查看地標列表。該列表有助於閱讀器找到主要內容以及一組由 HTML 地標元素提供的導航地標。

HTML5 引入的一些新元素有助於定義頁面的語義結構,其中包括 headerfooternavarticlesectionmain 以及 aside。這些元素在頁面中明確提供結構線索,不會強制進行任何內置樣式設置(反正您都應使用 CSS 來完成)。

語義結構元素可以取代多個重複性的 div 塊,並提供了一種更加清晰、更具描述性的方式,能夠同時爲製作者和閱讀器直觀表達頁面結構。