Tag: Operable

Focus Appearance (Minimum) (2.4.11 – Level AA)

Posted on July 06, 2021| By | In Intermediate (Level AA)

‘Focus Appearance (Minimum)’ requires that focus indicators are 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 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.

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

Character Key Shortcuts (2.1.4 – Level A)

Posted on March 01, 2021| By | In Beginner (Level A)

Allow users to turn off or remap single-key character shortcuts. 

Introduction

Keyboard shortcuts can help some users, but cause difficulty for those using speech input and some users with motor impairments. They can also cause issues on mobile screens as the functional area is reduced on a mobile keyboard.

For speech input users, single-key shortcuts (for example, the letter key “F” for starting a search) are particularly bad as a spoken word can be interpreted as several individual keystrokes. 

The best course of action is to avoid using single-key shortcuts.

How to Pass ‘Character Key Shortcuts’

  • Don’t use single-key shortcuts
  • If you really want to:
    • give users a way to turn off the shortcut;
    • allow users to remap the shortcut to use non-character keys; or
    • ensure the shortcut only works when an element has focus.

Exceptions

  • Shortcuts where one key is not a character (for example ‘alt’ or ‘alt’ + ‘c’)
  • Elements where the shortcut is only active on focus (for example, lists and dropdown menus).

‘Character Key Shortcuts’ Tips

One last time, please just avoid setting up single-key shortcuts.

Characters include letters, numbers, punctuation and symbols – anything you could type into a word processor and print off.

See Also

Section Headings (2.4.10 – Level AAA)

Posted on March 26, 2014| By | In Advanced (Level AAA)

‘Section Headings’ requires you to organise content with headings.

Introduction

Adding section headings to all content will help your users understand your website. They are most helpful for users who have difficulty focusing or remembering where they are on a page, as well as users with a visual impairment who may navigate by skipping between headings.

You can help these users, and everyone else, by ensuring that all content on your website is broken up by clear and informative headings.

How to Pass ‘Section Headings’

Add a heading for every new thought or topic in your content (for example, a travel article may have headings to indicate the distinct sections on dining, transportation, and lodging).

Exceptions

A webpage can be single block of content with only one header if it is about one thought or topic.

‘Section Headings’ Tips

A section is a self-contained portion of written content that deals with one or more related topics or thoughts.

A section may consist of one or more paragraphs and include graphics, tables, lists and sub-sections.

Beware of making your content harder to read by forcing in too many headings.

Certain content may not be able to meet this guideline, for example if your website publishes unabridged historical documents that don’t use headings.

See Also

Link Purpose (Link Only) (2.4.9 – Level AAA)

Posted on March 19, 2014| By | In Advanced (Level AAA)

‘Link Purpose (Link Only)’ requires that every link’s destination is clear from its text.

Introduction

It’s essential that you make your links clear and easy to understand.

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.

How to Pass ‘Link Purpose (Link Only)’

Make sure that for each link on your website:

  • The destination of the link is clear from the link text (for example, ‘My blog’); or
  • If the link is an image, the alt text of the image makes the link destination 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 it’s 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 (Link Only)’ Tips

You may have passed this if you didn’t really on link context for Link Purpose (In Context).

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

Location (2.4.8 – Level AAA)

Posted on March 12, 2014| By | In Advanced (Level AAA)

‘Location’ requires you to let users know where they are on your website.

Some of your users will have problems understanding the structure of your website. They can get lost, especially during interactions like checkouts that take place over a few pages.

You can help your users by making it clear where they are on your website.

How to Pass ‘Location’

  • Use breadcrumbs to help with navigation. Show the sequence a user is following and where they are in that sequence. For examplem, You are here: Home > Fish > Bass; and
  • Add a sitemap page to your website (see Multiple Ways) so your users have another way of finding what they want. Add a link to the sitemap somewhere prominent like the header.

‘Location’ Tips

Use full page titles for breadcrumbs when they are 1-3 words long.

Abbreviate longer titles to make them easier to read (for example, ‘A Guide to Exotic Fish’ could just as well be ‘Exotic Fish’ for the purpose of a breadcrumb).

For a process that takes a few pages (like a shopping cart), show all the steps in the process and highlight where the user is.

If a page has a too many breadcrumbs, perhaps your website could be better organised.

Use your page titles in your sitemap, organised under subheadings.

See Also

Three Flashes (2.3.2 – Level AAA)

Posted on March 05, 2014| By | In Advanced (Level AAA)

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’

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

‘Three Flashes’ Tips

Remember, flashing is different to blinking. Blinking can distract users but doesn’t cause seizures. 

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

This removes the exception from Level A.

See Also

Re-authenticating (2.2.5 – Level AAA)

Posted on March 03, 2014| By | In Advanced (Level AAA)

Save user data when re-authenticating.

Introduction

It may be essential for users to re-authenticate their identity for certain functions. For example, you might set a login to expire after a certain amount of time in case a user leaves their computer unattended.

Some users need longer than others to complete tasks on a website. You can help these users by saving the information they enter and when they re-authenticate (such as logging back in), displaying the same data.

How to Pass ‘Re-authenticating’

When you ask a user to re-authenticate their identity, ensure the user can continue exactly as before with saved data (for example, their shopping basket contents, input into forms or accessibility options).

‘Re-authenticating’ Tips

Ensure surveys and questionnaires can be saved part-completed and finished later.

If you ask your users to re-authenticate after a certain amount of time, consider whether your use of a time limit is justified under Timing Adjustable and No Timing. If the limit is for security reasons, such as protecting user data, this will pass both guidelines.

See Also

Interruptions (2.2.4 – Level AAA)

Posted on February 28, 2014| By | In Advanced (Level AAA)

‘Interuptions’ requires that users can postpone or suppress non-emergency interruptions.

Introduction

Users with cognitive impairments may have difficulty maintaining their focus and attention. Interrupting their experience can impact their understanding of your content. Those with visual impairments who use a screen reader may struggle if content changes while they are consuming it.

Ideally, avoid these issues by eliminating all non-emergency interruptions.

How to Pass ‘Interruptions’

  • Don’t interrupt users, other than for emergencies
  • If you really want to interrupt users:
    • provide an option for turning off all but emergency interruptions (for example, by a ‘preferences’ or ‘accessibility’ page where choices persist for the user’s session);
    • allow users to postpone all updates and interruptions; or
    • allow users to request updates rather than receive them automatically.
  • Don’t use an automatic redirect or refresh function based on a time delay (for example, if a webpage has moved, do not redirect users to the new page after a certain amount of time).

Exceptions

Emergencies include civil emergency alert messages and messages that warn of danger to health, safety, or property – including data loss or loss of connection.

‘Interruptions’ Tips

The best thing you can do is eliminate all interruptions. 

If you must use a pop-up, make sure keyboard focus is on the window-closing ‘X’ icon in the corner that closes the pop-up. When a user closes a pop-up, return keyboard focus to the place on the page they were at before the pop-up appeared.

There is an overlap with 2.2.1 – Timing Adjustable, which allows for a warning to interrupt a user to tell them that a time limit is approaching as that would count as a loss of connection.

See Also