无障碍 (a) 规则 - 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中文网其他相关文章！