縱使我們設計網頁時經常強調「用戶體驗」,但照顧傷健人士的「無障礙網頁」似乎仍不是大多數設計師的一大考量。一年一度的「無障礙網頁嘉許計劃」已在一月由香港互聯網註冊管理有限公司(HKIRC)舉辦,並首次將涵蓋範圍擴展至手機網頁及應用程式。

HKIRC 稱,現時不同界別行業如交通運輸、銀行、新聞機構等均提供無障礙網站及應用程式;而對社會整體而言,為網站或程式加入新功能除可便利市民之外,更是協助有需要人士融入社區的重要舉措,同時提升他們獨立工作能力,增加投入社會的機會。

不過,要開發一個無障礙網站是不是十分麻煩呢?其實 W3 已為 UI 開發和內容使用提供了簡單的指引,實行時並非想像中困難。以下為部分的指引。

1. UI 開發

  • 前景文字與背景要有高對比度:充足的對比度方便人們在電腦和手機閱讀文字。Google Chrome 瀏覽器的開發者工具已內置工具,分析文字是否具有足夠的對比度。

▼ Chrome 開發者工具顯示 Contrast Ratio。

  • 勿單靠顏色來表達資訊:雖然顏色有助傳遞資訊,但開發者不應單靠顏色來傳遞,而配合更加辨認方式表達意思。例如在表單輸入時,除了使用紅色來表達必要選項之外,亦應加入*號識別。
  • 讓互動元素更易辨認:網頁經常有超連結、按鈕和選單等互動元素。該些元素應加入不同效果以作識別,例如是 CSS 的 :hover 、:focus 和 :active 擬元素(pseudo-element)。利用瀏覽器的開發者工具已可快速測試各個擬元素的效果。
  • 使用標題和空位為內容分類:利用空間(Whitespace)和近遠(Proximity)將類似的內容分類,提升網頁可讀程度,以及為網頁元素建立視覺上的優先次序。千萬不要以為在網頁留白是浪費空間。

2. 內容撰寫

  • 建立網頁標題:標題應形容網頁內容,並通常與內文標題一樣。設定標題時,宜將最獨特和相關的內容置於開首,並將組織名稱放在後面。([教學]網頁標題(TITLE)怎樣才達到 SEO 效果?
  • 使用有意義的文字作連結:連結文字應為有意義、可形容網頁內容,而非「點我」、「閱讀更多」等空泛字眼。使用有意義的文字作連結亦有助 SEO。
  • 為影片、錄音加入文字記錄:像 Podcast、影片等影音內容宣加入文字記錄,除方便聾人了解內容之外,豐富的內容亦有助 SEO。例如在 MOZ 的 Whiteboard Friday 中,除了有影片之外,亦有文字記錄。

▼ MOZ 的 Whiteboard Friday 中除了有影片之外,亦有文字記錄。

除了以上多項,開發網頁時亦應注意 HTML 碼的使用,除了 alt 標籤之外,ARIA 亦值得探討。

延伸閱讀