在 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 aria-live="assertive" class="visually-hidden">loading</div>单击链接时使用一些加载消息更新隐藏 div ( ) 的内容。

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

导航后（加载新内容）

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

做到这一点的最佳方法是<h1>为每个包含tabindex="-1". 使用tabindex="-1"它意味着标题不会被 JavaScript 以外的任何东西聚焦，因此不会干扰正常的文档流。

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

这样做有两个好处：

1. 它让用户知道他们现在在哪里

2. 它还让他们知道页面加载何时完成（因为 AJAX 导航不会在大多数屏幕阅读器中宣布页面加载时间）。

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