如何与Durandal路由器一起使用Skip导航
如何与Durandal路由器一起使用Skip导航
提问于 2014-01-27 09:53:57
我目前正在开发一个HTML5单页应用程序，它需要遵循“WCAG2.0”指导原则。
我使用Twitter作为前端框架，使用Durandal.js作为SPA部分。
在不干扰跳过导航‘路由器的情况下，实现“Durandal.js”技术的最佳方法是什么？杜兰达尔·怀斯，哪里是放置标记的最佳地点。index.html？shell.html？( index.html可能太早了，因为我的i18n模块可能还没有加载，但这是另一个问题;)
这是一个使用Bootstrap的示例(只对屏幕阅读器可见)，但是由于Durandal有一个基于哈希的路由系统，我们可能会遇到问题。
<body>
<a href="#content" class="sr-only">Skip to main content</a>
<div class="container" id="content">
The main page content.
</div>
</body>谢谢。
--编辑--
我就是这样实现它的：
HTML:
<a tabindex="1" href="#" id="skipNavigation" data-bind="click: skipNavigation">
Skip to main content
</a>CSS:
#skipNavigation {
background-color: transparent;
color: transparent;
}
#skipNavigation:focus {
background-color: #f5c03a;
color: #222;
}JS:
skipNavigation: function () {
var module = router.activeInstruction().config.moduleId.split("/")[1],
$elem = $('#content');
if (module === "xxx") {
$elem = $('.selector');
} else if (module === "yyy") {
$elem = $('.selectorY');
}
$elem.focus();
system.log("Skipping navigation for page '" + module + "', and setting focus to element '" + $elem.selector + "'");
}回答 3
Stack Overflow用户
回答已采纳
发布于 2014-01-27 16:31:16
您可以使用JQuery focus()方法跳转到页面上的主要内容。
例如：
<body>
<a href="javascript:$('#content').focus();" class="sr-only">Skip to main content</a>
<div class="container" id="content">
The main page content.
</div>
</body>当您使用durandal (顺便说一下，祝贺您)时，我假设JavaScript是好的。
Stack Overflow用户
发布于 2014-03-19 08:10:27
您还可以使用本机JS-功能：
var el = document.getElementById(elID);
el.scrollIntoView(true);这里有更多详细信息：https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView
Stack Overflow用户
发布于 2014-01-27 14:43:15
你不能加载路由器模块。
app.configurePlugins({
dialog: true
});
app.start().then(function () {
viewLocator.useConvention();
app.setRoot('viewmodels/shell');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21377693
复制相关文章
相似问题
腾讯云开发者
