3

鉴于下面的代码，对于使用屏幕阅读器导航的用户，myHyperlink.onclick当他们跟随该超链接并取消事件时，JavaScript 是否仍会执行？我的目标是让使用屏幕阅读器导航的用户直接导航到，http://www.google.com因为他们无论如何都不会真正看到图像。

<!DOCTYPE html>
<html>
 <head>
     <title>Accessibility?</title>
     <script>
     window.onload = function() {
         var myHyperlink = document.getElementById("slider-nav");
         myHyperlink.onclick = function() {
             document.getElementById("about-google").style.display = "block";
             return false;
         };
     };
     </script>
 </head>
 <body>
     <div id="main">
         <a href="http://www.google.com" id="slider-nav">Google</a>
         <div id="about-google" style="display:none;">
             <a href="http://www.google.com">
                 <img src="https://www.google.com/images/srpr/logo3w.png" alt="Google logo" />
             </a>
         </div>
     </div>
 </body>
</html>

代码也可从 JSFiddle 获得。

对于上下文，我正在尝试使轮播/滑块小部件对屏幕阅读器更加友好。

4

1 回答 1

3

无论链接是由视力正​​常的用户使用鼠标、视力正常的用户使用键盘还是屏幕阅读器使用键盘激活，浏览器行为都没有区别。在所有情况下，onclick都会调用您的处理程序，显示徽标并取消导航。对于键盘用户（无论是否有视力），键盘焦点将保持在初始文本链接上。有视力的用户会看到新图像出现，屏幕阅读器用户不会听到任何声音，并且可能会想知道为什么显然什么也没发生。

您可以自己尝试：下载免费的 NVDA 屏幕阅读器（如果您觉得它有用，请捐赠），然后针对在 IE 或 Firefox 中运行的页面进行尝试（Chrome 对可访问性的支持略有滞后，但正在迎头赶上。）对于 JSFiddle页面，在独立页面而不是窗格中处理结果通常更容易，您可以通过拉出框架 URL 并将其粘贴到新的浏览器页面 - http://fiddle.jshell 来做到这一点。 net/DXUqr/show/在你的情况下。NVDA 并不是唯一的屏幕阅读器，但它与任何用于检查基本 Web 可访问性的屏幕阅读器一样好。

（一般来说，首先无法确定用户是否在使用屏幕阅读器。最好的办法是编写适用于所有用户的易于访问的良好 HTML。）

于 2012-11-15T11:37:03.563 回答