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

Question

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

Answer 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;
}

Answer 2

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

这和你要求的唯一区别是你没有宣布"；文件加载"；相反，您将<h1>集中在页面上，因为这对屏幕阅读器用户更有用。

装载前

如果您使用SPA模式(从而中断正常导航(，则需要向用户发出页面正在加载的信号。

例如，我点击了你的链接，当你用e.preventDefault()或等效程序拦截正常的浏览器行为时，你需要让我知道正在执行一个操作(加载……(。

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

您可能想在视觉上隐藏这个aria-live区域(这样只有屏幕阅读器才能访问它(，所以我在下面的代码段中包含了一个这样做的类，但对于演示，我保留了该区域可见。这里有一个链接，链接到我关于为什么使用这个类来隐藏内容的原始讨论。

加载后

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

做到这一点的最佳方法是为每个具有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>