Intermediate (Level AA) Archives - Page 2 of 3

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

Introduction

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

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

How to Pass ‘Orientation’

All content retains meaning in either position.
All content retains function in either position.

‘Orientation’ Exceptions

When a single alignment is essential, for example:

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

Introduction

When a user is going through a process that results in a serious financial or legal commitment, or a change in data storage, 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.

Where the errors are legally binding, this can lead to serious consequences.

How to Pass ‘Error Prevention’

If a process results in:

a legal commitment;
a financial commitment;
modification or deletion of stored data; or
submission of test responses

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

Error Prevention (All) widens this guideline to include the submission and deletion of any data, so rather than judging if the submission is financial or legal, apply the solutions to all submissions and deletion requests.

Introduction

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

Input errors are common, especially where fields are mandatory or will only accept input in a specific format. Gong beyond identifying errors to suggesting corrections is particularly helpful to users with cognitive or visual limitations.

How to Pass ‘Error Suggestion’

Ensure that:

You identify input errors and suggest corrections where possible
.
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 3.3.1 – Identify Errors 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.

‘Error Suggestion’ Exceptions

You don’t need to provide suggestions if:

It would negatively impact data security; or
It goes against the purpose of the content.

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

If your website has content in a different language to its main one, you should tell your users about the change.

This helps browsers render the content correctly and assistive technology, such as screen readers, to interpret content accurately.

How to Pass ‘Language of Parts’

Set the default language of each webpage using the “lang” HTML attribute; and
Add a further “lang” attribute to content that is not in the main language.

Exceptions

Words that have become part of the main lexicon (for example, ‘rendezvous’ is used in English but is of French origin).

Proper names.

Technical terms.

Words of indeterminate language.

‘Language of Parts’ Tips

If you have an alternative language version or translation of some content, link to it with the name of the language (for example, ‘Francais’, ‘Deutsch’) and add a “lang” tag to the link.

Introduction

A webpage can be broken up with headings where content changes topic, introduces a sub-topic or changes purpose. Where headings are used, they must be descriptive.

Users with slow reading ability or short-term memory issues benefit from headings for sections of content to make it clear what the section contains. People who use screen readers may also use headings to navigate to sections.

As well as headings, descriptive labels on form control help users know how to complete the form fields.

How to Pass ‘Headings and Labels’

Use descriptive headings and subheadings in content where appropriate (a change in topic or purpose)
Use descriptive labels on controls and input fields

‘Headings and Labels’ Tips

A single letter of the alphabet can be a good heading (for example, in an alphabetical index).

If you regularly produce similar content, keep headings consistent (for example, a website about film reviews might have ‘Plot’, ‘Characters’ and ‘Verdict’ on each individual page).

Make sure headings can be programmatically determined as required by Info and Relationships.

Introduction

All users benefit from a website that makes it easy to find and navigate to webpages. Some users will find certain methods easier than others, so it’s important to offer a range of options.

For example, users with visual impairments may prefer a search function, whereas those with cognitive impairments may find a sitemap easier to use.

How to Pass ‘Multiple Ways’

Provide multiple ways for users to find your website’s pages by:

Adding a sitemap page which links to every page on your website; and
Including a search function on every page (by adding it to the header); and
Providing a clear and consistent main navigation menu.

Exceptions

You don’t need to provide multiple ways to access pages that users only reach after a certain process (for example, a receipt or confirmation page).
If your website only has a handful of pages, one clear navigation menu may suffice.

‘Multiple Ways’ Tips

Though you only need at least two methods available to user, the three suggested above make a more comprehensive solution.

A good HTML sitemap will depend on the structure of your website. Design your sitemap so that it best reflects the structure of your website pages and contains all your pages.A ‘related pages’ section (which shows links to similar pages on your website) is a good way of helping users navigate around your website.

Introduction

Users with visual or cognitive impairments may rely on changing font size, colour, alignment or spacing to enjoy your content.

Text allows for this kind of personalisation, but images of text almost always don’t.

How to Pass

Don’t use an image of text when you can use plain text
Display quotes as text rather than images
Use CSS to style headings as text
Use CSS to style navigation menus as text

Exceptions

If using an image of text is essential because you can’t achieve the effect with text (for example, presenting a particular example of typography)
If the presentation can’t be achieved with the technology used to build the website
If the text is part of an image that contains other visual content, such as labels on a diagram
Purely decorative text
Brand logos

Tips

Images of text are subject to guidelines on colour contrast – see 1.4.3 – Contrast (Minimum) and 1.4.6 – Contrast (Enhanced).

The exception of the website being built in a technology that doesn’t allow the text to be presented as text is removed in the Guideline 1.4.9 – Images of Text (No Exception) at Level AAA.

Introduction

How to Pass ‘Identify Input Purpose’

‘Identify Input Purpose’ Tips

See Also

Introduction

How to Pass ‘Orientation’

‘Orientation’ Exceptions

See Also

Introduction

How to Pass ‘Error Prevention’

‘Error Prevention’ Tips

See Also

Introduction

How to Pass ‘Error Suggestion’

Tips

‘Error Suggestion’ Exceptions

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 ‘Language of Parts’

Exceptions

‘Language of Parts’ Tips

See Also

Introduction

How to Pass ‘Headings and Labels’

‘Headings and Labels’ Tips

See Also

Introduction

How to Pass ‘Multiple Ways’

Exceptions

‘Multiple Ways’ Tips

See Also

Introduction

How to Pass

Exceptions

Tips

See also

Start here

Boring pages

Security

Search Wuhcag