使用 JAWS 时如何使 div 元素可通过箭头键导航

Question

我想在 JAWS 运行时使一个div元素可以通过箭头键导航。 div不应使用TAB键导航； 所以使用tabindex是不适用的。

这是 html/reactjs 结构的示例片段。

const label1 = 'First label';
const label2 = 'Second label';
const prefix = 'Prefix';
const suffix = 'Suffix';

const screenReaderText = `${prefix} ${label1} ${suffix} ${label2}`;

return (
  <>
    <h1>Heading</h1>
    <div className="container" aria-label={screenReaderText}>
      <div aria-hidden="true">{label1}</div>
      <div aria-hidden="true">{label2}</div>
    </div>
    <footer>Footer</footer>
  </>
);

两个嵌套的div不应该对无障碍 API 可用； 因此使用aria-hidden="true" 。 使用 JAWS 时， className="container"的div应该可以通过箭头键导航。 此外，当导航到容器div时，JAWS 应该读出一个 label，它是两个内部div内容的组合和修改文本。

导航流程应该是： h1 -> 容器div -> footer

我猜我应该对容器div应用适当的role 。 tree角色提供了预期的效果，但阅读它表明这不是此用例的最佳实践。

Answer 1

如果子元素具有aria-hidden="true" ，您在<div>中导航到什么？

如果您希望箭头键起作用，那么您需要在<div>上设置一个role ，该角色将导致 JAWS（或 NVDA）自动从浏览模式切换到 forms 模式。 此处列出了执行此操作的有效角色： https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#x6-1-fundamental-keyboard-navigation-conventions

Answer 2

为避免对“导航”元素的混淆：您希望屏幕阅读器像常规文本一样在浏览模式下阅读文本，JAWS 已经通过箭头键逐行读取文本。

此外，整个文本Prefix Label1 Suffix Label2应该在一行中，即使它在视觉上显示在单独的行中。

如果您希望文本仅显示给屏幕阅读器等辅助技术，则著名的visually-hidden CSS class 发挥作用（fka sr-only ）。

Scott O'Hara 对它的工作原理进行了很好的解释：包容性隐藏

 /* ie9+ */.visually-hidden:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

 <h1>Heading</h1> <div className="container"> <div class="visually-hidden">Prefix Label1 Suffix Label2</div> <div aria-hidden="true">Label1</div> <div aria-hidden="true">Label2</div> </div> <footer>Footer</footer>

为什么不aria-label ？

通过aria-label或aria-labelledby提供的元素的可访问名称在浏览模式下（阅读时）不会公布。

它仅用于构建 fe 标题或地标的列表，并且在使用Tab导航时在表单模式下。

默认情况下，可访问的名称是根据文本内容构建的，因此如果您添加角色或交互，则考虑使用visually-hidden 。

视觉文本和可访问文本之间的不匹配

由于您问题中的文本可能不是生产中使用的文本，因此我想指出，重要的是不要在视觉文本和辅助技术可访问的文本之间转移太多。

很多屏幕阅读器用户是有视力的，并且依赖于两者的匹配。

例如，将两个标签直观地显示在两个单独的行中，让 JAWS 用户期望他们需要使用两次向下箭头，而不是一次。

此外，如果缺少前缀和后缀，有视力的用户如何在没有屏幕阅读器的情况下理解这两个标签？