[英]Simulate Voiceover page load in single-page pushState web application
我正在开发一个单页面应用程序(SPA),我们正在使用HTML 5 history.pushState
模拟多页面应用程序。 它在视觉上看起来很好,但在iOS Voiceover中表现不正常。 (我认为它不适用于任何屏幕阅读器,但是我首先尝试使用画外音。)
这是我想要实现的行为的一个例子。 这是两个普通的网页:
1.html
<!DOCTYPE html><html>
<body>This is page 1. <a href=2.html>Click here for page 2.</a></body>
</html>
2.html
<!DOCTYPE html><html>
<body>This is page 2. <a href=1.html>Click here for page 1.</a></body>
</html>
很好,很简单。 画外音如下所示:
网页已加载。 这是第1页。
[向右滑动]单击此处查看第2页。链接。
[双击]加载网页。 这是第2页。
[向右滑动]单击此处查看第1页。已访问。 链接。
[双击]加载网页。 这是第1页。
这里它再次作为单页面应用程序,使用历史记录操作来模拟实际的页面加载。
spa1.html
<!DOCTYPE html><html>
<body>This is page 1.
<a href='spa2.html'>Click here for page 2.</a></body>
<script src="switchPage.js"></script>
</html>
spa2.html
<!DOCTYPE html><html>
<body>This is page 2.
<a href='spa1.html'>Click here for page 1.</a></body>
<script src="switchPage.js"></script>
</html>
switchPage.js
console.log("load");
attachHandler();
function attachHandler() {
document.querySelector('a').onclick = function(event) {
event.preventDefault();
history.pushState(null, null, this.href);
drawPage();
}
}
function drawPage() {
var page, otherPage;
// in real life, we'd do an AJAX call here or something
if (/spa1.html$/.test(window.location.pathname)) {
page = 1;
otherPage = 2;
} else {
page = 2;
otherPage = 1;
}
document.body.innerHTML = "This is page " + page +
".\n<a href='spa"+otherPage+".html'>Click here for page " +
otherPage + ".</a>";
attachHandler();
}
window.onpopstate = function() {
drawPage();
};
(请注意,此示例不适用于文件系统;您必须从Web服务器加载它。)
这个SPA示例在视觉上看起来与简单的多页面示例完全相同,只是第2页“加载速度更快”(因为它根本没有真正加载;它在JS中都发生了)。
但在画外音方面,它并没有做正确的事情。
网页已加载。 这是第1页。
[向右滑动]单击此处查看第2页。链接。
[双击]点击此处查看第1页。访问。 链接。
[重点是链接! 向左滑动]这是第2页。
[向右滑动]单击此处查看第1页。已访问。 链接。
[双击]加载网页。 这是第1页。
重点是链接,它应位于页面顶部。
如何告诉Voiceover整个页面刚刚更新,读者应该从页面顶部继续阅读?
Jorgen的回答是基于另一个StackOverflow线程让我走上正轨。
实际修复不是将整个页面包装在<div tabindex=-1>
,而是围绕第一部分(“这是页面N”)创建<span tabindex=-1>
并将其集中。
function drawPage() {
var page, otherPage;
// in real life, we'd do an AJAX call here or something
if (/spa1.html$/.test(window.location.pathname)) {
page = 1;
otherPage = 2;
} else {
page = 2;
otherPage = 1;
}
document.body.innerHTML = '<span tabindex="-1" id="page' + page + '">This is page ' + page +
'.</span>\n<a href="spa'+otherPage+'.html">Click here for page ' +
otherPage + '.</a>';
document.getElementById('page' + page).focus();
setTimeout(function() {
document.getElementById('page' + page).blur();
}, 0);
attachHandler();
}
请注意,在此示例中,我们还会在超时时模糊焦点; 否则,非屏幕阅读器浏览器会在跨度周围绘制一个可见的蓝色焦点矩形,这不是我们想要的。 模糊焦点不会影响iOS VO阅读器的焦点。
根据Dan Fabulich的回答 ,这是一个进一步的改进。
问题是关于使用pushState()
更新页面,所以我将从包含要更新的主要内容区域的语义HTML结构开始。
<body>
<header role="banner">
<nav role="navigation">
<a href="page1.html" onclick="updatePage(1, 'Page 1', this.href); return false;" aria-current="true">Page 1</a> |
<a href="page2.html" onclick="updatePage(2, 'Page 2', this.href); return false;">Page 2</a>
</nav>
</header>
<main role="main">
<!-- This heading text is immediately after the nav, so it's a logical place to set focus. -->
<h1 id="maintitle" tabindex="-1">Page 1</h1>
<div id="maincontent">
<p>Lorem ipsum</p>
</div>
</main>
<footer role="contentinfo">© 2017</footer>
</body>
JavaScript的:
function updatePage(pageNumber, pageTitle, pagePath) {
var mainContent;
if (pageNumber == 1) {
mainContent = '<p>Lorem ipsum</p>';
} else if (pageNumber == 2) {
mainContent = '<p>Dolor sit amet</p>';
} else {
return;
}
document.getElementById('maincontent').innerHTML = mainContent;
// TODO: Update the address bar with pushState()
// TODO: Update the nav links, so only one link has aria-current="true"
// Keep the browser title bar in sync with the content.
document.title = pageTitle + ' - My Example Site';
// Set focus on the visible heading, so screen readers will announce it.
var mainTitleElement = document.getElementById('maintitle');
mainTitleElement.innerHTML = pageTitle;
mainTitleElement.focus(); // TODO: Add a 0ms timer, to ensure the DOM is ready.
}
关于焦点轮廓(也称为焦点环):
blur()
。 屏幕阅读器通常可以恢复,但他们无法重新宣布当前的线路,而且它是WCAG禁忌。 span {outline:none}
,但这是有风险的。 我只会在tabindex=-1
静态文本上使用它,这并不理想,因为它让视力不佳的键盘用户迷失方向。 我没有iPhone,但在另一个stackoverflow线程中提供了解决方案。 将内容包装在tabindex为-1的元素中,并以编程方式将焦点设置在该元素上。
function drawPage() {
var page, otherPage;
// in real life, we'd do an AJAX call here or something
if (/spa1.html$/.test(window.location.pathname)) {
page = 1;
otherPage = 2;
} else {
page = 2;
otherPage = 1;
}
document.body.innerHTML = '<div tabindex="-1" id="page' + page + '">This is page ' + page +
'.\n<a href='spa'+otherPage+'.html'>Click here for page ' +
otherPage + '.</a></div>';
document.getElementById('page' + page).focus();
attachHandler();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.