作為最佳實踐,最好在
通常可聚焦但處於非活動狀態的元素(例如,停用的輸入框或按鈕)應指定負 tabindex (tabindex="-1")。
應在活動或需要時將焦點加回元素(可使用 JS 或 TS)。
應避免正 tabindex。將焦點放在非互動元素上並破壞正常的焦點順序可能會讓使用者感到困惑和沮喪。很少有情況需要添加正的 tabindex,例如 tabindex=1 到不可聚焦的元素。
必須包含跳過連結以幫助使用者繞過導航選單。
跳過連結應包含有關連結用途的上下文(例如「跳到主要內容」),並且可以使用其他 ARIA 屬性,例如 aria-labelledby、aria-label。
跳過連結可以是可見的,也可以在視覺上隱藏(基於設計),直到使用者使用 Tab 鍵切換到它。
不應覆寫預設的瀏覽器焦點樣式(例如「outline: 0」或「outline: none」)。
允許自訂焦點樣式。
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 |
當使用者從一個頁面導航到另一個頁面時,也必須保持焦點。
每當使用者點擊連結前往應用程式中的另一個頁面時,焦點要麼保持在同一位置,要麼可能完全放置在其他位置。
以下是當使用者從一個頁面導航到另一個頁面時建議的焦點位置。
將焦點放在有 aria-live 公告的主容器上。
將焦點放回連結上以跳至主要內容。
將焦點移至新頁面的頂層標題。
組件狀態應使用 ARIA 屬性進行管理(例如,使用 aria-expanded 屬性告訴使用者下拉式選單或清單是展開還是折疊。)。
應用 ARIA 屬性時要有選擇性非常重要。仔細思考使用者流程,了解應向使用者傳達哪些關鍵訊息。
如果在頁面上動態新增或更新內容(例如,警報訊息或文字變更),則應向使用者宣布。
更好用
(繼續...)
以上是無障礙 (a) 規則 - 2的詳細內容。更多資訊請關注PHP中文網其他相關文章!