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

Don’t change elements on your website until users ask

Some of your users 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.

What to do

To pass this guideline, you need to ensure the following five statements are true:

  1. If you have an element that updates automatically (like a live news ticker), there is an option to pause this and update only when requested; and
  2. All links open in the same window, unless it’s essential (for example, opening a transcript to a video); and
  3. 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); and
  4. Forms do not auto-submit when fields are filled; and
  5. Any redirect from one page to another is immediate.

Tips

  • This guideline builds on Guideline 3.2.2 and Guideline 2.2.2 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

Explain any words where meaning is ambiguous without pronunciation 

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 the word incorrectly.

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

What to do

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

Exceptions

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

See also

Users with nine years of school can read your content

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

The key is to write as simply as you can, in clear and plain language.

What to do

The W3C (the writers of the Guidelines), set a benchmark you can test against. The suggested standard is to write so that a person with 7-9 years of schooling can understand you.

You can get your content to this standard by:

  • Writing so that 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.

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 and contractions.
  • 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).
  • Microsoft Word and some online services can check for readability against the Flesch Reading Ease test – aim for a score over 60.
  • BUT don’t rely solely on automated tests, use common sense too.
  • GOV.UK has a useful style guide for content producers.

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

Explain any abbreviations

Some of your users need help understanding your content. Using abbreviations can cause confusion and prevent your users from understanding your website. 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).

What to do

  • 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 the abbreviation to a definition on a glossary page on your website; or
    • Linking the abbreviation to a definition footnote on the same page; or
    • Using the abbreviation HTML tag to expand the abbreviation.

Tips

  • Avoid using abbreviations wherever possible (for example, instead of the FBI every time you could say ‘Federal Bureau of Investigation’ once then refer to them as ‘the Bureau’. This helps users with a cognitive disability, as they may be confused by abbreviations on each occasion and sending them to a glossary or definition interrupts their concentration (and everyone else’s for that matter).
  • 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).

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

Explain any strange words

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. Avoid using unusual words where you can and explain the use of words when you need to use them.

What to do

  • Avoid using unusual 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.

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

Break up content with headings

Adding section headings to all content will help your users understand your website. They are useful 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.

What to do

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

Tips

  • The W3C define a section as a self-contained portion of written content that deals with one or more related topics or thoughts. See ‘Understanding WCAG 2.0’
  • 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.

Exceptions

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

See also

Every link’s purpose is clear from its text

It’s essential that you make your hyperlinks (usually just called ‘links’) clear and easy to understand.
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, 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 alone (the words that are linked, often called ‘anchor text’) must make the link destination clear.

What to do

To comply with this guideline, make sure that for each link on your website:

  • The purpose of the link is clear from the link text; or
  • If the link is an image, the alt text of the image makes the link purpose clear.

Tips

  • This Guideline builds on Guideline 2.4.4 by focusing only on the link text and removing some exceptions.
  • Ensure that links with the same destination have the same description (but links don’t share a description if they point to different places).
  • ‘Click here’ and ‘Read more’ links fail this guideline.
  • Avoid using the title attribute (which was an exception in Guideline 2.4.4) as is not sufficient to pass this guideline.

Exceptions

You don’t need to make the link purpose clear if the purpose is ambiguous to all of 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.

See also

 

 

 

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