如何让屏幕阅读器读取文档加载和文档加载？

Posted 2023-03-12

【中文标题】如何让屏幕阅读器读取文档加载和文档加载？

【英文标题】：how to make screen reader read document loading and document loaded?

【发布时间】：2020-12-16 05:04:07

【问题描述】：

如何使屏幕阅读器在加载文档时读取文档加载以及在react中加载文档组件时加载文档？

【参考方案1】：

在加载时向组件添加aria-busy="true" 和aria-hidden="true" 属性将暂时隐藏屏幕阅读器中的内容。

对于公告，在其他地方创建一个<div role="status"> 并向其添加/删除子元素，这些子元素将在加载/加载时宣布。

最终结果：

<main>
  <Document
    aria-busy=isLoading ? 'true' : null
    aria-hidden=isLoading ? 'true' : null>
  </Document>
  <div role="status" class="visually-hidden">
    isLoading ? (
      <span key="loading">
        Document loading
      </span>
    ) : (
      <span key="loaded">
        Document loaded
      </span>
    )
  </div>
</main>

key 属性用于确保 React 不会重用相同的 <span> 元素。

.visually-hidden 类使它除了屏幕阅读器之外是不可见的：

.visually-hidden 
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;

【参考方案2】：

您需要了解如何在 React 中执行以下操作，但 AJAX 页面加载的原则适用于所有 SPA。

这与您要求的唯一区别是您不宣布“已加载文档”，而是将<h1> 聚焦在页面上，因为这对屏幕阅读器用户更有用。

加载前

如果您使用的是 SPA 模式（因此会中断正常导航），您需要向用户发出页面正在加载的信号。

例如我单击您的链接，当您使用 e.preventDefault() 或等效项拦截正常浏览器行为时，您需要让我知道正在执行某个操作（正在加载.....）。

最简单的方法是在说明页面正在加载的区域上使用aria-live=assertive。

您可能希望在视觉上隐藏此 aria-live 区域（以便只有屏幕阅读器可以访问它）所以我在下面的 sn-p 中包含了一个执行此操作的类，但是对于演示，我让该区域可见. Here is a link to my original discussion on why to use this class to hide content.

加载后

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

执行此操作的最佳方法是为每个具有tabindex="-1" 的页面添加一个级别 1 标题 (<h1>)。

页面加载后，您在 javascript 导航功能中执行的最后一个操作是将焦点放在此标题上，然后清除 aria-live 区域

这有两个好处：

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

通过使用tabindex="-1"，这意味着标题不会被 JavaScript 以外的任何东西聚焦，因此不会干扰正常的文档流。

示例

var link = document.querySelector('a');
var liveRegion = document.querySelector('p');
var originalPage = document.querySelector('.currentPage');
var newPage = document.querySelector('.newPage');

link.addEventListener('click', function(e)
    e.preventDefault();
    liveRegion.innerhtml = "loading";
    simulateLoading();
);

//this function simulates loading a new page
function simulateLoading()
    window.setTimeout(function()
    //this bit just hides the old page and shows the new page to simulate a page load
    originalPage.style.display = "none";
    newPage.style.display = "block";
    
    
    //////////////ACTUAL CODE/////////////////
    
        // grab the heading on the new page (after the new page has loaded fully)
        var mainHeading = document.querySelector('.newPage h1');
        //focus the main heading
        mainHeading.focus();
        // reset the aria-live region ready for further navigation        
        liveRegion.innerHTML = "";
    , 1000);

.newPage
   display:none;

<div class="currentPage">
<h1>Current Page</h1>
<a href="#">Click me to navigate</a>
<p class="live-region visually-hidden" aria-live="assertive"></p>
</div>


<div class="newPage">
<h1 tabindex="-1">New Page Heading Focused Once Loaded</h1>
<button>Just a button for something to focus so you can see you can't refocus the H1 using the Tab key (or shift + Tab)</button>
<p>Below is the visually hidden class I mentioned, this can be used to hide the aria-live region visually if you wish, I have left it visible for demonstration purposes.</p>
<pre>
.visually-hidden  
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */


</pre>


</div>