首頁 > web前端 > js教程 > 主體

無障礙 (a) 規則 - 4

Linda Hamilton
發布: 2024-11-28 03:52:10
原創
586 人瀏覽過

Accessibility (a) Rules - 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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板