If you are blessed with great vision and motor skills and aren’t familiar with the concepts of accessibility, first, be thankful, second, try to traverse a website using a screen reader like VoiceOver. It will give you a whole new perspective.
One of the most fundamental aspects of a website is its navigation. Let's take a look at how to tackle the basics of making a website navigation accessible.
If you start with the following navigation markup:
You would have an accessible navigation.
Let’s face it though, most websites out there do not have a markup that simple. Designs are complicated and require complex structures. The more intricate the markup is for a website, the more thoughtful and detailed the accessibility features have to be.
If you use a screen reader on a website that hasn’t been designed with accessibility at the forefront, you will notice that it will begin to repeat things like the navigation. Who has time for that? No one wants to listen to someone repeat something a thousand times. To fix this, we need to use something called “Skip Navigation” links, or skip links.
The markup for skip links may look something like this:
Preferably, the skip links should be one of the first items that screen readers hear. This means it should be very close to the opening of the body tag.
An approach that liquidfish uses is visually hiding the skip links at first, then on keyboard focus the links are given a transition to animate on screen (they can animate off if the keyboard isn’t used for a while). This transition allows the user to “tab” into the links and take advantage of them.
This method seems to work well for sighted mouse users who do not see the link, screen readers who will hear the link, and sighted keyboard users who will see the link when they navigate to it.
So, now that we have our skip links, we need to associate the related markup via IDs mapped to the hrefs. Here we reference the page content with the content ID:
These links allow the user to skip to the content they are interested in without having to waste time with repetitive information.
There are several more considerations for an accessible navigation including font size, contrast, and other styling issues.
If you would like have website audited for accessibility or to learn more about increasing your site’s accessibility or ADA regulations, please reach out to liquidfish!