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.

References

Faulkner, S. (2016, January 26). The state of hidden content support in 2016. Retrieved December 24, 2016, from https://www.paciellogroup.com/blog/2016/01/the-state-of-hidden-content-support-in-2016/

Mozilla Developer Network. (2016a, November 15). Firefox 50 for developers. Retrieved December 24, 2016, from https://developer.mozilla.org/en-US/Firefox/Releases/50#document-main

Mozilla Developer Network. (2016b, December 1). Font-size. Retrieved December 24, 2016, from https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

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

W3C. The hidden attribute. Retrieved December 24, 2016, from http://w3c.github.io/html/editing.html#the-hidden-attribute

WebAIM. (2014, December 11). WebAIM: CSS in action – invisible content just for screen reader users. Retrieved December 24, 2016, from http://webaim.org/techniques/css/invisiblecontent/

 

Print Friendly, PDF & Email

Leave a Reply

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

Skip to toolbar