-
Book Overview & Buying
-
Table Of Contents
HTML5 Multimedia Development Cookbook
The ability to skip repeated elements like navigation is beneficial to those who use screen readers. Imagine when visiting a website, you read every single navigation element before you could proceed to the main content. That would be annoying, wouldn't it? Well, it can be for those using screen readers too. Let us take a look at an easy way to not annoy a part of our audience.
What we are going to do in this example is create a simple but special invisible anchor that will give our screen reader friends the option to skip over our navigation and get right to the good stuff: our site content.
If you have been around HTML for a while, you have no doubt created a skip navigation at some point. It probably looked something like this:
<a class="skip" href="#content">Skipnav</a>
Your CSS would include something like this to make the anchor invisible:
.skip {display: none}
The first div that contained your primary content then included...
Change the font size
Change margin width
Change background colour