許多人會在開發工作流程程序中,使用模式樣式指南、元件程式庫或完整設計系統來使用元件驅動的開發。即使您並未正式使用這些工具,仍有可能採取類似的程序,將大型網站、應用程式或其他數位產品分類成易於管理。
就像建構實體結構一樣,一次建構一個容器也十分重要。第一,是基礎、結構、牆、窗戶、屋頂等所有資訊元件導向的開發工具支援網站、應用程式和其他數位產品。
元件導向開發的優點包括將內容細分為可管理元件,因此能減少這些可重複使用的元件開發時間。設計人員、前端和後端開發人員,以及品質確保 (QA) 可搭配運作。客戶、設計人員、產品經理等都適用,因為他們可以預覽建構程序,並在網站推出後將生活風格指南當做參考依據。
不過,以無障礙設計的角度來看,模式、元件和設計系統時,可能會出現一些問題。如何知道哪些模式最適合無障礙功能?您應該使用已建立的模式/程式庫,還是建立新的模式/程式庫?您要如何得知這些模式是否確實對您的使用者有幫助?
由於可用的選擇眾多,很容易對這個主題感到困惑。本單元旨在提供一般資訊,說明如何評估適用於無障礙功能的模式、元件和設計系統,並提供相關入門資訊,協助您做出更便利的選擇。
批判性思考
選擇無障礙模式、元件或設計系統並非火箭科學,但需要時間和批判性思考。其實沒有「一種完美的模式」,但可能有很多選項可行。重點在於瞭解如何依據自己的情況選擇最合適的選項。
在後續測試模組中,您將進一步瞭解評估模式、元件,以及設計無障礙功能系統的相關技巧和方法。但在進入這個階段之前,您必須放鬆思考一些基本問題,例如:
- 是否已有現成的無障礙圖案、元件或設計系統?
- 我支援哪些瀏覽器和輔助技術 (AT)?
- 我是否必須考慮是否有任何程式碼/架構限制,或有其他整合/因素/使用者需要考量?
視您的開發環境和使用者需求而定,您可能會遇到其他或不同的問題。進行無障礙評估時,不妨以這些問題做為起點。
現有資源
建構全新項目之前,請先執行盡職調查,並檢視現有的項目,包括可存取的模式、元件和設計系統。只要稍微研究一下,您也許會出乎意料,找到符合您需求的解決方案或多種解決方案。
以下列舉一些有關無障礙模式、元件和設計系統的實用資源:
對於 JavaScript 架構,您可以立即存取下列資源,或是易於自訂的無障礙功能:
- CSS 不足時:可存取元件的 JavaScript 規定
- 回應
- Angular:Material 程式庫
- Vue 卡:Vuetensils
然而,要做到這一點也不足以備感壓力:您不應只複製/貼上程式碼,並假設程式碼可滿足您的環境並自動滿足使用者需求。即使標示為完全可存取,所有模式、元件和設計系統都是如此。
所有資源都應視為起點。請務必測試所有內容!
瀏覽器和輔助技術 (AT) 支援
研究完幾個可能適用於開發環境的基本模式、元件或完整設計系統後,您就可以開始進行輔助技術支援。評估模式、元件和設計系統時,您需要著重於其中一個 AT 主要類型。
螢幕閱讀器是以特定瀏覽器為設計基礎,搭配這些瀏覽器使用時效果最佳。我們會在 AT 測試的單元中詳細說明這個主題,但基於模式評估目的,瞭解這些組合會很有幫助,有助您瞭解支援各方面的需求。
螢幕閱讀器 | 作業系統 | 瀏覽器相容性 | 費用 |
---|---|---|---|
透過 Speech 存取工作 (JAWS) | Windows | Chrome、Firefox、Edge | 需要授權 (40 分鐘的免費版本存在) |
非視覺化電腦存取權 (NVDA) | Windows | Chrome 和 Firefox | 免費 (必須下載) |
講述者 | Windows | Edge | 免費 (已內建於 Windows 機器中) |
VoiceOver | macOS | Safari | 免費 (內建於 macOS 機器) |
奧爾卡 | Linux | Firefox | 免費 (已內建於 Gnome 發行版本) |
TalkBack | Android | Chrome 和 Firefox | 免費 (內建於特定 Android 作業系統版本) |
VoiceOver | iOS | Safari | 免費 (內建於 iOS 裝置) |
支援瀏覽器通常相當複雜,而且如果同時加入 AT 裝置和 ARIA 規格,運作上會更加困難。
但並非全部都是壞消息。幸好,有 HTML5 無障礙工具、無障礙支援和 WCAG 的自訂控制項無障礙開發檢查清單等實用資源,可協助我們進一步瞭解現有瀏覽器和 AT 裝置支援,甚至事先使用 ARIA。
這些資源列出各種可用的 HTML 和 ARIA 模式子元素,包括開放原始碼社群測試。您也可以參考一些適用於桌上型電腦和行動瀏覽器/AT 裝置的模式範例。因此,在您想要使用的模式、元件和設計系統方面,這些資源可協助您做出更易於存取的決策。
其他考量
選擇一些可用的基礎模式或元件,並結合瀏覽器和 AT 裝置支援後,您就可以繼續討論與模式、元件、設計系統和開發環境相關的特定情境問題。
舉例來說,如果您使用的是管理系統 (CMS) 或擁有舊版程式碼,可使用的模式可能會有一些限制。經過審查後,許多模式選擇可能很快就會變成一到兩個選項。
許多 JavaScript 架構都允許開發人員使用絕大多數的模式。在這種情況下,您可以減少的限制數量,也可以選擇最容易存取的模式選項。
選擇模式、元件或設計系統時,還需要考量其他事項,例如:
- 效能
- 安全性
- 搜尋引擎最佳化
- 語言翻譯支援
- 與第三方服務相互整合
這些因素無疑是決定模式選擇的因素,但您也應該考量建立內容與程式碼本身的人。您選擇的模式必須夠強,足以處理編輯器或使用者原創內容的任何潛在限制,且所有無障礙知識的開發人員都能使用。
隨堂測驗
測驗你的模式相關知識
使用者可以隨時存取無障礙元件嗎?