Use clear headings and labels

A well-written page is always broken up with clear and descriptive headings. They make it easier for your users to scan and find the section they are interested in. Headings also break up large sections of text so that your content isn’t overwhelming to read.

Some of your users benefit further from pages with semantic headings and labels. Headings particularly help people with visual impairments, who often skip between headings when using a screen reader.

Labelling elements on a page will also help these users understand where they are. Elements introduced with HTML5, such as ‘header’, ‘footer’ and ‘aside’, will make that even easier to do.

What to do

  • Use informative headings and subheadings where appropriate (a change in topic or purpose) to aid navigation through your content.
  • Label all elements (for example, sidebar widgets, forms, search boxes, tables).

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).
  • Headings in HTML range from H1 (the most important) to H6 (the least important). It’s best to reserve Heading1 (H1) on a web page for the title of that page.
  • Headings don’t need to decrease from 1 to 6 on every page. While you don’t need to use all of the headings, they should still be sequential. For example, avoid skips from H2 to H4.

See also

Offer several ways to find pages on your website

All of your users benefit from a website designed with them in mind. They need a variety of ways to navigate to the pages they want to visit. Some of your users will have difficulty understanding your website, so will benefit even more from clear navigation and different ways to access your pages.

What to do

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

  • Adding an HTML sitemap page (which links to every page on your website) and link to it after the ‘Skip to Content’ link from Guideline 2.4.1; and
  • Including a search function on every page (by adding it to the header); and
  • Providing a clear and consistent main navigation menu.

Tips

  • 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.

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.

See also

Don’t use images of text.

Introduction

Users with visual or cognitive impairments may rely on changing font size, colour, alignment or spacing to enjoy your content.

Text allows for this kind of personalisation, but images of text almost always don’t.

How to Pass

  • Don’t use an image of text when you can use plain text
  • Display quotes as text rather than images
  • Use CSS to style headings as text
  • Use CSS to style navigation menus as text

Exceptions

  • If using an image of text is essential because you can’t achieve the effect with text (for example, presenting a particular example of typography)
  • If the presentation can’t be achieved with the technology used to build the website
  • If the text is part of an image that contains other visual content, such as labels on a diagram
  • Purely decorative text
  • Brand logos

Tips

Images of text are subject to guidelines on colour contrast – see 1.4.3 – Contrast (Minimum) and 1.4.6 – Contrast (Enhanced).

The exception of the website being built in a technology that doesn’t allow the text to be presented as text is removed in the Guideline 1.4.9 – Images of Text (No Exception) at Level AAA.

See also

Text can be resized to 200% without loss of content or function.

Introduction

Some users with visual impairments need to resize text to understand it fully.

To help these users, your website should allow for up to a 200% resize of text without dropping any content or functions. This should be accomplished in a browser and therefore not require any assistive technology.

How to Pass

Users can resize text content in their web browser up to 200% without loss of meaning or function.

Exceptions

  • Images of text (but don’t use images of text, because they don’t resize well)
  • Captions

Tips

As all modern browsers allow for resizing text, a website based on good HTML and CSS should comply.

If your website doesn’t resize correctly to at least 200% in a browser, add a feature that enables users to resize text (by CSS) based on three or four predetermined options, including 200%.

Resizing text is different to zooming in (which enlarges text, images and layout without preserving formatting).

Check your website by resizing to 200% in a variety of browsers.

Make sure your resized text doesn’t require the user to scroll horizontally and you fulfil part of 1.4.8 – Visual Presentation for Level AAA.

See Also

The contrast ratio between text and background is at least 4.5:1.

Introduction

All users benefit from a good contrast between the text on your website and the background colour.

Some users with visual impairments need a stronger contrast than others to understand your content, so getting your colour choice right is essential.

How to Pass

Make sure the contrast ratio between your text and background is at least 4.5:1.

Do this by:

  • Using a light background and dark text; or
  • Using a dark background and light text; and
  • Using a colour contrast checker to verify your choice.

Exceptions

  • Text that is 18 points or larger (or 14 points or larger, if bold) has a lower minimum contract ratio of 3:1
  • Text that is purely decorative
  • Text that is an incidental part of an image (for example, a man who is reading a newspaper or a landscape that happens to include a street sign)
  • Brand logos

Tips

Picking a contrast of at least 7:1 will also fulfil Guideline 1.4.6 – Contrast (Enhanced) at Level AAA.

Remember to ensure that all colours used conform. This includes links that change colour after being used once, and headings in menus and sidebars, as well as the main content.

Make sure that any embedded charts or images of charts have the minimum contrast between elements (for example, bars, axes and labels).

This guideline also applies to images of text (but you shouldn’t be using images of text, see 1.4.5 – Images of Text).

See Also

Provide audio description for pre-recorded videos.

Introduction

Users with visual impairments may rely on audio description to enjoy videos. Adding an audio description soundtrack to videos means these users get all information from the content.

How to Pass

  • Provide an audio described version of a video’s soundtrack, selectable by the user; or
  • Provide an alternative version of your video with audio description.

Exceptions

You don’t need to add audio description if your video conveys all its information through the regular soundtrack. Something like a straight face-to-face interview, or a speech to-camera would probably not need audio description.

Tips

Audio description is an edited version of a video’s soundtrack that adds more information than the regular soundtrack offers during pauses. This might mean narrating movements that are not audibly explained in the video, identifying speakers or explaining visual information.

Keep this guideline in mind when creating videos to reduce your workload.

If you provided audio description for videos to meet 1.2.3, you’ve already fulfilled this guideline.

This guideline doesn’t apply to live videos or streaming.

See Also

Add captions to live videos.

Introduction

Users with hearing impairments may rely on captions to enjoy your video content. Adding captions to live videos helps people use your website when you’re streaming live video.

How to Pass

Add captions to live video.

Tips

Include presenter cues and important sound effects as well as dialogue.

YouTube Live and Facebook Live both now offer closed captions as long as you use certain captioning tools such as Total Eclipse, Case CATalyst, CaptionMaker or StreamText.Net.

You may want to hire someone to type quickly for you – check out freelance websites.

This is a difficult guideline to meet. Broadcasters like the BBC hire professional subtitlers to add captions to live television.

See Also