Intermediate (Level AA) Archives

‘Status messages’ requires website to alert users to changes in content that aren’t given focus.

Introduction

Users with visual impairments and low vision can benefit from status messages to inform them of changes, results or processes that aren’t clear from a change of context. Adding clear messages can help these users understand and gain further context about the action they’re taking.

Assigning a role to a status message means that it can be announced by screen reader or other assistive technology.

How to Pass ‘Status Messages’

A ‘status message’ is a special term used for these guidelines, meaning something that provides information to the user on the:

results of an action;
waiting state of an application;
progress of a process; or
existence of errors.

The message is also defined as one not delivered by a change in context.

Where you use a status message, ensure it as assigned an appropriate ARAI role of “status” or “alert”.

‘Status Messages’ Tips

This can be a little difficult to understand, so here’s an example:

A user searches the website for store locations.

The list of results is a change in context, so not a ‘status message’.

However, a text displayed about the status of the search such as “Now searching…” would be a ‘status message’.

Introduction

Although it can be important to authenticate users, those with cognitive impairments may have difficulty with remembering passwords or typing in one-time codes.

Some users will be unable to recall a password or series of gestures to access their accounts and require help or alternative means to authenticate.

How to Pass ‘Accessible Authentication’

If you are authenticating a user, avoid:

asking for a memorised password; and
requiring them to type in certain characters; and
making the solve any kind of puzzle, calculation or test.

Exceptions

You can ask a user to complete a cognitive test if you also provide:

an alternative authentication method that doesn’t require a test; or
help for the user in completing the test; or
a test which requires the user to identify objects; or
a test which requires the user to identify non-text content they provided previously.

‘Accessible Authentication’ Tips

Where you use multi-factor authentication, each stage of the process must comply.

Password recovery processes must also meet this guideline.

Personal information such as an email address or phone number is fine to use, as this is consistent across all website and unique to the user.

Supporting password autofill and password managers is providing help.

Further help could be allowing copy and paste into password fields to reduce re-typing.

Enable users to toggle hidden characters on and off, for example when typing in a password.

Avoid asking for certain characters from a password as this means the user cannot use copy and paste.

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

Users with mobility impairments may have difficulty using elements if their target area is small. These users may have trouble with aiming or being able to keep a pointer steady. Larger target areas help these users interact with controls and elements.

How to Pass ‘Target Size (Minimum)’

Ensure that the target areas for all pointer inputs are at least 24 by 24 CSS pixels.

Exceptions

When there is at least 24 CSS pixels distance to any adjacent target.
When the target is a sentence or block of inline text.
When the presentation of a target that doesn’t meet the requirements is essential.

‘Target Size (Minimum) Tips

Making the spacing of targets at least 44 by 44 CSS pixels will pass 2.5.5 – Target Size at Level AAA.

Remember that pointers include both mouse control and touch control.

Although there is a minimum size, the larger the control the easier it is for everyone to use.

Consider making frequently used or important controls larger.

Be careful not to place controls near the edge of a screen as this may be more difficult to reach for some users.

Introduction

Some users with mobility impairments may have difficulty using a dragging action precisely, either by mouse pointer or touch. Others may use an accessibly input mechanism, such as eye control, that makes dragging even more difficult or even impossible.

These users need an alternative that enables them to complete the same input as dragging.

How to Pass ‘Dragging Movements’

Where a control uses dragging, provide an alternative.

Exceptions

Where dragging is essential. For example, creating art or playing a game where dragging is a design feature.

‘Dragging Movements’ Tips

A dragging movement is one where only the start and end points matter, the direction between them is not considered.

A common example of a dragging control is one where the user drags elements into a certain order. This can also be achieved by a clickable up/down navigation or by typing numbered values next to elements.

Introduction

Focus indicators help users see which element on a page currently has focus, they are especially useful for people with low-vision, memory or mobility impairments.

Where a focus indicator is used to show an element has current focus, it must be clearly visible and distinguishable. This goes beyond earlier guidance to ensure indicators are visible and have contrast between focused and unfocused states.

How to Pass ‘Focus Appearance (Minimum)’

When a component receives keyboard focus:

The focus indicator has a contrast ratio of at least 3:1 between focused and unfocused states;
The focus indicator has a contrast ratio of at least 3:1 against adjacent colours;
The element within focus isn’t hidden; and
The focus indicator area:
- Has an outline that’s at least 1 CSS pixel thick; or
- Has a shape that’s at least the area of a 4 CSS pixel-thick line;

‘Focus Appearance (Minimum)’ Tips

It may sound basic, but a thick black border around an element when it receives focus will often do the trick (unless your website has a very dark background colour of course).

You could also change the background colour of the whole element on focus.

If you’re worrying about pixel sizes, your indicator probably isn’t clear enough – keep it simple.

Introduction

Additional content triggered by keyboard focus or mouse hover can cause accessibility issues for users with visual or cognitive impairments. Additional content can surprise users, prevent them completing a task or obscure content.

To overcome these issues, users must be able to understand when additional content appears and dismiss it.

How to Pass ‘Content on Hover or Focus’

Where keyboard focus or mouse hover triggers additional content to appear, the content must be:

Dismissible by the user without moving keyboard focus or mouse hover (for example by pressing the ‘escape’ key or closing on click);
Hoverable by the mouse pointer so the pointer can be moved over the content; and
Persistent until the user changes keyboard focus or mouse hover, dismisses the content or the content is no longer valid.

Exceptions

Where the content communicates an input error
Where the content doesn’t obscure other content
Where the additional content is controlled by the user, for example tooltips or sub-menus that appear on mouse hover which are controlled by web browser settings

‘Content on Hover or Focus’ Tips

Try not to use this type of content if you can avoid it – add your additional content to the page.

Introduction

Users with visual or cognitive impairments may wish to amend the default spacing around text content to make it easier for them to read and understand. When they do so, the content should remain visible in full.

How to Pass ‘Text Spacing’

Content and function remain intact when a user changes:

Line height to at least 1.5 times the font size;
Paragraph spacing to at least 2 times the font size;
Letter spacing to at least 0.12 times the font size; and
Word spacing to at least 0.16 times the font size.

Exceptions

Video captions

Image of text

‘Text Spacing’ Tips

For the most part, a website written in good HTML and CSS will comply, the key here is not having anything that prevents the user from making the changes to spacing.

Introduction

All users benefit from a good contrast between the components on your website and the colour around them.

Some users with visual impairments need a stronger contrast than others to fully distinguish and use components such as input fields, buttons and controls, so getting your colour choice right is essential.

How to Pass ‘Non-Text Contrast’

Ensure user controls have a contrast of at least 3:1 to the colour around them;
Where controls change colour on focus or use, ensure the colours used have a contrast of at least 3:1; and
Ensure all graphics (for example icons, graphs and charts) have a contrast of at least 3:1 to the colour around them.

Exceptions

Where a user interface component is visible but inactive (for example, a disabled button)
A graphic is not required for understanding (for example, a chart where labels give the same information as the coloured lines or a decorative graphic)
Brand logos
Representations of other things, such as a screenshot of a website or a heat map

‘Non-Text Contrast’ Tips

Remember the different states a component may have and ensure they all comply.

Where form fields use an indicator (for example for missing information), use a colour that meets the contrast criteria.

Where fields or controls use a border, ensure the border meets the criteria.

For graphs, ensure each line or bar has a 3:1 contrast with both the background and the other lines or bars.

For pie charts, ensure each segment as a 3:1 contrast with both the background and the segment either side of it.

Introduction

Some users with visual impairments need to resize text to read it comfortably.

When users enlarge content up to 400% of the default size, they should not have to scroll in their browser in more than one direction – horizontally and vertically.

How to Pass ‘Reflow’

Ensure vertical content doesn’t require a horizontal scroll at a width of 320 CSS pixels
ensure horizontal content doesn’t require a vertical scroll at a height of 256 CSS pixels

Exceptions

Where multi-directional scrolling is essential for meaning or function (for example images, maps, diagrams, games and components that require toolbars remain in view)
Complex data tables

‘Reflow’ Tips

Responsive web design, where content reflows to fit the user’s viewport, may already mean your website complies with this guideline.

It’s best not to use horizontal scrolling when writing in most languages, as we are accustomed to reading columns of text vertically. Reflow your content into a single vertical column when enlarged.

320 CSS pixels is the same as a default viewport of 1280 pixels enlarged 400%.

256 CSS pixels is the same is a default viewport of 1024 pixels enlarged 400%.

Introduction

How to Pass ‘Status Messages’

‘Status Messages’ Tips

See Also

Introduction

How to Pass ‘Accessible Authentication’

Exceptions

‘Accessible Authentication’ Tips

See Also

Introduction

How to Pass ‘Visible Controls’

Exceptions to ‘Visible Controls’

See Also

Introduction

How to Pass ‘Target Size (Minimum)’

Exceptions

‘Target Size (Minimum) Tips

See Also

Introduction

How to Pass ‘Dragging Movements’

Exceptions

‘Dragging Movements’ Tips

See Also

Introduction

How to Pass ‘Focus Appearance (Minimum)’

‘Focus Appearance (Minimum)’ Tips

See Also

Introduction

How to Pass ‘Content on Hover or Focus’

Exceptions

‘Content on Hover or Focus’ Tips

See Also

Introduction

How to Pass ‘Text Spacing’

Exceptions

‘Text Spacing’ Tips

See Also

Introduction

How to Pass ‘Non-Text Contrast’

Exceptions

‘Non-Text Contrast’ Tips

See Also

Introduction

How to Pass ‘Reflow’

Exceptions

‘Reflow’ Tips

See Also

Start here

Boring pages

Security

Search Wuhcag