如何与 Durandal 路由器一起使用“跳过导航”答案

【问题标题】：How to use "Skip navigation" together with the Durandal router如何与 Durandal 路由器一起使用“跳过导航”
【发布时间】：2014-01-27 09:53:57
【问题描述】：

我目前正在开发一个需要遵循“WCAG 2.0”指南的 HTML5 单页应用程序。

我使用 Twitter Bootstrap 作为前端框架，使用 Durandal.js 作为 SPA 部分。

在不干扰 Durandal.js 的router 的情况下实施“Skip navigation”技术的最佳方法是什么？ Durandal 明智的做法是在哪里放置标记的最佳位置。索引.html？外壳.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 + "'");
}

【问题讨论】：

标签： html twitter-bootstrap-3 accessibility durandal wcag2.0

【解决方案1】：

您也可以使用原生 JS 功能：

var el = document.getElementById(elID);
el.scrollIntoView(true);

【讨论】：

【解决方案2】：

您可以使用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 没问题。

【讨论】：

完美！谢谢，@Garry！

【解决方案3】：

你不能加载路由器模块。

app.configurePlugins({
    dialog: true
});

app.start().then(function () {
    viewLocator.useConvention();
    app.setRoot('viewmodels/shell');
});

【讨论】：

但我希望路由器处于活动状态。有没有办法处理这两种情况？
对不起，我的错。也许这使它更清楚？ a11yproject.com/posts/skip-nav-links