Tag: Understandable

Abbreviations (3.1.4 – Level AAA)

Posted on April 25, 2014| By | In Advanced (Level AAA)

Define any abbreviations.

Introduction

Using abbreviations can cause confusion and prevent some of your users from understanding your website. Users with limited memory, cognitive impairments or a reliance on screen magnifier may struggle with shortened words and phrases. 

Avoid using abbreviations where you can and explain them when you need to use them.

Abbreviations (like Dr for Doctor) also include acronyms (NATO) and initialisms (FBI).

How to Pass ‘Abbreviations’

  • Avoid using abbreviations, acronyms and initialisms.
  • If you need to use an abbreviation, you can explain the meaning to your users by:
    • Showing the meaning in the text (for example, Federal Bureau of Investigation (FBI)); or
    • Linking to a definition on a glossary page on your website; or
    • Linking to a definition footnote on the same page; or
    • Using the “abbr” HTML tag.

Tips

  • The tidiest solution when you need to abbreviate is the HTML option, which creates a hidden expansion that appears on hover and is understood by screen readers.
  • If your use of an abbreviation always means the same thing, you only have to define it the first time it appears on a page.
  • If your use changes you must define the word on every occasion (for example ‘Dr’ might mean ‘Doctor’ in one paragraph and ‘Drive’ as part of an address in another).
  • Think of creative ways to avoid abbreviations. For example, rather than “FBI” you could use “Federal Bureau of Investigation” once then “the Bureau” afterwards).


‘Abbreviations’ Exceptions

You don’t need to explain an abbreviation, acronym or initialism if it’s part of the language (for example, “laser” or “CD”).

See Also

Unusual Words (3.1.3 – Level AAA)

Posted on April 14, 2014| By | In Advanced (Level AAA)

Define any unusual words or phrases.

Introduction

Some of your users will find it hard to read unusual uses of words on your website. Things like figurative language, idioms and jargon can be difficult to process. Users who read your content zoomed in may struggle with unusual words if they can’t see the context around them.

Avoid using unusual words where you can and explain the use of words when you need to use them.

How to Pass ‘Unusual Words’

  • Avoid using technical, figurative or idiomatic words and phrases.
  • If you need to use an unusual word or phrase, you can explain the meaning to your users by:
    • Showing the meaning in the text (for example, ‘I like bass. A bass is a fish.’); or
    • Showing the meaning in brackets (for example, ‘I like bass (a type of fish)’; or
    • Linking the word to a definition on a glossary page on your website; or
    • Linking the word to a definition footnote on the same page.

‘Unusual Words’ Tips

  • If your use of an unusual word always means the same thing, you only have to define it the first time.
  • If your use of an unusual word changes, you must define the word on every occasion (for example, a bass might be a type of fish in one paragraph and a musical instrument in another).
  • Always define technical terms and jargon that any user might not understand depending on their familiarity with the subject.
  • Wherever possible, avoid using jargon and idioms. These are bad for novices in your industry and users who don’t natively speak your language.


See Also

Error Prevention (Legal, Financial, Data) (3.3.4 – Level AA)

Posted on October 08, 2013| By | In Intermediate (Level AA)

‘Error Prevention (Legal, Financial, Data)’ requires websites to check, confirm and allow reversal of pages that cause important commitments.

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.

See Also

Error Suggestion (3.3.3 – Level AA)

Posted on October 01, 2013| By | In Intermediate (Level AA)

‘Error Suggestion’ requires websites to suggest corrections when users make mistakes.

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.

 See Also

Consistent Identification (3.2.4 – Level AA)

Posted on September 24, 2013| By | In Intermediate (Level AA)

‘Consistent Identification’ requires components with the same function to be used consistently.

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

See Also

Consistent Navigation (3.2.3 – Level AA)

Posted on September 17, 2013| By | In Intermediate (Level AA)

‘Consistent Navigation’ requires that menus and standard controls are positioned consistently.

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.

See Also

Language of Parts (3.1.2 – Level AA)

Posted on September 10, 2013| By | In Intermediate (Level AA)

Each part of a webpage has a default human language assigned.

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.

See Also

Labels or Instructions (Level A – 3.3.2 )

Posted on March 11, 2013| By | In Beginner (Level A)

‘Labels or Instructions’ requires forms and controls to provide labels or instructions for user input.

Introduction

Most websites have at least some elements that require user input. For example, these might be controls or forms. It’s essential to label controls such as radio buttons and checkboxes so that users understand what they are selecting.

It can also be useful to provide users with clear instructions around forms and controls, especially if there are validation rules around inputs. Be wary that overdoing instructions can make controls harder to understand.

How to Pass ‘Labels or Instructions’

  • Use descriptive labels on form fields and controls.
  • Provide text instructions at the beginning of a form or section of a form.
  • Show users the expected format of free text entries.
  • Indicate required fields.
  • Use text to identify required fields that have been missed.

‘Labels or Instructions’ Tips

Keep your labels simple – too much explanation can be counter-productive. Things like ‘First name’, ‘Email’ and ‘Your message’ are fine.

The same goes for instructions, ‘Required fields are in red and have a * symbol’ works great. So does ‘Fill in this form and click ‘Submit’ to get in touch’.

Think about how your use of colour affects things like required fields if you want to highlight them by colour. Don’t highlight by colour alone, pick a symbol too.

Consider error identification as well, and make sure that you give helpful instructions when your users make mistakes on forms.

See Also 

Error Identification (Level A – 3.3.1 )

Posted on March 04, 2013| By | In Beginner (Level A)

‘Error Identification’ requires websites to identify and describe input errors for users.

Introduction

Users of all kinds will make mistakes when using your website, so it’s important to clearly identify and describe errors. Input errors include users not providing required information as well as providing informating that doesn’t meet validation criteria.

Be as specific as possible when highlighting an error, so a user has the best chance of fixing their mistake and continuing. This means doing more than adding a red box around a missed field for example.

How to Pass ‘Error Identification’

  • Identify and explain to the user any mistakes that you can detect automatically.
  • Add error explanation close to the error, showing what is wrong and how to fix it.

‘Error Identification’ Tips

  • If a form requires input in a certain format, show and describe the required format.
  • If a mandatory field is empty, highlight the field and explain what’s required.
  • Build forms to be forgiving, accepting variations on the formats you prefer.
  • Don’t ask for too much information, just what you need.
  • Be specific. Use clear, concise instruction and form field labels.
  • Highlight mistakes in forms with colours and symbols.
  • Don’t clear a form if a user makes a mistake. Save the information and allow the user to edit their error and continue.
  • Provide extra help by giving your contact details on all pages (the header or footer are great) and especially near forms.

See Also

On Input (3.2.2 – Level A)

Posted on February 25, 2013| By | In Beginner (Level A)

Elements do not change when they receive input.

Introduction

As we saw with On Focus, all users need predictability when navigating a website. If elements don’t act as they expect, they may become disorientated. 

This is also true when elements receive input, they shouldn’t automatically change. For example, forms shouldn’t skip to another field or auto-submit without confirmation from the user.

A change on input is especially troublesome for users who navigate by keyboard, as well as those with visual disabilities or cognitive limitations. 

How to Pass

Ensure no elements change on input.

Here are some examples of the kinds of things to look out for:

  • Forms must not auto-submit when all fields are filled – this prevents your users from checking and editing what they have written.
  • Focus (the field where the user will input next) must not automatically jump to the next field in a form once a field is complete.
  • Using a control (like selecting yes or no) must not automatically perform the action (for example, selecting to subscribe to a newsletter in a check box must not automatically subscribe your user, they should be able to click a submit button to confirm their decision).

Exceptions

Elements can change on input if you inform the user of the change before they have the chance to input their data or make their selection. For example, you may have seen websites with options in the header to choose a text size. Once you click on the size you want, the website changes without giving you the chance to confirm your choice.

Controls like that don’t need to have a submit button if it’s clear from the text before the element what will happen when you input.

Tips

The easiest way to pass is to use submit buttons and avoid jumping your users between fields. It’s all about leaving the control with your users, where it belongs.

See Also