给定以下代码,对于使用屏幕阅读器进行导航的用户,当他们跟随该超链接并取消事件时,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>

Code also available from JSFiddle.

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

最佳答案

视线使用者是使用鼠标,视线使用者是使用键盘还是屏幕阅读器是使用激活的链接,在浏览器行为上没有任何区别。在所有情况下,都会调用onclick处理程序,显示徽标,并取消导航。对于键盘用户(无论是否可见),键盘焦点将保留在初始文本链接上。有视力的用户将看到新图像出现,屏幕阅读器用户将听不到任何声音,并可能想知道为什么显然没有任何反应。

您可以自己尝试:download the free NVDA screenreader(如果发现有用,请捐款),然后在IE或Firefox中运行的页面上尝试(Chrome对可访问性的支持稍有滞后,但正在赶上。)对于JSFiddle页面,通常在独立页面(而不是 Pane )中更轻松地处理结果,您可以通过拉出框架URL并将其粘贴到新的浏览器页面中(在您的情况下为http://fiddle.jshell.net/DXUqr/show/)来实现。 NVDA不是唯一的屏幕阅读器,但是它与任何用于检查基本Web可访问性的屏幕阅读器一样好。

(通常来说,首先无法确定用户是否正在使用屏幕阅读器。最好的选择是编写对所有用户都适用的易于访问的HTML。)

关于javascript - 当JavaScript取消超链接 `click`事件时,屏幕阅读器会做什么?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13390096/

10-09 23:54