我正在向站点添加一个基于 JavaScript 的子窗口。基本上，部分 UI 位于屏幕左边缘，直到用户触发链接；然后它被移动到一个可见的位置。我有一系列五个测试用例，但还没有声誉点来单独链接它们。
出于可访问性目的，我想使用包含文档片段的链接，因此：
<a href="#quicklinks" id="quicklinks-trigger">Quick Links</a>
使用相应的 JavaScript（使用 jQuery）：
$("#quicklinks-trigger").click(function(e){
$("#shadow").removeClass("default");
$("#shadow").addClass("active");
});
#quicklinks HREF 将屏幕阅读器的内部光标（也称为插入符号）重定向到新显示的 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(); });
不幸的是，调用 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();
});
但它不起作用，因为#quicklinks 是一个 DIV，而不是一个可聚焦的元素。我想我可以在快速链接 HTML 中添加一个隐藏的可聚焦元素，但这会很笨拙。
在测试用例 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 进行了测试。我不知道这将如何在浏览器和屏幕阅读器的其他组合中发挥作用。
建议？