‘Error Prevention (All)’ requires a website to check, confirm and allow reversal of pages that require users to submit information.

Introduction

When a user is going through a process that results them submitting information, 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.

How to Pass ‘Error Prevention (All)’

If a process results in the submission of information, 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 (All)’ 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.

See Also

Provide help to users.

Introduction

While many guidelines cover highlighting mistakes and remedying them, it’s useful to help users avoid making errors in the first place. Users with disabilities, such as impairments with reading, focus or understanding, are more likely to make mistakes than others.

Where a label or control isn’t as clear as it can be, adding contextual assistance can prevent users from making errors.

How to Pass ‘Help’

Provide contextual assistance whenever part of a website may be hard to understand.

‘Help’ Tips

For a form, it can be useful to provide links to contextual assistance about certain fields. For example, why the question is being asking and the type of response expected.

Where a form field has a required input type or format, explain this.

Help can be by tooltip, a link to a new page or simply a good explanation near the element you’re providing help for.

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

‘Error Suggestion’ requires websites to suggest corrections when users make mistakes.

Introduction

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

Input errors are common, especially where fields are mandatory or will only accept input in a specific format. Gong beyond identifying errors to suggesting corrections is particularly helpful to users with cognitive or visual limitations. 

How to Pass ‘Error Suggestion’

Ensure that:

  • You identify input errors and suggest corrections where possible
    .
  • 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 3.3.1 – Identify Errors 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.

‘Error Suggestion’ Exceptions

You don’t need to provide suggestions if:

  • It would negatively impact data security; or
  • It goes against the purpose of the content.

 See Also

‘Labels or Instructions’ requires forms and controls to provide labels or instructions for user input.

Introduction

Most websites have at least some elements that require user input. For example, these might be controls or forms. It’s essential to label controls such as radio buttons and checkboxes so that users understand what they are selecting.

It can also be useful to provide users with clear instructions around forms and controls, especially if there are validation rules around inputs. Be wary that overdoing instructions can make controls harder to understand.

How to Pass ‘Labels or Instructions’

  • Use descriptive labels on form fields and controls.
  • Provide text instructions at the beginning of a form or section of a form.
  • Show users the expected format of free text entries.
  • Indicate required fields.
  • Use text to identify required fields that have been missed.

‘Labels or Instructions’ Tips

Keep your labels simple – too much explanation can be counter-productive. Things like ‘First name’, ‘Email’ and ‘Your message’ are fine.

The same goes for instructions, ‘Required fields are in red and have a * symbol’ works great. So does ‘Fill in this form and click ‘Submit’ to get in touch’.

Think about how your use of colour affects things like required fields if you want to highlight them by colour. Don’t highlight by colour alone, pick a symbol too.

Consider error identification as well, and make sure that you give helpful instructions when your users make mistakes on forms.

See Also 

‘Error Identification’ requires websites to identify and describe input errors for users.

Introduction

Users of all kinds will make mistakes when using your website, so it’s important to clearly identify and describe errors. Input errors include users not providing required information as well as providing informating that doesn’t meet validation criteria.

Be as specific as possible when highlighting an error, so a user has the best chance of fixing their mistake and continuing. This means doing more than adding a red box around a missed field for example.

How to Pass ‘Error Identification’

  • Identify and explain to the user any mistakes that you can detect automatically.
  • Add error explanation close to the error, showing what is wrong and how to fix it.

‘Error Identification’ Tips

  • If a form requires input in a certain format, show and describe the required format.
  • If a mandatory field is empty, highlight the field and explain what’s required.
  • Build forms to be forgiving, accepting variations on the formats you prefer.
  • Don’t ask for too much information, just what you need.
  • Be specific. Use clear, concise instruction and form field labels.
  • Highlight mistakes in forms with colours and symbols.
  • Don’t clear a form if a user makes a mistake. Save the information and allow the user to edit their error and continue.
  • Provide extra help by giving your contact details on all pages (the header or footer are great) and especially near forms.

See Also