Predictable Archives

‘Visible Controls’ requires websites to give users a way to identify controls without mouse hover or keyboard focus.

Introduction

Users with cognitive impairments, visual disabilities, mobility or motor issues may have difficulty using components if they are hidden until hovered over by a mouse pointer or focused on through keyboard navigation.

Controls that are hidden or displayed on focus but then disappear can be difficult for users to find, remember or use. Similarly, users who rely on speech to navigate can often only use a component if they can speak its name.

By making controls visible, or by allowing users to make controls visible, these issues can be avoided.

How to Pass ‘Visible Controls’

Ensure that the information needed to identify controls and components is available when the controls are needed. Note: This doesn’t mean that controls must be visible all the time.

Alternatively, make controls available through an entry point that is always visible – for example a menu button.

You can also pass by enabling users to make the information persistently visible. For example, a control at the top of a page could toggle all components to ‘visible’ status.

Exceptions to ‘Visible Controls’

If the information is available through an equivalent component on the same page or previous step in a process, you don’t need to make every matching component visible without mouse or keyboard interaction.

If the component is specifically for enhancing keyboard navigation, for example, a ‘Skip to Content’ link.

If it’s essential to hide the identifying information, for example in a game.

Introduction

Offering help options is great for all users, whether the help is human contact or self-service. Users with disabilities may use help options more than other users and will benefit from consistent presentation of their choices.

A simple way to achieve this is adding an email address, phone number or ‘contact us’ link to your main navigation. Others may offer live chat on every page. The key is to keep these options in the same order wherever they exist.

How to Pass ‘Consistent Help’

Where help is offered to users on multiple pages of a website, it is done so in a consistent order.

‘Consistent Help’ Tips

Help options can include contact details, a contact form, live chat, FAQs or an automated chat bot.

It’s important to note that this doesn’t require websites to offer help, just that when help is offered it is done consistently across all pages.

Consistent order means both placement (for example before or after the main page content) and order within a menu (for example phone number before email).

If you’re going to pick one thing to do, add a ‘Contact’ or ‘Help’ link to your main navigation and present all the help options on that page.

Introduction

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

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

How to Pass ‘Change on Request’

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

‘Change on Request’ Tips

Avoid using the option to add a pause button wherever possible, it’s not as accessible as giving the user full control.

This guideline builds on 2.2.2 – Pause, Stop, Hide and 3.2.2 – On Input 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).

Introduction

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.

How to Pass ‘Consistent Identification’

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.

‘Consistent Identification’ 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 2’ or ‘Go to page 3’).

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

Introduction

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 benefit most.

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

How to Pass ‘Consistent Navigation’

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 controls (for example, your search box) in the same location on all pages.

‘Consistent Navigation’ Tips

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

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.

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.

Introduction

How to Pass ‘Visible Controls’

Exceptions to ‘Visible Controls’

See Also

Introduction

How to Pass ‘Consistent Help’

‘Consistent Help’ Tips

See Also

Introduction

How to Pass ‘Change on Request’

‘Change on Request’ Tips

See Also

Introduction

How to Pass ‘Consistent Identification’

‘Consistent Identification’ Tips

See Also

Introduction

How to Pass ‘Consistent Navigation’

‘Consistent Navigation’ Tips

See Also

Introduction

How to Pass

Exceptions

Tips

See Also

Introduction

How to Pass ‘On Focus’

‘On Focus’ Tips

Exceptions

See Also

Start here

Boring pages

Security

Search Wuhcag