Skip to content

Question

I'm trying to create a website that meets certain accessibility standards with tab clicks. I have a navigation menu on the left side of the screen and my users are requesting a "Skip to content" link so they don't have to constantly cycle through multiple links to get to where the content is.

However, I'm using AngularJS in my web app, and if I use the standard skip to content functionality (example: http://accessibility.oit.ncsu.edu/training/accessibility-handbook/skip-to-main-content.html), it won't work. I'm already using anchors (with #s) for the Angular code.

Is there any other way to implement this? I have a particular div tag that I would like the tab selection to go to. It should go to one of the elements inside the div.

Answer 1

I've used angular-scroll to good effect before. It's lightweight (8.5kB), easy to use, and even takes care of scrolling animations for you. It also meets accessibility standards, as the Tab key can be used to navigate just like a normal anchor tag.

Implement like this:

JS

angular
.module('app', ['duScroll'])
.controller('MainCtrl', function ($scope, $document) {
  //Controller logic here
}

HTML

<a href="#nav-one" du-smooth-scroll duration="1500">Navigation Link</a>

<!-- further down the page -->

<div id="nav-one">
  Content goes here.
</div>

Working CodePen for reference: http://codepen.io/Pangolin-/pen/dPQRZa