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

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

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

  <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();
    }
  }

const elementRef=React.createRef（）；
常量handleKeyDown=（e）=>{
如果（e.keyCode==13 | | e.keyCode==32）{
e、 预防默认值（）；
elementRef.current.click（）；
}
}

并在链接中调用它

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

handleKeyDown（e）}>

---

有人知道我哪里出了问题，或者我应该试一试吗？

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

SPA模式导航最佳实践 建议在SPAs中处理导航的方法实际上非常简单，分为两个步骤

告诉用户导航即将发生（导航前）

让用户知道加载已完成（导航后）

导航前（单击链接） 如果使用SPA模式，则需要向用户发出页面正在加载的信号（从而中断正常导航）。e、 g.我单击您的链接，您需要让我知道，当您使用

e.preventDefault（）

或同等工具拦截正常浏览器行为时，正在执行一个操作（加载…）

最简单的方法是在解释页面正在加载的区域上使用。你可以在谷歌上搜索如何正确地实现这一点，但本质上你会在点击链接后用一些加载消息更新隐藏div（

加载

）的内容

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

导航后（加载新内容） 加载新页面时，需要管理焦点

最好的方法是在每个有

tabindex=“-1”

的页面中添加一个级别1标题（

）。通过使用

tabindex=“-1”

这意味着除了JavaScript之外，标题不会被任何东西聚焦，因此不会干扰正常的文档流

页面加载且内容完全填充后，JavaScript导航函数中执行的最后一个操作是将焦点放在该标题上

这有两个好处：

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

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

---

此时，您可能还需要清除

内容，以便为进一步导航做好准备。

如果他们使用键盘，您是否正确更新了URL？首先按Enter或Space时，检查路由器是否正确更新页面URL。如果没有，则在加载后将焦点管理到页面上的

。如果第一个选项对如何做不起作用，我可以写下答案（一般的指导，我不擅长React！）。是的，它确实可以导航到完全相同的URL。如果你能让我知道如何选择h1，那就太好了，因为我搜索了一些，似乎只有输入元素可以被关注。如果我知道我应该做什么，我想我能想出反应点。没问题，我已经为你准备了一些东西。如果您需要进一步澄清，请告诉我。