無障礙 (a) 規則 - 4

色彩和對比度

• 常規尺寸的文字（包括文字影像）的色彩對比度必須為 4.5:1。

• 大尺寸文字（18pt / 24px 或 14pt / 18.5px 粗體）和基本圖示的色彩對比度必須為 3:1。

• 要了解顏色對比度，請使用 google Chrome 的 DevTools 顏色選擇器。

• 在圖形、圖表和表格中的顏色旁邊添加額外的標識符，例如圖案、文字或圖標，以增強所有使用者對內容的理解。

• 使用 @prefers-color-scheme 建立深色主題。

• 建立高對比主題@prefers-contrast。

動畫和運動

閃爍和移動的內容

• 請勿包含任何在一秒內閃爍超過 3 次的任何內容。

• 低於一般閃光和紅色閃光閾值的閃光。

暫停、停止或隱藏運動

• 在頁面中加入暫停、停止或隱藏機制，以允許使用者關閉可能有問題的運動動畫。

• 可以在螢幕層級或元素層級執行此操作。

使用媒體查詢

• 在 @prefers-reduced-motion 媒體查詢的幫助下，檢查與尊重這些偏好的動畫和設計網站相關的使用者作業系統設定。

版式

• 創建無障礙設計的最快方法是選擇通用字體（例如 Arial、Times New Roman、Calibri、Verdana 等）。

• 避免使用華麗或手寫的字體，以及只有一種字元大小寫的字體（例如，只有大寫字元）。

• 當您尋找字體時，請特別注意以下幾點：

  • 盡可能使用常用字體。
  • 避免使用複雜或手寫的字體以及只有一種字元大小寫的字體。
  • 選擇具有獨特特徵的字體 - 特別注意大寫 I、小寫 l 和 1。
  • 檢查某些字母組合，確保它們不是彼此的精確鏡像。
  • 檢查字偶距，尤其是 r 和 n 字母對之間。

字體大小和排版樣式

• 基本字體大小應使用相對值（%、rem 或 em）定義，以允許調整大小。

• 限製字體變化的數量，例如顏色、粗體、全部大寫和斜體，以提高可讀性。相反，使用方法來強調副本中的單詞，例如星號、破折號或突出顯示單字。

• 盡可能在圖像上使用標記而不是文字。螢幕閱讀器無法讀取圖像上的嵌入文字（無需添加額外程式碼），並且嵌入文字在被弱視用戶放大時也會變得像素化。

結構及佈局

• 關鍵元素應該彼此不同，相似的元素應該分組在一起。

間距

• 文字區塊應保持狹窄，以提高可讀性並幫助殘障讀者更輕鬆地理解內容。

內容對齊

• 避免對齊文本，因為間距不均勻會影響可讀性，尤其是對於殘疾人而言。它還會扭曲單字間距，使單字邊界難以識別。

• 間距和良好行高和黃金比例計算器等工具可協助使副本更易於存取。

結構和佈局的最佳實踐

• 使用標題、副標題、列表、數字、引用區塊和其他視覺分組等元素將頁面分成幾個部分。

• 使用明確定義的段落、句子和單字間距。

• 建構寬度小於 80 個字元的文案列（語標為 40 個字元）。

• 避免段落對齊，這會在文案中產生「空間之河」。

以上是無障礙 (a) 規則 - 4的詳細內容。更多資訊請關注PHP中文網其他相關文章！