‘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

Elements do not change when they receive input.

Introduction

As we saw with On Focus, all users need predictability when navigating a website. If elements don’t act as they expect, they may become disorientated. 

This is also true when elements receive input, they shouldn’t automatically change. For example, forms shouldn’t skip to another field or auto-submit without confirmation from the user.

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

How to Pass

Ensure no elements change on input.

Here are some examples of the kinds of things to look out for:

  • Forms must not auto-submit when all fields are filled – this prevents your users from checking and editing what they have written.
  • Focus (the field where the user will input next) must not automatically jump to the next field in a form once a field is complete.
  • Using a control (like selecting yes or no) must not automatically perform the action (for example, selecting to subscribe to a newsletter in a check box must not automatically subscribe your user, they should be able to click a submit button to confirm their decision).

Exceptions

Elements can change on input if you inform the user of the change before they have the chance to input their data or make their selection. For example, you may have seen websites with options in the header to choose a text size. Once you click on the size you want, the website changes without giving you the chance to confirm your choice.

Controls like that don’t need to have a submit button if it’s clear from the text before the element what will happen when you input.

Tips

The easiest way to pass is to use submit buttons and avoid jumping your users between fields. It’s all about leaving the control with your users, where it belongs.

See Also

Elements do not change when they receive focus.

Introduction

All users need predictability when navigating a website. If elements doesn’t act as they expect, they may become disorientated.

In particular, once an element receives focus from a user, whether with a mouse or keyboard, the element must not automatically change (known as ‘changing on focus’). This can disorientate users.

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

How to Pass ‘On Focus’

  • Ensure no element changes purely by receiving focus.
  • Avoid both behavioural and visual modifications.

Ensure that:

  • Links don’t open automatically on focus; and
  • Forms don’t submit without the user acting (such as clicking the ‘Submit’ button); and
  • There are no automatic pop-ups; and
  • Focus never jumps to another element automatically; and
  • No other action that occurs on focus alone causes the page to change.

‘On Focus’ Tips

  • Most well-made websites will not have any of these errors by default, you would need to choose to add in change on focus.
    
  • A great way to test this guideline is to unplug your mouse and navigate your way round your website. If anything moves, submits or changes on focus, fix it!


Exceptions

Elements can change on focus if the context doesn’t change. For example, you can use a dynamic menu on your website, the kind where navigation options drop down when you hover over an item. This is not a change of context.

Another example would be a hover status on a link, again, this this isn’t a change of context.

See Also

‘Language of Page’ requires that each webpage has a default human language assigned.

Introduction

For both users who rely on conventional web browsers and those who prefer assistive technologies, assigned a webpage’s language is essential for understanding.

Among the benefits, text is rendered more accurately, screen readers will use the correct pronunciation rules and captions will load correctly.

How to Pass ‘Language of Page’

Set the default language of each webpage using the lang HTML attribute.

‘Language of Page’ Tips

Set the language in your site template so you only have to do this once (unless your website has pages in different languages).

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. 

See Also

‘Link Purpose (In Context)’ requires that every link’s purpose is clear from its text or context.

Introduction

It’s essential that you make your links clear and easy to understand, ideally from just the link text itself.
That’s because 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 or tab through links, 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 (the words that are linked, often called ‘anchor text’) must make the link destination clear, in the context of their surrounding content.

How to Pass ‘Link Purpose (In Context)’

Make sure that for each link on your website:

  • The purpose of the link is clear from the link text (for example, ‘My blog’); or
  • The purpose of the link is clear from the surrounding content, meaning the same sentence, paragraph or cell in a table (for example, ‘Visit my blog’); or
  • If the link is an image, the alt text of the image makes the link purpose clear (for example, ‘Luke McGrath – Visit my blog’); and
  • Links with the same destination have the same description (but links don’t share a description if they point to different places).

Exceptions

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

‘Link Purpose (In Context)’ Tips

A good writer will only ever need the first option, making the link purpose clear for the link text. It is the most accessible solution and the best for your users. There is always a way to make your link accessible using link text alone. 

At Level AAA, Link Purpose (Link Only) requires you to make links accessible using only the link text.

Where you link to another page on your website, it’s good practice to use the page title you set in Page Titled as the link text.

See Also

‘Focus Order’ requires that components receive focus in a logical sequence.

Introduction

Your users need to find their way around your website in a sequential and meaningful order. You can control this with the ‘focus order’ of your website.

This is the sequence in which users access components on your website. Users with keyboard-only navigation or screen readers will follow the order you have set, so it’s essential your chosen order preserves meaning and usability. 

How to Pass ‘Focus Order’

Ensure the focus order of each web page follows a sequence that preserves the meaning and functionality of the page.

Exceptions

  • Complex items like tree diagrams do not have to be exactly programmed to a specific order if your users can reach every element.
  • You don’t need to set an order if your page doesn’t need to be navigated in a particular sequence to be understood. For example, a random collage of links or images.

‘Focus Order’ Tips

Unplug your mouse and verify that you can use the ‘Tab’ key to navigate to every part of your website and use every function, including search boxes and forms – make sure each page has a sensible order.

If you have complied with Keyboard, you may have already covered elements of this guideline.

See Also

‘Page Titled’ means using helpful and clear… page titles.

Introduction

All users benefit from descriptive page titles. A good title tells your users which page they are on and what that page is for. This lets users quickly understand if they are on the right page.

Users with visual, cognitive and mobility impairments further benefit as the technology they use can more heavily rely on page titles.

How to Pass ‘Page Titled’

Give each page on your website a unique and descriptive meta title.

‘Page Titled’ Tips

A useful format for writing page titles is: ‘Page name – Page description – Website name’ ( ‘About Us – Learn our Secrets – ACME Corp’).

If pages are part of a process, such as a checkout, use the title to tell the user what stage they’re at (‘Checkout – Page 1 of 5 – ACME Corp’).

Don’t forget dynamic pages such as search results (‘Search Results for XXXX’) and 404 errors (Sorry, we can’t find that page).

In many cases, it makes sense to repeat the page title or a variation of it as the top heading on your page.

Type your page titles into a spreadsheet and review them. If they make sense out of context, they will work on your website.

Use these page titles in your sitemap (see Multiple Ways and Location) to make it more accessible.

See also

‘Bypass Blocks’ requires you to provide a way for users to skip repeated blocks of content.

Introduction

Websites often have the same, or very similar, content at the top of each page (for example the navigation menu, header and certain graphics). Some users with visual, motor or cognitive impairments who navigate sequentially through elements can struggle to get past this repetitive content.

For example:

  • screen readers often announce all of the elements on the page to the user in order;
  • users who navigate by keyboard might have to key past each link in a menu; and
  • users who browse with a lot of zoom can get lost on a page.

To help these users navigate your website, provide a way for them to bypass the repetitive parts of each page.

How to Pass ‘Bypass Blocks’

  • Add a visible ‘Skip to Content’ link to all pages on your website that sends users to the start of the main content on each page; or
  • Add a link at the start of any repeated content to skip it; or
  • Add links at the start of a page to each area of content.

‘Bypass Blocks’ Tips

While a ‘Skip to Content’ link will pass this guideline, there is a little more you can do. A standard in HTML5 allows you to label your navigation menu as a <nav> element. Some screen readers can use the <nav> element and provide a way for users to skip menus. 

See Also

‘Three flashes or below threshold’ requires that no content flashes more than three times per second.

Introduction

Flashing content on a website can cause difficulties for users with photosensitive seizure disorders such as epilepsy. Flashing content can cause these users to suffer a seizure.

How to Pass ‘Three Flashes or Below Threshold’

Don’t add anything to your website that flashes more than three times per second.

Exceptions

There’s one exception to this guideline based on the size of the flashing content, but I recommend you ignore it and just don’t let anything flash more than three times per second.

“the combined area of flashes occurring concurrently occupies no more than a total of .006 steradians within any 10 degree visual field on the screen (25% of any 10 degree visual field on the screen) at typical viewing distance.”

Understating Success Criterion 2.3.1

If you can understand that you’re smarter than me!

‘Three Flashes or Below Threshold’ Tips

Remember, flashing is different to blinking (see Pause, Stop, Hide). Blinking can distract users but doesn’t cause seizures. 

If blinking content occurs three times per second, it is considered flashing content.

The exception is removed at Level AAA in Three Flashes.

See Also