輔助功能和標題：為視障用戶設計

一個小細節，比如你如何在你的網站或應用程序上使用標題，可能會讓你的潛在客戶或銷售人員付出代價。 繼續閱讀以了解為什麼您的網站應該可以訪問，如果不能訪問會發生什麼，以及有關如何使用標題引導用戶正確瀏覽頁面的一些最佳實踐。

可訪問性案例

在設計新網站或更新舊網站時，標題很容易被忽略。 營銷人員傾向於更多地關注設計的美學方面，而不是實用方面。 的確，視覺元素在網站的用戶體驗 (UX) 中發揮著重要作用，但是讓視力障礙用戶更容易訪問它可以增加轉換的訪問者數量。

統計數據加強了我們對可訪問性的支持：

• 全世界約有2.53 億人患有視力障礙
• 在英國，每天有250 人開始失明
• 在英國，有超過200 萬人因視力喪失而對其日常生活產生重大影響，例如無法駕駛
• 與年齡相關的退化是成年人失明的主要原因。

預計到 2050 年，英國將有410 萬人受到視力喪失的影響，企業不能不調整其網站以適應所有受眾。 如果他們的目標市場是更可能出現視力問題的老年人群，這一點尤其重要。

像正確使用標題這樣的簡單方面可以產生巨大的不同，而且應用起來並不難。 它還可以為您節省訴訟費用。

多米諾骨牌

Domino's Pizza 就是一個很好的例子，說明忽視視障用戶的可訪問性可能會導致代價高昂。

2016 年，一名美國盲人顧客在難以選擇澆頭、使用折扣代碼甚至在餐廳的 iPhone 應用程序上完成訂單後提出了投訴。 問題是該應用程序沒有與手機的屏幕閱讀軟件集成，該軟件根據正確使用的文本和用文本標記的圖像來發聲內容。 該公司的應用程序和網站缺少允許 iPhone 讀出選項的正確代碼。

雖然法官最初站在多米諾的一邊，但上訴法院就在上周作出了對客戶有利的裁決，理由是“多米諾網站和應用程序的所謂不可訪問性阻礙了其實體比薩特許經營店的商品和服務的訪問——這是公共場所住宿”。

在英國，皇家國家盲人研究所也對BCC的裁決表示歡迎：“根據2010 年平等法案，所有組織都有責任確保他們的網站和應用程序可供盲人和弱視者使用，包括那些誰使用屏幕閱讀器”。

企業可以通過不同的方式使他們的網站更易於訪問，並且正確使用標題標籤對於幫助用戶瀏覽頁面大有幫助。

可訪問性的標題最佳實踐

標題存在相當多的混淆和誤用，部分原因是開發人員過於密切地遵循設計或設計人員不知道使用標題的正確方法。

如果您不確定標題是什麼，那麼 W3C 有一個很好的定義，Yoast 解釋了它的 SEO 用途。

W3C 將正確用法定義為：

“六個標題元素，H1 到 H6，表示章節標題。 儘管標題的順序和出現不受 HTML DTD 的限制，但文檔不應跳過級別（例如，從 H1 到 H3），因為將此類文檔轉換為其他表示形式通常是有問題的。”

標題的正確使用不僅會影響人們和 Google 閱讀您頁面的方式，還會對屏幕閱讀器向用戶呈現您的內容的方式產生巨大影響。 使用輔助功能工具的人可以通過您的標題導航頁面，因此如果您有重要的事情要說，那麼它應該按照您的意圖在結構和視覺上進行佈局。

創建頁面時，無需額外工作即可訪問標題。 如果您遵循正確的用法，那麼將滿足可訪問性標準。 W3c 標題的可訪問性建議很好地解釋了這一點，正如您所看到的，它不僅對可訪問性有意義，而且在結構和視覺上也有意義。

我如何檢查標題？

如果您的開發人員或主題遵循標題的正確使用，那麼您應該能夠簡單地添加您的內容並通過您的編輯器/CMS 以正確的方式添加您的標題。

作為旁注，您不需要在任何地方添加標題，一個簡單的 H1（通常是頁面標題）後跟一個 H2 就足夠了——但是假設您想正確構建一個特別長的頁面，或者您正在檢查其他人的工作？ 嘗試為您喜歡的瀏覽器使用以下插件之一：

• Chrome 的標題地圖
• Firefox 的標題映射

安裝後，它們非常易於使用，當您單擊插件按鈕時，任何不正確的標題都會在側邊欄中以紅色突出顯示。 此功能也將成為 WordPress 5.0 版本中古騰堡編輯器的默認選項，並在此站點上進行了說明。

標題的正確使用方法：

使用標題的錯誤方法：

下圖顯示了用於樣式而不是結構的標題。 這將導致標記錯誤並且在語義上是不正確的——避免像這樣使用它們！

希望這篇文章現在可以幫助您為每個人正確構建您的網頁。

如果您在 Web 開發方面需要幫助，請隨時與我們聯繫。