在 React.js 上使用键盘导航时，屏幕阅读器无法读取页面

Question

当用户通过单击链接组件导航到新页面时，屏幕阅读器会以正确的顺序完美地读取新页面。 如果用户通过按 Enter 或空格键选择新页面，浏览器仍会导航到正确的页面，但屏幕阅读器不会读取页面内容。

新页面导航的代码如下所示：

  <Card className={classes.root}>
     <Link to={`/event/${eventId}`} component={CardActionArea}>
        <CardMedia
          className={classes.media}
        />
        <CardContent className={classes.cardContent}>
              ...some info..
        </CardContent>
     </Link>
  </Card>

我试图通过创建一个 keyDownEvent 来解决这个问题，但它没有用：

 const elementRef = React.createRef<HTMLAnchorElement>();

  const handleKeyDown = (e) => {
    if (e.keyCode === 13 || e.keyCode === 32) {
      e.preventDefault();
      elementRef.current.click();
    }
  }

并在链接中调用它

  <Link to={`/event/${eventId}`} component={CardActionArea} onKeyDown={(e) => handleKeyDown(e)}>

任何人都知道我哪里出错了或者我应该尝试什么？

Answer 1

无法告诉你如何在 React 中做到这一点，但这是一个简单的过程，所以我相信你不会挣扎。 解决您的问题的关键部分是“导航后”标题，但是如果可以，请尝试实现所有内容，因为它将极大地改善屏幕阅读器的用户体验。

SPA 模式导航最佳实践

推荐用于在 SPA 中处理导航的方法实际上非常简单，只需两个步骤。

1. 告诉用户导航即将发生（在导航之前）
2. 让用户知道加载已完成（导航后）。

导航前（点击链接）

如果您使用 SPA 模式（因此会中断正常导航），则需要向用户发出正在加载页面的信号。 例如，我单击您的链接，您需要让我知道正在执行操作（加载.....），因为您使用e.preventDefault()或等效方法拦截了正常的浏览器行为。

最简单的方法是在解释页面正在加载的区域上使用aria-live=assertive 。 你可以谷歌如何正确实现，但本质上你会更新一个隐藏的div（ <div aria-live="assertive" class="visually-hidden">loading</div> ）的内容，第二个加载消息链接被点击。

这应该在进行任何 AJAX 调用之前完成。

导航后（加载新内容）

当新页面加载时，您需要管理焦点。

最好的方法是为每个具有tabindex="-1"页面添加一个 1 级标题 ( <h1> )。 通过使用tabindex="-1"这意味着标题不会被 JavaScript 以外的任何东西聚焦，因此不会干扰正常的文档流。

一旦页面加载并完全填充内容，您在 JavaScript 导航功能中执行的最后一个操作就是将焦点放在此标题上。

这有两个好处：

1. 它让用户知道他们现在在哪里
2. 它还让他们知道页面加载何时完成（因为 AJAX 导航不会在大多数屏幕阅读器中显示页面何时加载）。

此时，您可能还想清除<div aria-live="assertive">内容，以便为进一步导航做好准备。