圖案、元件和設計系統

許多人在開發工作流程中,使用元件驅動開發,並採用樣式指南、元件程式庫或完整設計系統。即使您沒有正式使用這些工具,也可能會使用類似的程序,將網站、應用程式或其他數位產品的大型設計拆解為可管理的部分。

就像建造實體結構一樣,一次建構一個部分很重要。首先,基礎、結構、牆壁、窗戶、屋頂,以及其他所有相關項目。元件導向的開發工具可讓我們為網站、應用程式和其他數位產品執行這項操作。

元件導向開發的部分優點包括將內容分解為可管理的部分,因此可縮短這些可重複使用元件的開發時間。讓設計師、前端和後端開發人員,以及品質保證人員同時進行工作。客戶、設計師、專案經理等人員也喜歡這個功能,因為他們可以在網站推出後,預覽建構程序,並使用持續更新的樣式指南做為參考。

不過,當我們以無障礙為前提,考量模式、元件和設計系統時,就會產生一些問題。您如何知道哪些模式最適合無障礙功能?您應該使用既有的模式或程式庫,還是建立新的模式或程式庫?您如何得知這些模式是否確實有助於使用者?

由於可供選擇的項目眾多,因此很容易對模式、元件和設計系統感到困惑。本單元旨在提供有關如何評估無障礙模式、元件和設計系統的一般資訊,並提供起點,協助您做出更無障礙的選擇。

理性思考

選擇無障礙模式、元件或設計系統並非難事,但需要花時間和批判思考。事實上,並沒有「完美模式」,但可能有許多可行的選項。您需要學習如何為自己的特殊情況選擇最佳選項。

在後續的測試單元中,您將進一步瞭解如何評估無障礙模式、元件和設計系統的技術和方法。在開始之前,請先思考一些基本問題,例如:

  • 是否已建立可存取的模式、元件或設計系統?
  • 我支援哪些瀏覽器和輔助技術 (AT)?
  • 程式碼或架構是否有任何限制?是否還有其他整合、因素或使用者需求需要考量?

視開發環境和使用者需求而定,您可能會有其他或不同的問題。請將這些問題視為無障礙評估的起點。

已建立的資源

在建構全新內容之前,請先做好盡職調查,並查看現有的無障礙模式、元件和設計系統。只要稍微做點研究,您可能會發現有許多解決方案可滿足您的需求。

以下是一些實用的資源,可協助您瞭解無障礙模式、元件和設計系統:

針對 JavaScript 架構,下列資源在預設情況下相當容易存取,或是可自訂以便存取:

不過,請務必切記,千萬不要只複製/貼上程式碼,然後假設程式碼會適合您的環境,並自動滿足使用者需求。這項規定適用於所有模式、元件和設計系統,即使標示為完全無障礙也一樣。

所有資源都應視為起點。請務必測試所有內容!

瀏覽器和輔助科技 (AT) 支援

研究幾種可能適用於開發環境的基本模式、元件或完整設計系統後,您就可以開始支援輔助技術。評估模式、元件和設計系統時,您需要著重於一種主要的 AT,即螢幕閱讀器。

螢幕閱讀器是針對特定瀏覽器設計,因此搭配這些瀏覽器使用時,效果最佳。我們會在 AT 測試單元中更詳細說明這個主題,但為了評估模式,瞭解這些組合很有幫助,這樣您就知道需要哪些支援。

螢幕閱讀器 作業系統 瀏覽器相容性 費用
Job Access with Speech (JAWS) Windows Chrome、Firefox、Edge 需要授權 (有 40 分鐘的免費版本)
Non-Visual Desktop Access (NVDA) Windows Chrome 和 Firefox 免費 (需要下載)
講述者 Windows Edge 免費 (內建於 Windows 機器)
旁白 macOS Safari 免費 (已內建於 macOS 機器)
Orca Linux Firefox 免費 (內建於以 Gnome 為基礎的發行版)
TalkBack Android Chrome 和 Firefox 免費 (內建於特定 Android OS 版本)
旁白 iOS Safari 免費 (iOS 裝置內建)

瀏覽器支援功能通常相當複雜,如果再加上 AT 裝置和 ARIA 規格,情況就更複雜了。

但這並非全是壞消息。幸好,HTML5 無障礙功能無障礙支援和 WCAG 的自訂控制項無障礙開發檢查清單等優質資源,有助我們進一步瞭解目前的瀏覽器和 AT 裝置支援功能,甚至是何時應使用 ARIA。

這些資源會概略說明可用的不同 HTML 和 ARIA 模式子元素,包括開放原始碼社群測試。您也可以查看電腦、行動瀏覽器和 AT 裝置的幾個範例模式。因此,這些資源有助您在決定要使用的模式、元件和設計系統時,做出更易於存取的決策。

其他注意事項

選擇幾個可存取的基本模式或元件,並考量瀏覽器和 AT 裝置支援功能後,您就可以繼續處理有關模式、元件、設計系統和開發環境的更具體的內容相關問題。

舉例來說,如果您使用管理系統 (CMS) 或有舊版程式碼,則您可使用的模式可能會受到限制。經過審查後,您可能會發現多個樣式選項迅速縮減為一或兩個選項。

許多 JavaScript 架構都允許開發人員使用幾乎任何模式。在這種情況下,您可能受到的限制較少,可以選擇最容易存取的模式選項。

選擇模式、元件或設計系統時,還需考量其他因素,例如:

  • 成效
  • 安全性
  • 搜尋引擎最佳化
  • 語言翻譯支援
  • 第三方整合

這些因素無疑會影響您選擇的模式,但也請考量內容和程式碼本身的開發人員。您選擇的模式必須足夠健全,才能處理編輯器產生或使用者產生內容的任何潛在限制,而且必須以所有無障礙知識的開發人員都能使用的形式建構。

進行隨堂測驗

測驗您對模式的瞭解

無障礙元件是否一律可供使用者存取?

否,您必須先測試元件。
是的,您可以使用這些元件,無須額外操作。