Category: Advanced (Level AAA)

Accessible Authentication (Enhanced) (3.3.9 – Level AAA)

Posted on March 15, 2023| By | In Advanced (Level AAA)

‘Accessible Authentication (Enhanced)’ must avoid authenticating users through memory, transcription or cognitive tests.

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.

This builds on Accessible Authentication by removing the exceptions around identify objects or non-text content the user had provided.

How to Pass ‘Accessible Authentication (Enhanced)’

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.

‘Accessible Authentication (Enhanced)’ 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.

You can send an authentication link to a user and skip the need for passwords.

See Also

Concurrent Input Mechanisms (2.5.6 – Level AAA)

Posted on October 23, 2021| By | In Advanced (Level AAA)

‘Concurrent Input Mechanisms’ requires no restrictions on modes of input.

Introduction

Users may choose to switch between different methods of input when interacting with a website. For example, for some controls a user might prefer to input by keyboard and for others they might favour a mouse.

Users might also prefer to override the primary input mechanism for a device. For example, connecting an external keyboard to a touchscreen tablet. Allowing users to switch between concurrent input mechanisms can satisfy these needs.

How to Pass ‘Concurrent Input Mechanisms’

Ensure there are no restrictions on modes of input. 

Exceptions to ‘Concurrent Input Mechanisms’

  • Where a set input mode is essential. For example, a touch-typing test.
  • If the restriction is required for security.
  • If the restriction is required to respect a user’s setting.

See Also

Understanding Success Criterion 2.5.6 (W3C)

Target Size (2.5.5 – Level AAA)

Posted on October 22, 2021| By | In Advanced (Level AAA)

The target size for pointer inputs is at least 44 by 44 CSS pixels.

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’

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

Exceptions

  • When the target is available through an equivalent control on the same page that meets the requirements.
  • When the target is a sentence or block of inline text.
  • When the target size is controlled by the user agent.
  • When the presentation of a target that doesn’t meet the requirements is essential.

‘Target Size’ Tips

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.

See Also

Understanding Success Criterion 2.5.5 (W3C)

Focus Appearance (Enhanced) (2.4.12 – Level AAA)

Posted on July 07, 2021| By | In Advanced (Level AAA)

‘Focus Appearance (Enhanced)’ requires that focus indicators are more clearly distinguishable when active.

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 2.4.11 to increase contrast requirements and expands the minimum area of the indicator.

How to Pass ‘Focus Appearance (Enhanced)’

When a component receives keyboard focus:

  • The focus indicator has a contrast ratio of at least 4.5:1 between focused and unfocused states;
  • The element within focus isn’t hidden; and
  • The focus indicator area is at least 2 CSS pixels around the perimeter.

‘Focus Appearance (Enhanced)’ 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.

See Also

Animation from Interactions (2.3.3 – Level AAA)

Posted on March 10, 2021| By | In Advanced (Level AAA)

‘Animation from Interactions’ requires that users can disable motion animation.

Introduction

Animations on a website can distract users and, in some cases, cause nausea. Avoiding animated elements triggered by the user (for example parallax scrolling or a ‘page loading’ animation) can help these users enjoy the website.

How to Pass ‘Animation from Interactions’

  • Don’t use motion animation on your website; or
  • Allow users to disable all non-essential motion animation.

Exceptions

Animation that’s essential to a website’s function or information, if the same cannot be achieved by other means. 

‘Animation from Interactions’ Tips

“Motion animation” means adding steps to states, such as making a bar chart appear to grow from 0 to 100, rather than loading it at 100.

Add a site-wide control to the top of your website to allow the user to turn off non-essential animation.

This doesn’t mean websites with animation can’t pass, as an animated video would be fine if the purpose of the page was to display that animated video. It’s decorative animation you should seek to avoid or allow users to turn off.

See Also

Timeouts (2.2.6 – Level AAA)

Posted on March 08, 2021| By | In Advanced (Level AAA)

Warn users about timeouts that cause data loss.

Introduction

Time limits can cause problems for some users with cognitive impairments, who may take longer to complete tasks on a website. It’s therefore important to allow users to complete a process in more than one sitting and alert users to the length of any timeout period.

How to Pass ‘Timeouts’

  • Where possible, allow users 20 hours before a timeout removes their data
  • Warn users of the duration of any timeout period at the beginning of the task

‘Timeouts’ Tips

There are two main types of timeout, for inactivity or a hard time limit. Inactivity is easier for users to deal with as they may be making progress (albeit at a slower pace) and so will be less likely to trigger the timeout.

Hard time limits can be justified if they protect user data or are essential for a business (for example an auction site or hotel room booking form).

Watch out for privacy regulations when you store data, many countries require explicit positive consent for you to do so.

This guideline overlaps with Timing Adjustable, which also deals with time-limits and the controls around them.

See Also

1.3.6 – Identify Purpose (Level AAA)

Posted on July 06, 2020| By | In Advanced (Level AAA)

The purpose of all components must be programmatically determinable..

Introduction

Users often set personal preferences in their browser or assistive technology to help them understand websites. By ensuring components are understandable by these technologies, users can experience websites in the way that best suits their needs.

Users with cognitive impairments (such as problems with memory, focus, language and decision-making) benefit from this approach. For example, they may set their browser to display a familiar icon for a navigation link or replace your chosen icon for one they understand.

How to Pass

  • Use ARIA landmarks to define regions of each page
  • Use HTML markup to identify links, icons and user interface components

See Also

Error Prevention (All) (3.3.6 – Level AAA)

Posted on May 09, 2014| By | In Advanced (Level AAA)

‘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

Help (3.3.5 – Level AAA)

Posted on May 07, 2014| By | In Advanced (Level AAA)

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

Change on Request (3.2.5 – Level AAA)

Posted on May 02, 2014| By | In Advanced (Level AAA)

Elements do not change without a request.

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

See Also