Making Navigation Accessible

When navigation is not present, is broken, or is not readable by all users, web content becomes inaccessible. In order for your web content to be accessible, a means must exist for users to find their way around, regardless of disability.

You’re most likely here because you need to make sure the site navigation you use is accessible to people with disabilities.

You might have a specific problem, like:

how to make navigation keyboard accessible
how to avoid keyboard traps
how to handle keyboard focus
how to use skip links to enhance accessibility
how to use breadcrumbs in an accessible way
what to do when style sheets are disabled

Perhaps you need a comprehensive list of likely issues with the accessibility of navigation in your web content – and how to address them. Or maybe you just want to ask a direct question and get a clear, expert response.

You’re in the right place.

OzWiki will tell you what you need to know to use navigation in an accessible way. The Navigation section details 30 accessibility problems and how to address them, demonstrating compliance with 20 WCAG Level A success criteria, and 10 WCAG Level AA success criteria.

As a subscriber, you’ll also be able to request further or more detailed information relating to your specific situation.

See an example

Lists have been used to represent navigation hierarchy without hidden structural labels

Category	Navigation
Topic	Improper use
WCAG SC 2.4.1: Bypass Blocks	A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html See more errors for this SC
Level	A
Technique(s)
Impact	Medium

Error

Navigation is nested using a series of unordered lists. Therefore the hierarchy of the navigation will be unclear to some users (for example, screen reader users).

Incorrect Example(s)

1. Style sheets disabled

Nested bulleted lists have been used to represent the hierarchy in the navigation

Correct Example(s)

1. Style sheets disabled

Nested bulleted lists have been used to represent the hierarchy in the navigation, however the level of the navigation appears in text prior to each link - for example "Level 1: About Us"

2. Style sheets disabled

Anti-Discrimination Commission QLD navigation. Site navigation says "The top level navigation links" and bulleted lists and "The second level navigation links"

Solution

Use hidden structural labels for navigation and sub-navigation.

OzWiki is an accessible resource that provides best known methods to achieve A & AA level design and interaction for web content in areas such as Audio, Video, Link, Captcha, Maps, Navigation and more. These outlined accessibility errors, examples and solutions help you become 508 compliant by demonstrating associated WCAG 2.0 success criteria and techniques.

Gain access to more detailed information on all OzWiki categories for only $39/month by purchasing a subscription today! You can cancel your subscription at any time.