使用 JS 添加 WAI-ARIA 属性
Adding WAI-ARIA attributes with JS
在工作中，我一直在优化我帮助为我们的一位客户（我不能说是谁）开发的网站之一，以便使用 WAI-ARIA 属性符合 ADA 标准。我一直想知道创建一个小型 JS 库是否会更容易，它可以执行诸如将 "role=button" 添加到我设计为看起来像按钮的锚点，将 "tabindex=0" 添加到元素 I想成为"tabable"等
我想知道用 JS 添加 WAI-ARIA 属性是否是一个好习惯，还是不受欢迎。某些可访问性评估工具在评估页面时不会 运行 页面的 JS，因此它会认为这些是痛点，但实际上并非如此。
这可能会有帮助 Add ARIA inline or via script?
另请注意，如果您使用 role=button 它需要 act like a button （即提供适当的键盘交互行为）
我认为为了 progressive enhancement 的利益，最好将所有 ARIA 内联而不是依赖脚本来添加它。
如果还有其他脚本错误，如果连接断开，如果有阻塞脚本等，那么您的库可能无法发挥作用，您的补救工作将会付诸东流。
我还想以史蒂夫上面所说的关于在 link 上使用 role=button 的内容为基础。尤其是当您认为视觉样式（使 link 看起来像一个按钮）对屏幕 reader 使用毫无意义时（许多 ARIA 角色从中受益）。我更详细地解决了其他键盘交互陷阱 in another SO answer，但当您尝试将 link 变成按钮时，需要考虑以下问题：
A hyperlink (<a href>) can be fired by pressing the enter key. But a true <button> can be fired by pressing the enter key or the space bar. When a hyperlink has focus and the user presses the space bar, the page will scroll one screenful. Users of some assistive technology will expect behavior based on the element used.
此外，我提醒您不要将 tabindex=0 放在您希望可制表的元素中，除非它是交互式元素。例如，不要将它放在标题 (<h#>) 上，因为屏幕 readers（例如）已经允许按标题导航。
在工作中，我一直在优化我帮助为我们的一位客户（我不能说是谁）开发的网站之一，以便使用 WAI-ARIA 属性符合 ADA 标准。我一直想知道创建一个小型 JS 库是否会更容易，它可以执行诸如将 "role=button" 添加到我设计为看起来像按钮的锚点，将 "tabindex=0" 添加到元素 I想成为"tabable"等
我想知道用 JS 添加 WAI-ARIA 属性是否是一个好习惯，还是不受欢迎。某些可访问性评估工具在评估页面时不会 运行 页面的 JS，因此它会认为这些是痛点，但实际上并非如此。
这可能会有帮助 Add ARIA inline or via script? 另请注意，如果您使用 role=button 它需要 act like a button （即提供适当的键盘交互行为）
我认为为了 progressive enhancement 的利益，最好将所有 ARIA 内联而不是依赖脚本来添加它。
如果还有其他脚本错误，如果连接断开，如果有阻塞脚本等，那么您的库可能无法发挥作用，您的补救工作将会付诸东流。
我还想以史蒂夫上面所说的关于在 link 上使用 role=button 的内容为基础。尤其是当您认为视觉样式（使 link 看起来像一个按钮）对屏幕 reader 使用毫无意义时（许多 ARIA 角色从中受益）。我更详细地解决了其他键盘交互陷阱 in another SO answer，但当您尝试将 link 变成按钮时，需要考虑以下问题：
A hyperlink (
<a href>) can be fired by pressing the enter key. But a true<button>can be fired by pressing the enter key or the space bar. When a hyperlink has focus and the user presses the space bar, the page will scroll one screenful. Users of some assistive technology will expect behavior based on the element used.
此外，我提醒您不要将 tabindex=0 放在您希望可制表的元素中，除非它是交互式元素。例如，不要将它放在标题 (<h#>) 上，因为屏幕 readers（例如）已经允许按标题导航。