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

無障礙 (a) 規則 - 2

Mary-Kate Olsen
發布: 2024-11-21 07:30:10
原創
582 人瀏覽過

Accessibility (a) Rules - 2

iFrames

  • 作為最佳實踐,最好在

焦點順序

  • 預設的焦點順序必須符合邏輯、直觀,並且與頁面的視覺順序相符。

標籤索引

  • 通常可聚焦但處於非活動狀態的元素(例如,停用的輸入框或按鈕)應指定負 tabindex (tabindex="-1")。

  • 應在活動或需要時將焦點加回元素(可使用 JS 或 TS)。

  • 應避免正 tabindex。將焦點放在非互動元素上並破壞正常的焦點順序可能會讓使用者感到困惑和沮喪。很少有情況需要添加正的 tabindex,例如 tabindex=1 到不可聚焦的元素。

跳過連結

  • 必須包含跳過連結以幫助使用者繞過導航選單。

  • 跳過連結應包含有關連結用途的上下文(例如「跳到主要內容」),並且可以使用其他 ARIA 屬性,例如 aria-labelledby、aria-label。

  • 跳過連結可以是可見的,也可以在視覺上隱藏(基於設計),直到使用者使用 Tab 鍵切換到它。

焦點指示器

  • 確保焦點指示器沒有隱藏在其他組件下方。

瀏覽器預設樣式

  • 不應覆寫預設的瀏覽器焦點樣式(例如「outline: 0」或「outline: none」)。

  • 允許自訂焦點樣式。

JavaScript

觸發事件

  • 如果將按一下事件(例如 onClick())套用至非語意元素(例如
    ),則必須新增 keydown/keyup 事件來偵測 Enter 或空白鍵按下。

    頁面標題

    • 每個頁面都應該有一個標題。為此目的可以使用 document.title 屬性或第三方套件

    動態內容

    Possible misuse Correct use
    Render large chunks of non-semantic HTML Render smaller pieces of semantic HTML
    Not allowing time for dynamic content to be recognized by assistive technology Using a setTimeout() time delay to allow users to hear the full message
    Applying style attributes for onFocus() dynamically Use :focus for the related elements in your CSS stylesheet
    Applying inline styles may cause user stylesheets to not be read properly Keep your styles in CSS files to keep the consistency of the theme
    Creating very large JavaScript files that slow down overall site performance Use less JavaScript; prefer CSS for animations or sticky navigation for better performance

    元件級焦點管理

    • 當使用者開啟模式時,他們應該能夠使用 Tab 鍵在其中的可操作元素(例如取消和提交按鈕)之間導航。但是,焦點必須保持限制在模式中,防止使用者存取模式之外的元素,除非他們明確關閉模式。這可以確保焦點被限制在模態中。

    頁面級焦點管理

    • 當使用者從一個頁面導航到另一個頁面時,也必須保持焦點。

    • 每當使用者點擊連結前往應用程式中的另一個頁面時,焦點要麼保持在同一位置,要麼可能完全放置在其他位置。

    • 以下是當使用者從一個頁面導航到另一個頁面時建議的焦點位置。

    • 將焦點放在有 aria-live 公告的主容器上。

    • 將焦點放回連結上以跳至主要內容。

    • 將焦點移至新頁面的頂層標題。

    元件級狀態管理

    • 組件狀態應使用 ARIA 屬性進行管理(例如,使用 aria-expanded 屬性告訴使用者下拉式選單或清單是展開還是折疊。)。

    • 應用 ARIA 屬性時要有選擇性非常重要。仔細思考使用者流程,了解應向使用者傳達哪些關鍵訊息。

    頁面級狀態管理

    • 如果在頁面上動態新增或更新內容(例如,警報訊息或文字變更),則應向使用者宣布。

    • 更好用

      • React:react-aria-live 或react-a11y-announcer
      • Angular:LiveAnnouncer
      • Vue:vue-a11y-utils

    (繼續...)

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

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