Let users know where they are on your website

Some of your users will have problems understanding the structure of your website. They can get lost, especially during interactions like checkouts that take place over a few pages. You can help your users by making it clear where they are on your website.

This might be as simple as adding breadcrumbs and a sitemap to your website.

What to do

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

Tips

  • Use full page titles for breadcrumbs when they are 1-3 words long (otherwise they get too long to be displayed).
  • 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.

See also

No content flashes more than three times per second

To make websites as safe as possible for all users, you must limit the amount of flashing media. Flashing content can harm the health of some users.

What this means

Don’t add anything to your website that flashes more than three times a second.

Tips

  • This builds on Guideline 2.3.1 by removing an exception that I recommend you ignore anyway.
  • Remember, flashing is different to blinking (see Guideline 2.2.2).

See also

Save user data when re-authenticating

It may be essential for your users to re-authenticate their identity for certain functions. For example, you might set a login to expire after a certain amount of time in case a user leaves their computer unattended in the middle of a purchase.

While your website will rightly use this function for your users’ security, you can help your users by saving all information entered by the user. When they re-authenticate (such as logging back in) you can display whatever data they had already entered.

What to do

  • When you ask a user to re-authenticate their identity, the user can continue exactly as before with saved data (for example, their shopping basket contents, input into forms or accessibility options).
  • Things like surveys and questionnaires can be saved and completed at a later date.

Tips

If you do ask your users to re-authenticate after a certain amount of time, consider whether your use of a time limit is justified under Guideline 2.2.1 and Guideline 2.2.3.

See also

Don’t interrupt your users

Some of your users will have difficulty maintaining their focus and attention; interrupting their experience may impact their understanding of your content. You can avoid this by eliminating interruptions.

What to do

  • Don’t use an automatic redirect or refresh function based on a time delay (for example, if a webpage has moved, do not redirect users to the new page after a certain amount of time).
  • Provide an option for turning off all but ‘essential’ interruptions (see below).

Tips

The best thing you can do is eliminate all interruptions by default. Allow your users to interact with webpages naturally and don’t try to surprise or manipulate them. If you can’t capture your users’ interest without a pop-up, you have bigger problems than Level AAA.

If you must use a pop-up, make sure that keyboard focus is on the window-closing ‘X’ icon in the corner that closes the pop-up. This means keyboard users can close the new window. When they do close it, return focus to the place on the page they were at before the pop-up appeared.

Exceptions

Warnings about a user’s health, safety or the security of their data or property as they are considered ‘essential’ (I’m not sure how a website would know if your house was about to explode, but let’s not ban it from trying to tell you!).

See also

 

No time limits on your website

If any of your content is time-controlled, you risk losing users who need more time to read and understand the information on your website.

Time-controlled content is anything on your website that expires or becomes unusable by your users after a certain time. A common example is giving a user ten minutes to fill in and send a form. There are functional reasons to set time limits, but you must consider all of your users.

What to do

This guideline builds on Guideline 2.2.1. That guideline (at the lower Level A standard of compliance) requires you to offer users a chance to turn off or extend time limits. At Level AAA, this guideline requires that you do not set time limits at all (with two exceptions below).

Exceptions

You can set a time limit if:

  • The time limit is due to real-time events, like bidding in an auction.
  • Your content is a live video stream.

See also

Your website is accessible by keyboard only, without exception

Your users have varying degrees of motor skills and may use your website with only their keyboard. Users with motor impairment, including many elderly users, need help to navigate your website.

All parts of your website must be accessible by keyboard only. That means, without a mouse or pointing device, your forms, menus, shopping cart and everything between. On top of that, you cannot require specific timings for keystrokes to access any feature.

What to do

A clean HTML and CSS website will often have keyboard accessibility without further work. This is a great example of why you need to invest in web design and development from the outset.

Tips

  • Unlike the lower-level Guideline 2.1.1, there are no exceptions here. All aspects of your website must be accessible by keyboard. It’s up to you to decide if Level AAA conformance is worth you removing any mouse-only features.
  • Unplug your mouse and make sure you can fully use your website with your keyboard.
  • Make sure no function on your website requires timed keystrokes (for example, ‘ double tap on enter within two seconds’ to submit).
  • Don’t use ‘access keys’ (assigning a navigation link to a particular key) or page-specific key commands as they can conflict with assistive technology.
  • Be wary of third-party adverts and widgets, often these are not accessible.

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 text is part of an image that contains other visual content, such as labels on a diagram
  • Purely decorative text
  • Brand logos

Tips

You may already comply with this guideline, depending on how you addressed 1.4.5 – Images of Text.

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

See Also

Offer users a range of presentation options.

Introduction

Users with visual or cognitive impairments may need to customise the presentation of your website to understand and enjoy it.

Some users require a certain background and foreground colour to comfortably read text. Others find long lines or justified text difficult to follow and some find it hard to read text where the lines and paragraphs are close together.

As each user has different needs, providing a range of user-selectable options helps the most people.

How to Pass

The following five features are cumulative, as all must be in place to pass:

  1. Provide a tool that enables users to select from several background and foreground colours; and
  2. Ensure text blocks are no wider than 80 characters (plus make sure resized browser windows do not need horizontal scrolling); and
  3. Ensure text is not justified to both sides of the webpage; and
  4. Line spacing is at least space-and-a-half within paragraphs and paragraph spacing is at least 1.5 times larger than line spacing
  5. Ensure text can be resized in a browser up to 200% without requiring the user to scroll horizontally

Tips

Add all visual presentation options to the header of your website, so they are some of the first things users see.

The BBC’s accessibility page has a good range of colour and spacing options to cover features 1 and 4.

Feature 4, concerning line and paragraph spacing, can be difficult to understand, so here’s a more detailed breakdown:

  • Text height must be changeable up to 150% of the default
  • Spaces between paragraphs must always be 150% of the spaces between lines of text
  • Your best bet is to give users some options (like the ‘AAA’ element on the BBC’s accessibility page) of:
    • Default text height, line and paragraph spacing
    • 150% default text height, line and paragraph spacing
    • 200% default text height, line and paragraph spacing

You probably fulfilled feature 5 when you completed 1.4.4 – Resize text.

See Also

Audio is clear for listeners to hear.

Introduction

Some users have difficulties with their hearing and won’t be able to hear your audio content as clearly as others, especially separating speech from background audio.

You can help by ensuring that your audio is clear. If you have pre-recorded audio-only content, keep background noise to a minimum so that the speaking voices can be heard.

How to Pass

  • Make sure your pre-recorded audio doesn’t contain any background noise; or
  • If there has to be some background noise, it’s generally 20 decibels lower than the foreground noise. That’s about four times quieter.

Exceptions

Background noise is acceptable if:

  • The audio isn’t mainly speech (for example, in an audio play, an action scene might have a helicopter blown up by a car)
  • The audio is part of a CAPTCHA element (CAPTCHA is a test that separates humans from spambots and is often used in forms)
  • The audio is you “singing or rapping” (seriously, this is a direct quote)
  • The background sound can be turned off ( but it’s better just to comply than add complexity)

Tips

Record your audio in a place you know will be quiet (a room with lots of soft furnishings is best if you haven’t got a studio).

Only use good quality audio (you should be doing this anyway if you care about your website).

See Also

The contrast ratio between text and background is at least 7: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.

While the minimum contrast for Level AA was 4.5:1, for Level AAA it’s 7:1. This higher standard of contrast helps a wider range of users read your content.

How to Pass

Make sure the contrast ratio between your text and background is at least 7: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 4.5:1
  • If the text is purely decorative
  • If the text 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

You may have fulfilled this guideline when you completed 1.4.3 – Contrast (Minimum).

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