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. [video width=“324” height=“258” mp4=“”][/video]


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

Fiona MacNeill
Fiona MacNeill
Learning Consultant &
UX Researcher

Passionate about creating inclusive and accessible experiences, tools, and services for learning and doing.