Navigable Archives

‘Page Break Navigation’ requires you to provide a way to navigate between page break locators.

Page break locators are a way to guide users through meaningful points within content. For example, an online version of a book might use page markers to match up with a print edition.

Users with visual impairments or those who rely on digital means to consumer content can use page break locators to find a certain point within the text. For example, if a teacher asks them to read pages 34 – 59 before the next lesson.

How to Pass ‘Page Break Navigation’

If your content has page break locators, provide users with a way to navigate to and between them:

In HTML you can add page list navigation using <nav role=”doc-pagelist”>
You could then add designations using <span id=”pg1”>

‘Page Break Navigation’ Tips

This only applies when you have content with page break locators, it’s not a requirement to add these to your content.

Introduction

Focus indicators help users see which element on a page currently has focus, they are especially useful for people with low-vision, memory or mobility impairments.

Where a focus indicator is used to show an element has current focus, it must be clearly visible and distinguishable. This goes beyond 2.4.11 to increase contrast requirements and expands the minimum area of the indicator.

How to Pass ‘Focus Appearance (Enhanced)’

When a component receives keyboard focus:

The focus indicator has a contrast ratio of at least 4.5:1 between focused and unfocused states;
The element within focus isn’t hidden; and
The focus indicator area is at least 2 CSS pixels around the perimeter.

‘Focus Appearance (Enhanced)’ Tips

It may sound basic, but a thick black border around an element when it receives focus will often do the trick (unless your website has a very dark background colour of course).

You could also change the background colour of the whole element on focus.

If you’re worrying about pixel sizes, your indicator probably isn’t clear enough – keep it simple.

Introduction

Focus indicators help users see which element on a page currently has focus, they are especially useful for people with low-vision, memory or mobility impairments.

Where a focus indicator is used to show an element has current focus, it must be clearly visible and distinguishable. This goes beyond earlier guidance to ensure indicators are visible and have contrast between focused and unfocused states.

How to Pass ‘Focus Appearance (Minimum)’

When a component receives keyboard focus:

The focus indicator has a contrast ratio of at least 3:1 between focused and unfocused states;
The focus indicator has a contrast ratio of at least 3:1 against adjacent colours;
The element within focus isn’t hidden; and
The focus indicator area:
- Has an outline that’s at least 1 CSS pixel thick; or
- Has a shape that’s at least the area of a 4 CSS pixel-thick line;

‘Focus Appearance (Minimum)’ Tips

It may sound basic, but a thick black border around an element when it receives focus will often do the trick (unless your website has a very dark background colour of course).

You could also change the background colour of the whole element on focus.

If you’re worrying about pixel sizes, your indicator probably isn’t clear enough – keep it simple.

Introduction

Adding section headings to all content will help your users understand your website. They are most helpful for users who have difficulty focusing or remembering where they are on a page, as well as users with a visual impairment who may navigate by skipping between headings.

You can help these users, and everyone else, by ensuring that all content on your website is broken up by clear and informative headings.

How to Pass ‘Section Headings’

Add a heading for every new thought or topic in your content (for example, a travel article may have headings to indicate the distinct sections on dining, transportation, and lodging).

Exceptions

A webpage can be single block of content with only one header if it is about one thought or topic.

‘Section Headings’ Tips

A section is a self-contained portion of written content that deals with one or more related topics or thoughts.

A section may consist of one or more paragraphs and include graphics, tables, lists and sub-sections.

Beware of making your content harder to read by forcing in too many headings.

Certain content may not be able to meet this guideline, for example if your website publishes unabridged historical documents that don’t use headings.

Introduction

It’s essential that you make your links clear and easy to understand.

That’s because users with assistive technology, like a screen reader, often hear all the links on a page to help them find where they want to go. Others may view your website highly magnified or tab through links, so the user will only see the link text and a few words around it at any one time.

To help your users, your link text (the words that are linked, often called ‘anchor text’) must make the link destination clear.

How to Pass ‘Link Purpose (Link Only)’

Make sure that for each link on your website:

The destination of the link is clear from the link text (for example, ‘My blog’); or
If the link is an image, the alt text of the image makes the link destination clear (for example, ‘Luke McGrath – Visit my blog’); and
Links with the same destination have the same description (but links don’t share a description if they point to different places).

Exceptions

You don’t need to make the link purpose clear if it’s ambiguous to all your users.

For example, if I link the word ‘blog’ in the phrase ‘I have a personal blog’ the link might go to my blog, or it might go to a Wikipedia page explaining what a blog is. No user would reliably know where the link goes before they follow the link.

Of course, it’s best to avoid ambiguous links as users should always know where they are going. Although, there are times when you might want to spring a fun surprise on everyone.

‘Link Purpose (Link Only)’ Tips

You may have passed this if you didn’t really on link context for Link Purpose (In Context ).

Where you link to another page on your website, it’s good practice to use the page title you set in Page Titled as the link text.

How to Pass ‘Location’

Use breadcrumbs to help with navigation. Show the sequence a user is following and where they are in that sequence. For examplem, You are here: Home > Fish > Bass; and
Add a sitemap page to your website (see Multiple Ways) so your users have another way of finding what they want. Add a link to the sitemap somewhere prominent like the header.

‘Location’ Tips

Use full page titles for breadcrumbs when they are 1-3 words long.

Abbreviate longer titles to make them easier to read (for example, ‘A Guide to Exotic Fish’ could just as well be ‘Exotic Fish’ for the purpose of a breadcrumb).

For a process that takes a few pages (like a shopping cart), show all the steps in the process and highlight where the user is.

If a page has a too many breadcrumbs, perhaps your website could be better organised.

Use your page titles in your sitemap, organised under subheadings.

Introduction

Where there are multiple elements on a webpage, it helps users to highlight which element has keyboard focus. This helps users who rely on a keyboard to navigate as it shows them which element the keyboard will interact with. Users with attention or short-term memory limitations will also benefit from a visual cue to where focus is located.

How to Pass ‘Focus Visible’

When an element has keyboard focus, show a visual indication.

‘Focus Visible’ Tips

For form fields, you might display a bar within the field or highlight the entire field.

For controls, you might display a border around the control.

Introduction

A webpage can be broken up with headings where content changes topic, introduces a sub-topic or changes purpose. Where headings are used, they must be descriptive.

Users with slow reading ability or short-term memory issues benefit from headings for sections of content to make it clear what the section contains. People who use screen readers may also use headings to navigate to sections.

As well as headings, descriptive labels on form control help users know how to complete the form fields.

How to Pass ‘Headings and Labels’

Use descriptive headings and subheadings in content where appropriate (a change in topic or purpose)
Use descriptive labels on controls and input fields

‘Headings and Labels’ Tips

A single letter of the alphabet can be a good heading (for example, in an alphabetical index).

If you regularly produce similar content, keep headings consistent (for example, a website about film reviews might have ‘Plot’, ‘Characters’ and ‘Verdict’ on each individual page).

Make sure headings can be programmatically determined as required by Info and Relationships.

Introduction

All users benefit from a website that makes it easy to find and navigate to webpages. Some users will find certain methods easier than others, so it’s important to offer a range of options.

For example, users with visual impairments may prefer a search function, whereas those with cognitive impairments may find a sitemap easier to use.

How to Pass ‘Multiple Ways’

Provide multiple ways for users to find your website’s pages by:

Adding a sitemap page which links to every page on your website; and
Including a search function on every page (by adding it to the header); and
Providing a clear and consistent main navigation menu.

Exceptions

You don’t need to provide multiple ways to access pages that users only reach after a certain process (for example, a receipt or confirmation page).
If your website only has a handful of pages, one clear navigation menu may suffice.

‘Multiple Ways’ Tips

Though you only need at least two methods available to user, the three suggested above make a more comprehensive solution.

A good HTML sitemap will depend on the structure of your website. Design your sitemap so that it best reflects the structure of your website pages and contains all your pages.A ‘related pages’ section (which shows links to similar pages on your website) is a good way of helping users navigate around your website.

Introduction

It’s essential that you make your links clear and easy to understand, ideally from just the link text itself.
That’s because users with assistive technology, like a screen reader, often hear all the links on a page to help them find where they want to go. Others may view your website highly magnified or tab through links, so the user will only see the link text and a few words around it at any one time.

To help your users, your link text (the words that are linked, often called ‘anchor text’) must make the link destination clear, in the context of their surrounding content.

How to Pass ‘Link Purpose (In Context)’

Make sure that for each link on your website:

The purpose of the link is clear from the link text (for example, ‘My blog’); or
The purpose of the link is clear from the surrounding content, meaning the same sentence, paragraph or cell in a table (for example, ‘Visit my blog’); or
If the link is an image, the alt text of the image makes the link purpose clear (for example, ‘Luke McGrath – Visit my blog’); and
Links with the same destination have the same description (but links don’t share a description if they point to different places).

Exceptions

You don’t need to make the link purpose clear if the purpose is ambiguous to all your users.

Of course, it’s best to avoid ambiguous links as users should always know where they are going. Although, there are times when you might want to spring a fun surprise on everyone.

‘Link Purpose (In Context)’ Tips

A good writer will only ever need the first option, making the link purpose clear for the link text. It is the most accessible solution and the best for your users. There is always a way to make your link accessible using link text alone.

At Level AAA, Link Purpose (Link Only) requires you to make links accessible using only the link text.

Where you link to another page on your website, it’s good practice to use the page title you set in Page Titled as the link text.

How to Pass ‘Page Break Navigation’

‘Page Break Navigation’ Tips

See Also

Introduction

How to Pass ‘Focus Appearance (Enhanced)’

‘Focus Appearance (Enhanced)’ Tips

See Also

Introduction

How to Pass ‘Focus Appearance (Minimum)’

‘Focus Appearance (Minimum)’ Tips

See Also

Introduction

How to Pass ‘Section Headings’

Exceptions

‘Section Headings’ Tips

See Also

Introduction

How to Pass ‘Link Purpose (Link Only)’

Exceptions

‘Link Purpose (Link Only)’ Tips

See Also

How to Pass ‘Location’

‘Location’ Tips

See Also

Introduction

How to Pass ‘Focus Visible’

‘Focus Visible’ Tips

See Also

Introduction

How to Pass ‘Headings and Labels’

‘Headings and Labels’ Tips

See Also

Introduction

How to Pass ‘Multiple Ways’

Exceptions

‘Multiple Ways’ Tips

See Also

Introduction

How to Pass ‘Link Purpose (In Context)’

Exceptions

‘Link Purpose (In Context)’ Tips

See Also

Start here

Boring pages

Security

Search Wuhcag