Skip to content

A bit more on this to follow on from my last entry and to provide my references.

I added a skip to content link as part of my development of the core navigation in the site. This is assist those who use screen readers of navigate via keyboard. I was prompted to do this based on my previous experience with accessibility requirements and based on advice in the Inclusive Design Patterns book (Pickering, 2016).

This was not as simple to accomplish as you might think and the resulting function behaves differently in each browser, however regardless the “skip” option is part of the tab-index as should enhance the navigation of the site.

Here is how it works in Chrome – not aesthetically pleasing, but satisfies the requirement. The video shows what happens when the user visits the page and presses the tab key, this reveals the skip to content button.


Faulkner, S. (2016, January 26). The state of hidden content support in 2016. Retrieved December 24, 2016, from

Mozilla Developer Network. (2016a, November 15). Firefox 50 for developers. Retrieved December 24, 2016, from

Mozilla Developer Network. (2016b, December 1). Font-size. Retrieved December 24, 2016, from

Pickering, H. (2016). Inclusive Design Patterns (Kindle ed.). Freiburg, Germany: Smashing Magazine GmbH.

W3C. The hidden attribute. Retrieved December 24, 2016, from

WebAIM. (2014, December 11). WebAIM: CSS in action – invisible content just for screen reader users. Retrieved December 24, 2016, from


Print Friendly, PDF & Email

Leave a Reply

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

Skip to toolbar