Understandable
Information and the operation of user interface must be understandable.
Guideline 3.1 – Readable
Make text content readable and understandable.
3.1.1 – Language of Page
Each webpage has a default human language assigned.
Set the language in your site template so you only have to do this once (unless your website has pages in different languages).
<html lang="en-gb">
If a webpage has content in more than one language, set the page to the language used most.
If a webpage uses multiple languages equally, set the page to the language used first.
When using English, be aware of the three options: “en”, “en-gb” and “en-us”. If in doubt, stick with “en” as this lets users set their preference.
List of
3.1.2 – Language of Parts
Each part of a webpage where a change in language occurs must be marked with a lang attribute with the relevant language code.
The language of each passage or phrase can be programmatically determined except for: proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.
List of
Guideline 3.2 – Predictable
Make Web pages appear and operate in predictable ways.
3.2.1 – On Focus
Nothing on a website should automatically change just because it receives focus.
3.2.2 – On Input
Nothing on a website should automatically change just because a user inputs text, checks a box, or navigates down a drop-down box.
3.2.3 – Consistent Navigation
Keep navigation menu placement and order consistent throughout the website.
Make sure your header and footer menus stay consistent throughout the website.
Consistency involves placement and order of links, search bars, and skip navigation links.
3.2.4 – Consistent Identification
Page components (e.g., links, buttons, icons) that have the same functionality should be identified (with labels, names, and text alternatives) consistently throughout a website.
Guideline 3.3 – Input Assistance
Help users avoid and correct mistakes.
3.3.1 – Error Identification
When any input error is automatically detected, alert the user, describe the error, and provide instructions on how to correct it.
- Clearly and specifically identify any errors that can be detected automatically.
- Provide precise instructions on how to fix that error, potentially including an example where applicable (e.g., correct date format).
- Make it easy to find where the error is by adding a visual indicator.
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.
Video which explains
Example with code explanation:
3.3.2 – Labels or Instructions
For any element that requires user input, ensure concise descriptive labels and / or instructions are provided.
- Provide text instructions at the beginning of a form or section of a form.
- Assign a visible label for every form field or area of user engagement/control.
- Inside the code, make sure labels are associated with the appropriate form fields.
- Do not overdo instructions, one word or a few can suffice.
- Provide examples of expected input formats or structure data input so that the expected format must be entered.
- Conspicuously mark required fields with an icon.
3.3.3 – Error Suggestion
Make suggestions on how to fix errors on forms if an input error is automatically detected.
- Provide clear, specific instructions on how to fix input errors.
- Make it easy to correct form fields.
- Preserve other form data so the entire form doesn’t have to be re-filled out.
Whereas 3.3.1 requires notification of errors, 3.3.3 takes it a step further by requiring suggestions and instructions to help users correct those errors.
The key takeaway is to be thorough in helping users fix input errors.
3.3.4 – Error Prevention (Legal, Financial, Data)
For any web pages that have important implications (legal commitments, rights waivers, spending money, scheduling reservations, etc.), make sure that at least one of the following options is available:
- Submissions are reversible.
- Input is checked for errors and the user is provided an opportunity to correct errors.
- There is an option to review, confirm, and correct information before finalising the submission.