How to use "Skip navigation" together with the Durandal router

StackOverflow https://stackoverflow.com/questions/21377693

Frage

I'm currently working on a HTML5 single page application which needs to follow the "WCAG 2.0" guidelines.

I'm using Twitter Bootstrap as frontend framework, and Durandal.js for the SPA part.

What would be the best way to implement the "Skip navigation" technique without interfering with Durandal.js' router? And where is the best place to put the markup, Durandal wise. index.html? shell.html? ( index.html might be too early, since my i18n module probably isn't loaded yet, but thats an other question ;) )

This is the an example using Bootstrap (will only be visible for screen readers), but since Durandal has a hash based routing system, we might have a problem.

<body>
  <a href="#content" class="sr-only">Skip to main content</a>
  <div class="container" id="content">
    The main page content.
  </div>
</body>

Thanks.

--- EDIT ---

This is how I implemented it:

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 + "'");
}
War es hilfreich?

Lösung 2

You can use JQuery focus() method to jump to the main content on the page.

For example:

<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>

As you are using durandal (congrats by the way) I am making the assumption that JavaScript is ok.

Andere Tipps

You could also use native JS-functionality:

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

More details here: https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

You could just not load the router module.

app.configurePlugins({
    dialog: true
});

app.start().then(function () {
    viewLocator.useConvention();
    app.setRoot('viewmodels/shell');
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top