A better “skip navigation” link

accessible-skip-navWhile working with an accessibility consultant to make sure that CourseArc is 100% accessible, we discovered how challenging it is to create a great “skip navigation” link. Most of our go-to resources about accessibility, like WebAim, recommend a really simple technique of creating a link to an ID on the page.

While this technique does scroll the browser down to the main content area of a page, it doesn’t change the focus in many browsers. That means that a user may select the skip link, but if they tab again to navigate through the page, they are forced to tab through all of the links they just attempted to skip over!

We found this simple snippet of JavaScript that solves this issue and have implemented it within CourseArc.


Leave a Reply

Your email address will not be published. Required fields are marked *