‘Visible Controls’ requires websites to give users a way to identify controls without mouse hover or keyboard focus.

Introduction

Users with cognitive impairments, visual disabilities, mobility or motor issues may have difficulty using components if they are hidden until hovered over by a mouse pointer or focused on through keyboard navigation.

Controls that are hidden or displayed on focus but then disappear can be difficult for users to find, remember or use. Similarly, users who rely on speech to navigate can often only use a component if they can speak its name.

By making controls visible, or by allowing users to make controls visible, these issues can be avoided.

How to Pass ‘Visible Controls’

Ensure that the information needed to identify controls and components is available when the controls are needed. Note: This doesn’t mean that controls must be visible all the time. 

Alternatively, make controls available through an entry point that is always visible – for example a menu button.

You can also pass by enabling users to make the information persistently visible. For example, a control at the top of a page could toggle all components to ‘visible’ status.

Exceptions to ‘Visible Controls’

If the information is available through an equivalent component on the same page or previous step in a process, you don’t need to make every matching component visible without mouse or keyboard interaction.

If the component is specifically for enhancing keyboard navigation, for example, a ‘Skip to Content’ link.

If it’s essential to hide the identifying information, for example in a game.

See Also

‘Consistent Help’ requires that help and support options are presented in the same order.

Introduction

Offering help options is great for all users, whether the help is human contact or self-service. Users with disabilities may use help options more than other users and will benefit from consistent presentation of their choices.

A simple way to achieve this is adding an email address, phone number or ‘contact us’ link to your main navigation. Others may offer live chat on every page. The key is to keep these options in the same order wherever they exist.


How to Pass
‘Consistent Help’

Where help is offered to users on multiple pages of a website, it is done so in a consistent order. 

‘Consistent Help’ Tips

Help options can include contact details, a contact form, live chat, FAQs or an automated chat bot.

It’s important to note that this doesn’t require websites to offer help, just that when help is offered it is done consistently across all pages.

Consistent order means both placement (for example before or after the main page content) and order within a menu (for example phone number before email).

If you’re going to pick one thing to do, add a ‘Contact’ or ‘Help’ link to your main navigation and present all the help options on that page.

See Also

Reduce the risk of all input errors

All users make mistakes when inputting data (for example, into forms and checkouts). Aim to prevent these errors occurring, but make it easy for users to correct errors as they occur.

Users can make costly mistakes if they don’t fully understand the implications of their actions or can’t rectify their errors. Error prevention is all about reducing risk to your users.

What to do

To pass this guideline, you need to make sure that:

  • All data input submissions are reversible; or
  • All data input submissions are checked for input errors and the user is given a chance to correct any mistakes; or
  • Add a confirmation page to the data input submission process that summarises the input and the outcome, with an option to correct or discontinue. This page has an input field (for example, a confirm button or checkbox) that acts as confirmation of the submission.

Tips

  • This guideline expands on Guideline 3.3.4.
  • This guideline applies to deletion of data as well as submission.
  • Although each technique alone is enough to pass this guideline, add as many of the techniques to your process as possible.
  • Provide a confirmation webpage that gives the user a chance to read a summary of everything they have input, and positively confirm their actions (especially if inputs were spread over several pages in the process).
  • Validate forms inline and add error messages if input is incorrect. Be specific in explaining how to fix mistakes.

See also

Your website has detailed help and instructions

Your users have a range of abilities. Some will instinctively know how to use your website and others will struggle. You can help your users get the most from your website by offering help wherever you can. This is especially relevant to forms, where your users need to input the right information for the form to work.

What to do

Offer help on your forms by:

  • Labelling input buttons with the nature of the input (for example, ‘Subscribe’ or ‘Buy’); and
  • Where an input field needs more information than a label provides, add a link to that information near the field (for example ‘Help with this answer’); and
  • Where a field needs a specific format, use a label, adjacent text or placeholder text showing the correct format (for example, ‘Date: DD/MM/YYYY’).

Tips

  • A link to further information, such as help for a form, counts as an “essential” exception against opening a link in a new window (see Guideline 3.2.5). Opening a link to help in a new window allows the users to follow the help whilst skipping between windows.
  • An example of when further information would help is beside a free text field to answer the question: ‘Why are you a good candidate for this job?’ The help could offer hints and tips on the correct format for an answer. Make certain, for instance, to note any character or word limit.

See also

Elements do not change without a request.

Introduction

Some of your users will find automatic changes hard to deal with. Unexpected actions can interrupt their concentration and prevent them from reaching their goals. Help your users by keeping them in control and avoiding elements on your website that change automatically.

A change without a request is especially troublesome for users who navigate by keyboard, as well as those with visual disabilities or cognitive limitations. 

How to Pass ‘Change on Request’

  • If you have an element that updates or changes automatically (like a live news ticker), there is an option to pause this and update only when requested.
  • All links open in the same window, unless it’s essential (for example, opening a transcript to a video).
  • If a link does open in a new window, the user is aware of this (for example, in the anchor text of the link or by an icon).
  • Forms do not auto-submit when fields are filled.
  • Any redirect from one page to another is immediate.

‘Change on Request’ Tips

Avoid using the option to add a pause button wherever possible, it’s not as accessible as giving the user full control.

This guideline builds on 2.2.2 – Pause, Stop, Hide and 3.2.2 – On Input by removing some exceptions, so you may already have passed.

The best way to redirect a user from one webpage to another is to do it without them noticing. One of the simplest ways to do this is to edit a website’s .htaccess file, which is in the root directory (not all servers will allow you to edit this file, so check with your hosting provider).

See Also

Define words where meaning is ambiguous without pronunciation. 

Introduction

You can help your users by paying attention to words where the meaning isn’t clear unless the word is pronounced (or spoken). Words like these can make it hard for your users to understand your content, especially if they use a screen reader (which could pronounce words incorrectly) or have limited reading comprehension.

This covers words that are spelled the same but pronounced differently (for example, ‘bow’ v ‘bow’) – also known as heteronyms.

How to Pass ‘Pronunciation’

  • Avoid using words where the meaning, in context, is ambiguous.
  • If you need to use such a word, you can explain the meaning to your users by:
    • Providing a phonetic guide immediately after the word; or
    • Linking the word to a phonetic guide.


‘Pronunciation’ Exceptions

If the word is clear from the context of the sentence (for example “Robin Hood used a bow and arrow”).

See Also

‘Reading Level’ requires that users with nine years of schooling can read your content.

Introduction

All of your users need to be able to read your content. That means you need to write with a range of people in mind, from a College Professor to someone straight out of school.

The key is to write as simply as you can, in clear and plain language, as this will help users with reading and comprehension difficulties. 

The generally agreed level to aim for is someone with nine years of schooling, starting from primary education. 

How to Pass ‘Reading Level’

  • Write content that a person with 7-9 years of schooling can understand by:
    • Writing the content so someone with no more than nine years of school can understand you (that’s nine years from their first day at school, so no college or further education).
    • Adding summaries, images and diagrams to content to help explain meaning.
    • Breaking up content with well-organised sections and headings.
  • Provide a link to supplemental content that further explains complex content.

Tips

  • You can never write something that every human on the planet will understand.
  • Short sentences are easiest to understand.
  • Stick to one topic per paragraph and one thought per sentence.
  • Avoid slang, jargon and idioms.
  • Use common words.
  • Write how people speak.
  • Use bullet points.
  • Use active, not passive, language (for example, ‘The words were written by Luke’ is passive, but ‘Luke wrote the words’ is active).

‘Reading Level’ Exceptions

You don’t need to worry about using correct names, even if they are complicated or hard to read. Names of things like people, films, books and companies all might be hard to read, but they are beyond your control.

See Also

Define any abbreviations.

Introduction

Using abbreviations can cause confusion and prevent some of your users from understanding your website. Users with limited memory, cognitive impairments or a reliance on screen magnifier may struggle with shortened words and phrases. 

Avoid using abbreviations where you can and explain them when you need to use them.

Abbreviations (like Dr for Doctor) also include acronyms (NATO) and initialisms (FBI).

How to Pass ‘Abbreviations’

  • Avoid using abbreviations, acronyms and initialisms.
  • If you need to use an abbreviation, you can explain the meaning to your users by:
    • Showing the meaning in the text (for example, Federal Bureau of Investigation (FBI)); or
    • Linking to a definition on a glossary page on your website; or
    • Linking to a definition footnote on the same page; or
    • Using the “abbr” HTML tag.

Tips

  • The tidiest solution when you need to abbreviate is the HTML option, which creates a hidden expansion that appears on hover and is understood by screen readers.
  • If your use of an abbreviation always means the same thing, you only have to define it the first time it appears on a page.
  • If your use changes you must define the word on every occasion (for example ‘Dr’ might mean ‘Doctor’ in one paragraph and ‘Drive’ as part of an address in another).
  • Think of creative ways to avoid abbreviations. For example, rather than “FBI” you could use “Federal Bureau of Investigation” once then “the Bureau” afterwards).


‘Abbreviations’ Exceptions

You don’t need to explain an abbreviation, acronym or initialism if it’s part of the language (for example, “laser” or “CD”).

See Also

Define any unusual words or phrases.

Introduction

Some of your users will find it hard to read unusual uses of words on your website. Things like figurative language, idioms and jargon can be difficult to process. Users who read your content zoomed in may struggle with unusual words if they can’t see the context around them.

Avoid using unusual words where you can and explain the use of words when you need to use them.

How to Pass ‘Unusual Words’

  • Avoid using technical, figurative or idiomatic words and phrases.
  • If you need to use an unusual word or phrase, you can explain the meaning to your users by:
    • Showing the meaning in the text (for example, ‘I like bass. A bass is a fish.’); or
    • Showing the meaning in brackets (for example, ‘I like bass (a type of fish)’; or
    • Linking the word to a definition on a glossary page on your website; or
    • Linking the word to a definition footnote on the same page.

‘Unusual Words’ Tips

  • If your use of an unusual word always means the same thing, you only have to define it the first time.
  • If your use of an unusual word changes, you must define the word on every occasion (for example, a bass might be a type of fish in one paragraph and a musical instrument in another).
  • Always define technical terms and jargon that any user might not understand depending on their familiarity with the subject.
  • Wherever possible, avoid using jargon and idioms. These are bad for novices in your industry and users who don’t natively speak your language.


See Also

‘Error Prevention (Legal, Financial, Data)’ requires websites to check, confirm and allow reversal of pages that cause important commitments.

Introduction

When a user is going through a process that results in a serious financial or legal commitment, or a change in data storage, it’s more important than ever to try and prevent mistakes. 

Although all users are susceptible to making mistakes, some disabilities and impairments can make users more likely to make errors. For example, people with reading or writing difficulties may type words incorrectly and those with motor disabilities may press keys in error.

Where the errors are legally binding, this can lead to serious consequences. 

How to Pass ‘Error Prevention’

If a process results in:

  • a legal commitment;
  • a financial commitment;
  • modification or deletion of stored data; or
  • submission of test responses

at least of of the following is true:

  • submissions are reversible;
  • input is checked for errors and users are given a chance to correct mistakes; or
  • users are given a chance to review and confirm all input before submitting.

‘Error Prevention’ Tips

Remember this covers both submission of data and its deletion.

To make a submission or deletion reversible, provide users with a set time in which they can undo or change the action.

Check for input errors as users enter each field.

Replay all inputs to a user (or the information about to be deleted) and ask them to confirm they are correct before saving the submission.

Error Prevention (All) widens this guideline to include the submission and deletion of any data, so rather than judging if the submission is financial or legal, apply the solutions to all submissions and deletion requests.

See Also