語意和輔助技術簡介
您已瞭解如何解決因肢體障礙、技術問題或個人偏好,讓無法使用滑鼠或指標裝置的使用者存取網站,例如解決僅限鍵盤使用的問題。雖然這需要審慎考量,但如果您一開始就規劃,這項工作的規模並不大。基本工作完成後,您便能朝著更易於存取與完善這項功能的網站進行一段很長的旅程。
在本課程中,我們將以這項工作為基礎,並讓您思考其他無障礙功能,例如如何建立網站來支援Victor Tsaran 這類無法查看螢幕的使用者。
首先我們會介紹「輔助技術」,這是一種一般用語,適用於可協助視障使用者防止使用者存取資訊的工具,
接下來,我們會瞭解一些一般使用者體驗概念,並以這些概念為基礎,進一步深入探討輔助技術的使用者體驗。
最後,我們會說明如何有效地使用 HTML,為這些使用者提供良好的體驗,以及與先前討論的重點,有些許重疊。
輔助技術
「輔助技術」泛指裝置、軟體和工具,可協助任何身心障礙人士完成工作。最廣泛來說,這可能是低科技產品,例如行走的十字架或用於閱讀的放大鏡,或是智慧型手機上的機械手臂或圖片辨識軟體等高科技。
輔助技術可以包括一般的瀏覽器縮放功能,或是自訂設計的遊戲控制器。這可以是點字顯示器等獨立的實體裝置,也可以完全透過語音控制等軟體實作。它可以內建於作業系統 (例如某些螢幕閱讀器) 或外掛程式,例如 Chrome 擴充功能。
輔助技術和技術之間的界線相當模糊,畢竟所有技術都是用來協助使用者完成某些工作。技術通常可移入或移出「輔助」類別。
舉例來說,最早的商業語音合成產品之一就是盲人計算機。從行車路線到虛擬助理,各種情境現在都能提供語音合成。相反地,原本用於一般用途的技術往往會找到輔助用途。舉例來說,低視能人士可能會使用智慧型手機的相機變焦功能,仔細查看真實世界中的某些小細節。
在網頁開發方面,我們必須考慮各式各樣的技術。使用者可以與您的網站互動,包括使用螢幕閱讀器或點字顯示器、放大鏡、語音控制功能、使用切換裝置,或其他能調整網頁預設介面的輔助技術,以建立更具體的介面。
許多輔助技術都仰賴以程式輔助方式表示語意來建立無障礙使用者體驗,而這就是本課程的主要內容。但我們必須先稍微瞭解「預設用途」,才能說明透過程式表示的語意。
負擔
我們使用人為工具或裝置時,通常會關注其樣式和設計,以便瞭解這項工具的功能和運作方式。「預設用途」指的是使用者有機會執行動作的任何物件,或這類物件。應用程式的預設用途越明確,使用起來就越直觀或直觀。
經典的壺具或茶壺。很容易認出你應該要按控點而不是彈跳,即使你從來沒看過茶壺。
這是因為其預設用途與在許多其他物件中看起來很像,例如水壺、飲料推銷器、咖啡杯等。您或許「可以」透過展開動作拿起鍋子,但有類似預設用途的經驗讓您知道處理代碼是更好的選擇。
在圖形使用者介面中,用途代表可以執行的操作,但由於沒有可以互動的實體物件,因此可能模稜兩可。因此,GUI 預設用途明確易懂:按鈕、核取方塊和捲軸旨在盡量減少訓練,以呈現其用途。
例如,您可以依照下列方式,改寫使用某些常見的表單元素 (用途):
- 圓形按鈕:「我可以選擇其中一個選項。」
- 核取方塊 —「我可以選擇 [是] 或 [否]。」
- 文字欄位 -「我可以在此區域輸入內容。」
- 下拉式選單 -「我可以開啟這個元素來顯示我的選項。」
您只能看到這些元素,才能得出結論。一般而言,如果使用者無法看到元素提供的視覺線索,就無法理解其含義,也無法以直覺化的方式獲取預設功能的價值。因此,我們必須確保資訊的靈活彈性足以供使用者存取,輔助技術建構替代介面以符合使用者需求。
這種非視覺型用途的曝光稱為「語意」。
螢幕閱讀器
螢幕閱讀器是常見的輔助技術類型之一,這項程式可讓視障人士以系統產生的語音朗讀畫面上的文字。使用者可以透過鍵盤將遊標移到相關區域,藉此控制要閱讀的內容。
我們邀請 Victor Tsaran 以解釋如何透過 OS X 內建的螢幕閱讀器 VoiceOver 來使用網路。請觀看這部影片,瞭解 Victor 如何使用 VoiceOver。
現在,快來試試螢幕閱讀器吧!以下是使用 ChromeVox Lite 的頁面;這是以 JavaScript 編寫而成,但功能最小但可運作的螢幕閱讀器。經過刻意模糊處理的螢幕,模擬低視能體驗,並強迫使用者透過螢幕閱讀器完成工作。當然您必須使用 Chrome 瀏覽器 才能進行本練習
您可以使用畫面底部的控制台來控制螢幕閱讀器。這個螢幕閱讀器的功能非常少,但您可以使用 Previous
和 Next
按鈕探索內容,並使用 Click
按鈕點選項目。
請嘗試在啟用 ChromeVox 精簡版的情況下使用這個頁面,體驗螢幕閱讀器的操作方式。請思考,螢幕閱讀器 (或其他輔助技術) 實際上能夠根據程式表達的語意,為使用者帶來完整的替代使用者體驗。螢幕閱讀器不會使用視覺化介面,而是提供音訊介面。
請注意螢幕閱讀器如何為您提供每個介面元素的部分資訊。您應該預期設計完善的閱讀器能夠針對遇到的元素提供以下資訊 (或至少大部分資訊)。
- 元素的角色或類型 (如果有指定的話)。
- 元素的名稱 (如果有)。
- 元素的值 (如果有的話)。
- 元素的state,例如是否啟用或停用 (如果適用)。
由於原生元素包含內建無障礙功能的中繼資料,因此螢幕閱讀器可以建構這個替代 UI。如同算繪引擎使用原生程式碼建構視覺介面,螢幕閱讀器也會使用 DOM 節點的中繼資料建構可存取的版本,就像這樣。