There’s a few simple accessibility tips that I’ve been meaning to talk about, some of which I took on to improve the experience on this site. Today’s subject — skip navigation.

What is it?
Quite simply, the skip navigation technique is creating a link on your site that anchors the visitor down to where the actual content on the page begins.

Why is that important?
For people with no disabilities, the ability to get right to the meat of the page and read what’s important is straightforward. Ignore the navigation, ignore whatever else you want — and just find what you need.

Those using screen readers have a different experience. Screen readers read everything from the top down. So when a user is going from page to page, they have to endure listening to all the navigation read first, as well as any other elements such as site search, header imagery, and sub-navigation. You can imagine how tedious this gets for someone just wanting to read what they came to the site for.

Also, those who use the keyboard for navigating a page must tab through all of those elements to advance as well.

In those cases, skip navigation enables one to get right to the content.

How do you do it?
Though there are few header elements on the art of web accessibility, I nonetheless have a “Jump to Content” link at the top.

The coding is quite simple:

<div id=”skipelements”>
<a href=”#maincontent”>Jump to Content</a>
</div>
…
<a name=”maincontent”></a>

Pretty much your standard, old-school anchor link.

There are a couple variances out there. You can make the skip navigation hidden to most users but able to be read by a screen reader. Frankly, the easiest, most straightforward way is to just put it at the very top of your site, in plain sight.

Those without a need for it will just ignore it. It’s not like it’s an eye sore either. Quite honestly, and perhaps in some cases unfairly, when I see skip navigation on a site, it gives me some measure of comfort that the developers at least have some consideration for web accessibility.

Common iterations of the wording are “skip navigation”, “skip to main content”, etcetera.

Like I said, while there are other ways to do this, such as hidden and driven through your stylesheet, I say just display it loud and proud, at the top of your site.

Tags: screen readers, skip navigation

I’ve had the opportunity recently to do some basic accessibility testing on some sites, and thought I’d share just a few of the tools I use to make certain aspects easier. There are many out there, with varying degrees of usefulness. This list barely scratches the surface.

Firefox Accessibility Extension 1.4.5.0
This toolbar gives you a handful of features that aid in accessibility testing. You can run a report that notes accessibility failures. You can easily identify important elements of a page such as title, headings, frames, and links. It gives you image options such as viewing alt tags in context, or viewing the page without images altogether.

There are also built-in validation offerings, as well as color contrast findings and keyboard navigational aids. It directs you to options such as the Cynthia Says Web Content Accessibility Report and WebAIM WAVE

Web Developer 1.1.6 add-on for Firefox
Another Firefox extension that enables you to check out aspects of accessibility is Web Developer for Firefox. You can easily disable elements such as CSS and images, as well as run automated tests such as Validate CSS, Validate HTML, and Validate Section 508, which utilizes Cynthia Says.

Juicy Studio Luminosity Colour Contrast Ratio Analyser
There are numerous tools out there for testing color contrast, but I find myself in the habit of using the one at Juicy Studio. In determining if text on backgrounds (colors or imagery) meets the minimum WCAG 2.0 requirement of 4.5:1 (3:1 for larger text), all you have to do is enter the foreground and background colors and you’ll see how you’re doing.

GrayBit.com
This is an interesting tool that renders a site in grayscale. By pulling color out of the equation, it enables you to get a raw sense of visual contrast.

Of course, none of these really do everything for you. Looking right in the code of a page, or carefully navigating through with your own senses offer invaluable insights as to how well a site has been set up.

Tags: accessibility tools, color contrast, firefox