‘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

The contrast between user interface components, graphics and adjacent colours is at least 3:1.

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.

See Also

For ‘Reflow’, you must ensure all content retains meaning and function without scrolling in two dimensions. 

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

See Also

‘Identify Input Purpose’ requires the purpose of input fields to be programmatically determinable.

Introduction

All users, but particularly those with cognitive impairments, benefit from programmatically determinable input fields. These allow assistive technologies to understand the purpose of fields and present them in a preferred format to the user.

In addition, users with motor impairments benefit from autocomplete on forms by reducing the need for fine motor movement.

How to Pass ‘Identify Input Purpose’

  • Specify the intention of each input field with “input type=”type”
  • Use specific autocomplete values to allow the user’s browser to prefill fields where it already has the data

‘Identify Input Purpose’ Tips

There’s a full list of input purposes that need to be covered at www.w3.org/TR/WCAG22/#input-purposes

Use the most specific label for each field, for example “bday” rather than “date” if you want a user’s date of birth. While the field does want a date, its purpose is to collect the birthday. 

See Also

Your website adapts to portrait and landscape views.

Introduction

Some users have a preferred orientation (portrait or landscape) or physical requirements and need content to adapt to their preference. Others have visual impairments and may find one orientation easier to use.

Most websites pass this guideline as they are responsive and adapt to the user’s chosen orientation.

How to Pass

  • All content retains meaning when switching orientation
  • All content retains function when switching orientation 

Exceptions

When a single orientation is essential, for example:

  • A landscape image that would be too small to see in portrait mode
  • Where the width or height of one orientation is necessary for its function 

See Also

Understanding Succession Criterion 1.3.3 (W3C)

Reduce the risk of input errors for sensitive data

All users make mistakes when inputting data (for example, into forms and checkouts). You should try to prevent errors occurring, especially when users are committing to legal or financial agreements, or otherwise sharing their data.

Users can make costly mistakes if they don’t fully understand the implications of their actions or can’t rectify their errors. Error prevention is all about reducing risk to your users by adding in confirmation stages to processes that pose a legal or financial risk.

What to do

To pass this guideline, you need to make sure that:

  • Legal commitments, financial transactions, test responses and changes to user controlled data are reversible; or
  • Legal commitments, financial transactions, test responses and changes to user controlled data are checked for input errors and the user is given a chance to correct any mistakes; or
  • Add a confirmation page to the data input submission process that summarises the input and the outcome, with an option to correct or discontinue. This page has an input field (for example, a confirm button or checkbox) that acts as confirmation of the submission.

Tips

  • Guideline 3.3.6 widens this guideline to include all types of data transfer, not just these high-cost transactions.
  • This guideline applies to deletion of data as well as submission.
  • Legal commitments are transactions where the user incurs a legally binding obligation or benefit.
  • User controlled data means things like name and address fields for a user’s account.
  • Provide a confirmation webpage that gives the user a chance to read a summary of everything they have input and positively confirm their actions (especially if inputs were spread over several pages in the process).
  • Validate forms inline and add an error message if input is incorrect. Be specific in explaining how to fix mistakes.

See also

Suggest fixes when users make errors

All of your users make mistakes – they’re only human after all. When they make mistakes on your website (whether it’s their fault or not), they get frustrated.

Fortunately, it’s also a great time to demonstrate to your users how much you care about them. Show suggestions and hints when users make mistakes on things like forms and checkouts.

What to do

To pass this guideline, you need to make sure that:

  • Your forms identify input errors.
  • When the error is missing a required field, communicate this to the user with a text suggestion.
  • If the error is in the format of the input, the suggestion shows the correct format (for example, ‘The date must be in the form DD/MM/YYYY’).
  • If the error is because the input needed to be from a limited list of values, provide these values and explain them.

Tips

  • This guideline builds on Guideline 3.3.1, by adding a requirement to make a suggestion for user input to fix errors.
  • Be specific.
  • If a user makes an error, provide a list of links that the user can follow to jump back to correct their input.
  • Make it easy to re-submit incorrect forms by retaining all correct data.

Exceptions

You don’t need to provide suggestions if:

  • Making a suggestion would negatively impact data security.
  • Making a suggestion goes against the purpose of the field.

See also

Icons and buttons are consistently identifiable

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.

What to do

Ensure that:

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

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

See also

Use menus in the same place across your website

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 will thank you.

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

What to do

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

Tips

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

See also

Tell users when the language on a page changes

If your website has content in a different language to its main language, you should tell your users about the change. This helps those who use assistive technology to read the full content.

What to do

  • Set your website’s main language by meta tag (see Guideline 3.1.1).
  • Add a language attribute to content that is not in the main language.

Tips

  • HTML language codes match the ISO language codes standard.
  • If you have an alternative language version or translation of some content, link to it with the name of the language in that language (for example, ‘Francais’, ‘Deutsch’) and add a language tag to the link.

Exceptions

If you are using a single word that has become part of the main language (for example, ‘rendezvous’ is used in English but is of French origin).

See also