Reduce the risk of input errors for sensitive data

All users make mistakes when inputting data (for example, into forms and checkouts). You should try to prevent errors occurring, especially when users are committing to legal or financial agreements, or otherwise sharing their data.

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 by adding in confirmation stages to processes that pose a legal or financial risk.

What to do

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

  • Legal commitments, financial transactions, test responses and changes to user controlled data are reversible; or
  • Legal commitments, financial transactions, test responses and changes to user controlled data 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

  • Guideline 3.3.6 widens this guideline to include all types of data transfer, not just these high-cost transactions.
  • This guideline applies to deletion of data as well as submission.
  • Legal commitments are transactions where the user incurs a legally binding obligation or benefit.
  • User controlled data means things like name and address fields for a user’s account.
  • 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 an error message if input is incorrect. Be specific in explaining how to fix mistakes.

See also

Suggest fixes when users make errors

All of your users make mistakes – they’re only human after all. When they make mistakes on your website (whether it’s their fault or not), they get frustrated.

Fortunately, it’s also a great time to demonstrate to your users how much you care about them. Show suggestions and hints when users make mistakes on things like forms and checkouts.

What to do

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

  • Your forms identify input errors.
  • When the error is missing a required field, communicate this to the user with a text suggestion.
  • If the error is in the format of the input, the suggestion shows the correct format (for example, ‘The date must be in the form DD/MM/YYYY’).
  • If the error is because the input needed to be from a limited list of values, provide these values and explain them.

Tips

  • This guideline builds on Guideline 3.3.1, by adding a requirement to make a suggestion for user input to fix errors.
  • Be specific.
  • If a user makes an error, provide a list of links that the user can follow to jump back to correct their input.
  • Make it easy to re-submit incorrect forms by retaining all correct data.

Exceptions

You don’t need to provide suggestions if:

  • Making a suggestion would negatively impact data security.
  • Making a suggestion goes against the purpose of the field.

See also

Icons and buttons are consistently identifiable

It should be obvious that using consistent identification across your website helps your users move around, interact and do what it is you want them to do. Sadly, it’s often overlooked and buttons, icons or links with the same function look completely different.

Users with screen readers and screen magnifiers benefit even further from consistent identification. They often use familiarity as a means of understanding and selecting functions. Therefore, elements with the same function should be labelled and appear consistent across your website. This includes visually hidden labels for screen readers.

What to do

Ensure that:

  • Any icons used are consistent (for example, ‘Print page’ or Twitter link); and
  • Elements with the same function are labelled and named consistently; or
  • Elements with the same function have a consistent text alternative.

Tips

  • Consistent is not the same as identical (for example, an arrow icon might link to the next page in a series, but depending on the page the text alternative would be ‘Go to page X’).
  • An image can have different meanings in different contexts, so require different text alternatives to pass this guideline. For example, a tick icon or check mark can mean both ‘fishing line included with purchase’ and ‘registration form filled in successfully’).

See also

Use menus in the same place across your website

When you visit a website these days, it’s almost second nature to understand where the main menu is and to expect it to be in the same place on every page. Web designers know that having a consistent navigation menu helps users move around websites.

Consistent navigation helps users who may have trouble moving around a website and find themselves ‘lost’ more often than others. Your users who rely on spatial navigation, due to impaired sight, or need extra help understanding your website will thank you.

This consistency also applies to standard parts of your website – things like your search box. Don’t move them all over the place, use a consistent template for key elements.

What to do

  • Keep navigation menus in the same location on all pages; and
  • Present the options in navigation menus in the same order on all pages; and
  • Keep all other standard elements (for example, your search box) in the same location on all pages.

Tips

Using a standard template for your website will help you meet this guideline.

See also

Tell users when the language on a page changes

If your website has content in a different language to its main language, you should tell your users about the change. This helps those who use assistive technology to read the full content.

What to do

  • Set your website’s main language by meta tag (see Guideline 3.1.1).
  • Add a language attribute to content that is not in the main language.

Tips

  • HTML language codes match the ISO language codes standard.
  • If you have an alternative language version or translation of some content, link to it with the name of the language in that language (for example, ‘Francais’, ‘Deutsch’) and add a language tag to the link.

Exceptions

If you are using a single word that has become part of the main language (for example, ‘rendezvous’ is used in English but is of French origin).

See also

Ensure keyboard focus is visible and clear

Your users need to find their way around your website in a sequential and meaningful order. If they use a keyboard to navigate your website, they should be able to see which element they are on at any time.

The best way to do this is to style a visible border or outline around the element in use, whether it’s a form field, link, menu, content area or any other element. This makes it easier for your users to understand where they are on a page.

What to do

  • Make the keyboard focus visible on all elements (menu items, form fields, links, etc…).
  • Use CSS to apply a visual aid to keyboard focus – a border and/or underline is best.

Tips

A good HTML and CSS website will often already conform to this guideline. Check yours to be sure.

See also

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

Some of your users will visit your website using a text-only browser, or might have images turned off in a regular browser. Images of text cause problems, as they are harder for those users to understand.

Images of text also cause problems for your users if they like to resize websites to read them more clearly because images do not work well this way. They also add to the time it takes your website to load, another key reason users will leave your website.

What to do

  • Do not use an image of text when you can use plain text.
  • Display quotes as text rather than images.
  • Use CSS to style headings.
  • Use CSS to style navigation menus as text.

Tips

Images of text are subject to guidelines on colour contrast. See Guideline 1.4.3 and Guideline 1.4.6.

Exceptions

  • Brand logos.
  • 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 design the website. However, this exception is removed in Level AAA Guideline 1.4.9.
  • Purely decorative text.

See also

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

Some of your users with visual impairments will need to resize text in order to understand it fully. You should allow for up to a 200% resize of text without dropping any content or functions.

What to do

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

Tips

  • Resizing text is different to zooming (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 Guideline 1.4.8.

Exceptions

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

See also