Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

語義簡介

您已經通過解決只能使用鍵盤問題了解了如何讓無法使用鼠標或指控設備(無論是因爲身體缺陷、技術問題還是個人偏好)的用戶訪問網站。如果從一開始就進行規劃,這項工作儘管需要一定的良苦用心,工作量並不大。完成這項基礎工作後,還需要付出艱苦的努力才能打造出更加精良並且能夠完全無障礙訪問的網站。

在這節課中,我們將在這項工作的基礎上發動您思考其他無障礙因素,例如如何讓構建的網站能夠支持 Victor Tsaran 之類看不到屏幕的用戶。

首先,我們將瞭解一些有關輔助技術的背景信息,該技術泛指屏幕閱讀器之類的工具,這些工具能夠幫助身體有缺陷的用戶更方便地獲取信息。

其次,我們將瞭解一些常規用戶體驗概念,並以這些概念爲基礎更深入地瞭解輔助技術用戶的體驗。

最後,我們將瞭解如何有效利用 HTML 爲這些用戶打造良好體驗,以及爲什麼說它與我們之前闡述的焦點有頗多共性。

輔助技術

輔助技術是一個涵蓋性術語,泛指有助於任何殘障人士完成任務的設備、軟件和工具。 從最廣泛的意義上講,它可以指助行柺杖或閱讀用放大鏡等低科技物品,也可以指機械臂或智能手機上的圖片識別軟件等高科技元素。

包括柺杖、放大鏡和機械假肢在內的輔助技術示例

輔助技術可以包括瀏覽器縮放這樣寬泛的概念,也可以包括自定義設計遊戲控制器這樣具體的物品。 它可以是盲文顯示器之類獨立的物理設備,也可以完全實現在語音控制之類的軟件中。它可以內置於某些屏幕閱讀器之類的操作系統,也可以插件(比如 Chrome 擴展程序)形式存在。

包括瀏覽器縮放、盲文顯示器和語音控制在內的其他輔助技術示例

輔助技術與一般意義上的技術之間界限模糊,畢竟所有技術都旨在協助人們完成某項任務。 技術被歸入和移出“輔助”類別的情況可能會經常發生。

例如,盲人用發音計算器是最早商用的語音合成產品之一。 現在,語音合成產品已隨處可見,從行車路線指引到虛擬助手,無所不有。 另一方面,原來的通用技術也往往會開發出輔助用途。 例如,弱視人羣可以利用其智能手機的相機變焦功能看清現實世界中較小的物體。

在網絡開發環境中,我們必須考慮採用種類多樣的技術。 人們在與您的網站進行交互時使用的可能是屏幕閱讀器或盲文顯示器、屏幕放大器、語音控制、開關設備或某種其他形式的輔助技術,這些技術可以對網頁的默認界面進行調整,形成一個他們可以使用的更具體界面。

其中的許多輔助技術都依賴以編程方式表示的語義來打造無障礙用戶體驗,而這也正是本節課的主要內容。但我們需要簡要介紹一下功能可見性,然後才能對以編程方式表示的語義加以說明。

功能可見性

當我們使用人造工具或設備時,通常通過其形狀和設計來了解其功能和使用方法。 功能可見性是指任何提供或給予其用戶操作執行機會的對象。功能可見性設計得越好,用途就越明顯或越直觀。

水壺或茶壺就是典型的例子。即使您以前從未見過茶壺,也能輕易發現,拎起茶壺時應握着手柄而不是壺嘴。

帶手柄和壺嘴的茶壺

這是因爲其功能可見性與您在噴壺、飲料罐、咖啡杯等許多其他物體上見過的類似。 握着壺嘴多半也能拎起茶壺,但您在類似功能可見性上的經驗告訴您,手柄是更好的選擇。

在圖形界面中,功能可見性表示我們可以執行的操作,但它們可能模棱兩可,因爲並不存在可以進行交互的物理對象。 因此,GUI 功能可見性專門設計爲具有明確含義:按鈕、複選框和滾動條旨在通過儘可能少的訓練傳遞其用途信息。

例如,您可以像下面這樣用淺顯的語言解釋某些常見表單元素(功能可見性)的用途:

  • 單選按鈕:“我可以選擇其中一個選項。”
  • 複選框:“我可以選擇‘是’或‘否’使用此選項。”
  • 文本字段:“我可以在此區域內鍵入內容。”
  • 下拉列表:“我可以打開此元素以顯示我的選項。”

您之所以能夠就這些元素得出結論,完全是因爲您能看到它們。 看不到元素提供的視覺提示的人自然無法理解其含義或直觀領會功能可見性價值。因此我們必須確保信息的表達方式足夠靈活,可以讓輔助技術根據用戶需要構建一個替代性界面,在該界面中向用戶傳遞信息。

這種非視覺的功能可見性用途公開稱爲它的語義

屏幕閱讀器

一種流行的輔助技術是“屏幕閱讀器”,視力殘障人士可以利用該程序以合成語音朗讀屏幕上的文字,從而達到使用計算機的目的。用戶可以通過使用鍵盤將光標移至相關區域來控制閱讀的內容。

我們請 Victor Tsaran 來說明,作爲一個盲人,他是如何利用 OS X 上名爲 VoiceOver 的內置屏幕閱讀器訪問網絡的。請觀看這段視頻,其中包含 Victor 使用 VoiceOver 的過程。

現在,輪到您嘗試使用屏幕閱讀器了。以下網頁啓用了 ChromeVox Lite,這個使用 JavaScript 編寫的屏幕閱讀器只具有最基本的功能,但可以正常使用。 屏幕有意做了模糊化處理以模擬弱視體驗,迫使用戶使用屏幕閱讀器來完成任務。當然,您在完成這項練習時需要使用 Chrome 瀏覽器。

ChromeVox Lite 演示頁面

您可以利用屏幕底部的控制面板來控制屏幕閱讀器。 這個屏幕閱讀器雖然只具有非常基本的功能,但您可以利用 PreviousNext 按鈕探索頁面內容,並且可以使用 Click 按鈕點擊內容。

試着利用這個啓用了 ChromeVox Lite 的網頁體驗使用屏幕閱讀器的感覺。 想想看,屏幕閱讀器(或其他輔助技術)實際上是根據以編程方式表示的語義爲用戶打造一種完全替代性的用戶體驗。屏幕閱讀器提供聽覺界面來替代視覺界面。

請注意屏幕閱讀器如何告訴您有關各界面元素的某些信息。 精心設計的閱讀器應能將有關其遇到的元素的以下全部或至少大部分信息告訴您。

  • 元素的角色或類型,如果已指定(應予指定)。
  • 元素的名稱,如果有名稱(應有)。
  • 元素的,如果有值(不一定有)。
  • 元素的狀態,例如已啓用還是已禁用(若適用)。

屏幕閱讀器之所以能夠構建這一替代性 UI,是因爲原生元素包含內置無障礙元數據。 正如渲染引擎會使用原生代碼來構建視覺界面,屏幕閱讀器則會使用 DOM 節點中的元數據來構建一個無障礙版本,其結構與下圖所示類似:

一個使用 DOM 來創建無障礙節點的屏幕閱讀器