內容導向網頁應用程式前端的無障礙設計

可存取的網頁應用程式設計是提供良好的使用者體驗，以及提升整體應用程式使用者滿意度的關鍵要素。易於存取的網頁應用程式可確保來自不同地理位置的使用者和擁有不同能力的人都能享有平等的體驗。使用者的聽覺、認知、語音或視覺能力有其限制，以及與短期身心障礙、網路連線速度較慢或日照明亮度有相關暫時限制的使用者，應該都能存取您的網頁應用程式。建構網頁應用程式的前端時，建議您從一開始就運用無障礙解決方案，避免發生無障礙問題，也不需要在建構過程中再次執行任何工作。請確保應用程式內容能由網路檢索器和螢幕閱讀器掃遍，同時為使用者提供良好的體驗。

無障礙設計是許多國家/地區和產業的法律義務；您必須瞭解這些規範，並將無障礙解決方案整合至前端設計。不同的業務案例也突顯了網路內容無障礙性的重要性。

MDN 和 WCAG 等資源提供基本指南和建議，協助您提升網頁應用程式的無障礙功能。您也可以前往 web.dev 參加「學習無障礙功能」課程。

為了讓各種使用者都能存取網頁應用程式，各種元件之間的交互作用是相當重要的一環。

色彩和對比

色彩使用是評估網頁應用程式無障礙功能的主要因素。前端使用者必須能夠察覺網頁上的內容，而色彩和對比必須明顯影響使用者對內容的觀感。檢視條件和視力相關的身心障礙可能是暫時性、情境式或永久性，但建構網頁應用程式前端時必須考慮這些情況。在使用者端介面所使用的顏色之間，建立正確的對比度或亮度差異，可以讓多樣化的使用者更容易存取您的網頁應用程式。對比度可以提供背景與文字之間的亮度差異。

如要測量對比，可以使用對比度公式，確保背景中的文字或圖示存在最小對比度。考慮到許多形式的色彩感知障礙，但新的色彩模型即使以灰階顯示，仍可確保系統正確辨識內容。

為了提供無障礙功能，通常建議使用深色主題。由於白色淺色和閱讀障礙，通常在視覺輸入中通常會優先選用深色主題。由於內容導向應用程式含有大量文字和圖片，因此請務必謹慎使用顏色和對比度，以滿足使用者多元的需求。

進一步瞭解 web.dev 的顏色和對比。

字體排版

字體排版是指文字選擇和排列方式，讓多樣化的使用者能夠判讀且清楚易讀。最常變更的無障礙設定是裝置的預設字型大小。部分使用者可能想用更小的字型大小來在螢幕上容納更多文字，或是盡可能放大文字，因此，設定彈性且易讀的字體排版非常重要。此外，個別文字字元也應該能讓讀者清楚區分，而且整體文字必須清晰易讀。在應用程式的前端設計期間，請務必選取同時具有易讀性和可讀性的字體。

字體

您為網頁應用程式選擇的字體 (或字型系列) 應該要能讓廣大的讀者都能輕鬆存取。字體是應用程式文字中所用字母的視覺設計。許多研究說明在評估網頁內容的無障礙程度時，字體的重要性。必須在品牌、使用者介面設計目標和易讀性之間取得平衡，才能讓更多使用者更輕鬆地使用您的應用程式。建構前端時，請考慮字型選項與其中的字型選項如何影響應用程式的無障礙功能和整體設計。

字型大小

考慮允許瀏覽器縮放功能，協助低視能或色覺障礙失明的使用者。網頁應用程式的文字字型必須能讓多元讀者看見。如要調整字型大小，可以從 px 切換為 rem。Rem 單位可讓您使用與 Wep 應用程式根元素相對的字型大小。這種方式多變，可提升網頁應用程式整體的無障礙功能。

結構和版面配置

各種結構和版面配置屬性會影響介面的無障礙功能。要考慮的版面配置功能包括文字區塊間距和對齊方式，以及文字行與單字母之間的空間。利用格線，以視覺化方式呈現設計中要納入的元件。內容的版面配置和結構應該引人入勝，並讓使用者享受愉快的體驗。對部分使用者來說，複雜的版面配置或含有多個文字區塊的繁忙背景，例如使用 ADHD 的螢幕。請務必在前端設計程序中，將多元包容性列為優先要務。

ARIA 和 HTML

可存取性豐富的網際網路應用程式 (ARIA) 包含一套指南和屬性，有助於讓使用者更輕鬆地使用網頁應用程式。ARIA 能輔助 HTML，並啟用可存取的 JavaScript 小工具、即時內容更新和錯誤訊息等。正確使用 ARIA 是為了讓網頁應用程式更易於存取的關鍵。未正確使用 ARIA 會導致錯誤發生，實際上會讓使用者較不容易存取您的應用程式。

請盡可能使用 ARIA 標籤來導入與點字和文字轉語音 (TTS) 相容的替代格式。如果 ARIA 角色和標籤與背景樹狀結構不同，可讓您變更無障礙樹狀結構。使用非標準標記 (例如 div 做為可點選按鈕) 時，這些標籤也很重要。如果 HTML 元素不支援無障礙功能，就必須提供 ARIA。設計內容導向應用程式時，請確保螢幕閱讀器和其他輔助裝置受到完善支援，有助於應用程式盡可能觸及最多使用者。

進一步瞭解 web.dev 上的 ARIA 和 HTML。

國際化

國際化是指設計網頁應用程式，供不同語言及文化背景的使用者存取。您的網頁應用程式應該要能根據不同語言、地理區域和文化偏好進行調整，不需要大幅變更程式碼。國際化的關鍵要素包括多語言支援、本地化、內容區隔、日期和時間格式、文字方向、語言協商等等。

只要將網頁應用程式國際化，就能為世界各地的使用者打造多元包容且容易使用的服務。對擁有多元使用者數量或目標實現國際擴展的任何網頁應用程式而言，國際化是不可或缺的一環。

邏輯屬性

在 CSS 中建構樣式時，請務必使用 start / end，而非 top / down/ left/ right 等屬性。這可確保選單和網站版面配置為 RTL 語言隨之調整。

替代內容

在 HTML 標記中加入 lang 屬性，並在標頭中加入替代文件的連結，以便提供內容的自訂標記。這樣一來，如果定義的語言與預設瀏覽器語言不同，瀏覽器就能選取正確的網頁。這項工具可協助網路瀏覽器和搜尋引擎瞭解網頁的語言，這不僅有助於正確轉譯內容，也能提高 SEO 成效。

國際

JavaScript 中的 Intl 物件是建立多語言和文化感知網頁應用程式的重要工具。這項工具可為網頁應用程式提供國際化和本地化功能，可確保您的介面和內容容易理解，並因文化而異。Intl 物件提供的功能包括日期和時間格式、數字格式和字串定序。

進一步瞭解 web.dev 的國際化功能。

表單

HTML 表單是內容導向網頁應用程式的重要環節。可讓使用者進行互動，並提供結構化方法收集使用者資訊。如果一般大眾都無法存取 HTML 表單，可能會讓使用者感到困擾並感到不滿。

如要讓 HTML 表單變得易於存取，請針對所有表單欄位使用語意 HTML 元素。 這有助於輔助技術瞭解每個欄位的用途，讓使用者更容易完成欄位。此外，請務必為所有表單欄位清楚加上標籤。這可協助使用者提供準確且實用的資訊。此外，測試 HTML 表單的無障礙程度也很重要，方法是使用輔助技術模擬使用者的使用者體驗，而使用者需要這類技術使用應用程式內容。

進一步瞭解如何在 web.dev 上建構表單。