3

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

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

在不干扰 Durandal.js 的路由器的情况下实现“跳过导航”技术的最佳方法是什么？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 + "'");
}
4

3 回答 3

1

您还可以使用本机 JS 功能：

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

更多细节在这里：https ://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

于 2014-03-19T08:10:27.827 回答
0

您可能只是不加载路由器模块。

app.configurePlugins({
    dialog: true
});

app.start().then(function () {
    viewLocator.useConvention();
    app.setRoot('viewmodels/shell');
});
于 2014-01-27T14:43:15.767 回答
0

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

于 2014-01-27T16:31:16.527 回答