javascript - preventDefault()，滚动和可访问性

我正在向站点添加一个JavaScript驱动的子窗口。基本上，用户界面的一部分被放置在屏幕的左边缘，直到用户触发一个链接；然后它被移动到一个可见的位置。我有一系列的5个test cases，但是还没有声誉点来将它们单独链接起来。
为了便于访问，我希望使用包含文档片段的链接，因此：

<a href="#quicklinks" id="quicklinks-trigger">Quick Links</a>

使用相应的JavaScript（使用jQuery）：

$("#quicklinks-trigger").click(function(e){
 $("#shadow").removeClass("default");
 $("#shadow").addClass("active");
});

快速链接将屏幕阅读器的内部光标（也称为插入符号）重定向到新显示的UI的开头。“快速链接”子窗口中有一个相应的链接，它将光标重定向回文档的主要部分（<a href="#main" id="close-quicklinks"></a>）。您可以在测试用例1中看到这一点。如果使用屏幕阅读器（我正在使用NVDA进行测试）收听，屏幕阅读器会在触发链接时愉快地跳转到快速链接，并在触发快速链接关闭链接时返回到主文档。
它还可以根据文档片段上下滚动页面，这既丑陋又烦人。可以使用window.preventDefault()--请参阅测试用例2，它工作非常顺利，不会在文档中滚动，因此：

$("#quicklinks-trigger").click(function(e){
 $("#shadow").removeClass("default");
 $("#shadow").addClass("active");

e.预防违约（）；
});
不幸的是，对preventDefault（）的调用还阻止浏览器将光标移动到正确的位置。盲用户可以在那里触发链接，然后屏幕阅读器将按源代码顺序进入下一个项目，而不是快速链接UI最简单的解决方法是将定义快速链接子窗口的HTML放在触发器链接之后；但是我不能这么做，因为这是注定的CMS不能很好地处理插入菜单的大块HTML。
我试过其他方法来消除滚动。测试用例3手动向后滚动窗口：

$("#quicklinks-trigger").click(function(e){
 $("#shadow").removeClass("default");
 $("#shadow").addClass("active");
 window.setTimeout(function(){ scrollTo(0,0); }, 1);
});

... 它可以工作，但有明显的抖动效果，因为它向下滚动然后向上滚动，所以这并不比测试用例1好。
在测试用例4中，我尝试将preventDefault（）与focus（）结合使用，希望手动移动内部光标：

$("#quicklinks-trigger").click(function(e){
 $("#shadow").removeClass("default");
 $("#shadow").addClass("active");
 $("#quicklinks").focus();
 e.preventDefault();
});

但是它没有工作，因为快速链接是一个DIV，而不是一个可聚焦的元素。我想我可以在QuickLinksHTML中添加一个隐藏的可聚焦元素，但那会很笨拙。
在测试用例5中，我尝试从目标元素中删除ID属性，用onhashchange事件重写片段标识符，然后还原ID：

function cfl_hash(fragment){
 // Get the section the fragment refers to.
 var target = $(fragment);

 // Save its current ID.
 var id = target.attr("id");

 // Remove the ID so the browser won't scroll.
 target.attr("id","");

 // Rewrite the hash to the desired fragment, only if onhashchange event supported.
 if("onhashchange" in window){ location.hash = fragment; }

 // Put the ID back in place.
 target.attr("id", id);
}

$("#quicklinks-trigger").click(function(e){
 $("#shadow").removeClass("default");
 $("#shadow").addClass("active");
 cfl_hash("#quicklinks");
});

这产生了不愉快的效果，允许滚动，但阻止光标移动。我认为我在ID交换中的事件序列是错误的；这应该可以抑制滚动，尽管我怀疑它是否允许光标移动。
如果不取消屏幕阅读器用户的光标重定向，就无法取消有视力用户的滚动，这真是令人恼火。
到目前为止，我只测试过Firefox和NVDA。我不知道在浏览器和屏幕阅读器的其他组合中，这种情况会如何发展。
建议？

最佳答案

我提出了一个解决方案，它允许使用文档片段链接，允许屏幕阅读器的插入符号重定向，并且不滚动视窗。方法是
在链接到的元素顶部放置隐藏元素
链接到隐藏元素，而不是它后面的内容
使用固定位置将隐藏元素移动到与视口顶部齐平
这样，当您单击指向隐藏元素的链接时，浏览器会尝试将屏幕“滚动”到适当的位置，但它已经在视区的顶部，因此不会发生实际的滚动。插入符号重定向发生，因此屏幕阅读器用户可以到达链接指向的位置。
有几个怪癖。在Opera、Safari和Chrome中，单击按此方式排列的链接将导致滚动，但前提是用户已经向下滚动。我不知道这是为什么，也许他们没有更新屏幕左侧的固定位置元素的位置？在任何情况下，这个问题只影响一组高度特定的情况，而这些情况通常可以通过合理的页面布局来避免。因此，我认为优点（可访问，相对简单的代码）大于缺点（在某些浏览器和环境中有轻微的视觉怪癖）。
有关此技术的更完整讨论，请参见：
http://www.accessifyforum.com/viewtopic.php?p=77132
希望这能帮助别人。

关于javascript - preventDefault()，滚动和可访问性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4126207/