在 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">內容，以便為進一步導航做好准備。