語意和瀏覽內容

語意在網頁導覽中的角色

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

您已瞭解預設用途和語意,以及輔助技術如何使用無障礙樹狀結構為使用者建立替代的使用者體驗。您可以看到編寫表達式的語意 HTML ,只要不費吹灰之力,就能為您帶來許多助益,因為許多標準元素皆內建語意和支援行為。

在本課程中,我們會介紹一些較不明顯的語意,這對螢幕閱讀器使用者而言極為重要,特別是在導覽方面。如果簡易頁面含有許多控制項,但內容不多,那麼您可以輕鬆掃描網頁,輕鬆找到所需資訊。不過,在具有大量內容的頁面上 (例如 Wikipedia 項目或新聞匯總工具),如要從上往下閱讀所有內容並不可行,因此需要以有效的方式瀏覽內容。

開發人員常有這種誤解:螢幕閱讀器操作起來既麻煩又緩慢,或是畫面必須聚焦,才能讓螢幕閱讀器輕鬆找到。但事實並非如此。

螢幕閱讀器的使用者通常會透過標題清單尋找資訊。大多數螢幕閱讀器都提供分隔及掃描頁面標題清單的簡單方法,這項重要功能稱為「旋轉」。我們來看看如何有效使用 HTML 標題 來支援這項功能

有效使用標題

首先,我們來重申一下先前的重點:「DOM 順序影響」不僅是聚焦順序,也說明螢幕閱讀器的順序。嘗試使用 VoiceOver、NVDA、JAWS 和 ChromeVox 等螢幕閱讀器時,您會看到標題清單遵循 DOM 的順序,而非視覺順序。

這點適用於一般螢幕閱讀器。由於螢幕閱讀器會與無障礙樹狀結構互動,且無障礙樹狀結構是以 DOM 樹狀結構為基礎,因此螢幕閱讀器感知的順序會直接依據 DOM 順序排列。這表示比起以往,適當的標題結構更加重要。

在大部分結構良好的頁面中,標題層級為巢狀結構,表示內容區塊之間的上下層關係。「WebAIM 檢查清單」重複提及這項技巧。

  • 1.3.1 提及「使用語意標記指定標題」
  • 2.4.1 提及標題結構是略過內容區塊的技術
  • 2.4.6 討論一些有關撰寫實用標題的細節
  • 2.4.10 指出「每個內容區段在適當情況下都會使用標題標示」

畫面上不一定要顯示所有標題。 舉例來說,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 導入了一些新元素,可協助定義網頁的語意結構,包括 headerfooternavarticlesectionmainaside。這些元素會特別提供網頁結構線索,但不會強制使用任何內建樣式 (您仍應使用 CSS)。

語意元素會取代多個重複的 div 區塊,並為作者和讀者提供更清楚、更描述性的頁面結構。