"Information and the operation of the user interface must be understandable." - WCAG2.1

Readable

"Make text content readable and understandable." - WCAG2.1

Language of Parts

Sometimes there is a need for a page to show the content in multiple languages. In such cases, it is important to mark those parts so that assistive technologies can present the information according to the presentation and pronunciation rules for that language.

Most professions require frequent use of technical terms which may originate from a foreign language. Such terms are usually translated only into some languages. The universal nature of technical terms also facilitates communication between professionals – examples: Homo sapiens, Alpha Centauri, hertz, and habeas corpus.

To better explain what needs to be marked as a different language and what does not, WCAG prepared three examples:

1. A German phrase in an English sentence.

He maintained that the DDR (German Democratic Republic) was just a 'Treppenwitz der Weltgeschichte'

German phrase inside '' is marked as a German

<p>
 He maintained that the DDR (German Democratic Republic) was just a
 <span lang="de">'Treppenwitz der Weltgeschichte'</span>
</p>

1. Alternative language links

When a page includes links to versions of the page in other languages, the text is the name of the language, in that language. The language of each link is indicated via a lang attribute.

<ul id="language-menu" role="menu">
 <li lang="de" role="menuitem">
   <a href="/de/page" title="German">
     <bdi>Deutsch</bdi>
   </a>
 </li>
 <li lang="es" role="menuitem">
   <a href="/es/page" title="Spanish">
     <bdi>Español</bdi>
   </a>
 </li>
 <li lang="fr" role="menuitem">
   <a href="/fr/page" title="French">
     <bdi>Français</bdi>
   </a>
 </li>
</ul>

Note: the bdi element used in the example above is the bidirectional isolate element, which tells the browser's directionality algorithm to treat the text it contains in isolation and is useful when content might change direction. Find out more on MDN

1. "Podcast" used in a French sentence.

À l'occasion de l'exposition "Energie éternelle. 1500 ans d'art indien", le Palais des Beaux-Arts de Bruxelles a lancé son premier podcast. Vous pouvez télécharger ce podcast au format M4A et MP3

The word podcast is not marked as French.

Check out more examples

Predictable

Make Web pages appear and operate in predictable ways. - WCAG2.1

Consistent Navigation

Consistent navigation is something that most users, even those without disabilities, rely on. When browsing a set of pages, the user can spot useful information quickly and easily. Presenting repeated content in the same order is also important for visually-oriented users who use spatial memory or visual cues within the design to locate repeated content.

It is important to note that the phrase "same order" in this section does not mean to imply that subnavigation menus cannot be used or that blocks of secondary navigation or page structure cannot be used. Instead, this is intended to assist users who interact with repeated content across Web pages to predict the location of the content they are looking for and find it more quickly when they encounter it again.

This helps users with cognitive limitations, users with low vision, users with intellectual disabilities, and also those who are blind

Examples of consistent navigation are:

• A consistently located control, e.g., the search button is always the last item in the top navigation
• Consistently positioned skip navigation controls, e.g., skip to the main content button is placed as the first element of every page

Consistent Identification

To provide users with a better experience and simplify the usage of the web page, it's important to consistently identify functional components. A strategy that people who use screen readers use when operating a Web site is to rely heavily on their familiarity with functions. If identical functions have different labels, the site is more difficult to use.

This consistency extends to the text alternatives. If icons or other non-text items have the same functionality, then their text alternatives should also be consistent. A list of examples can be found at Understanding Success Criterion 3.2.4.

While it is desirable and best practice always to be consistent within a single web page, this Success Criterion only addresses consistency within a set of web pages where something is repeated on more than one page in the set.

Input Assistance

Help users avoid and correct mistakes. - WCAG2.1

Error Suggestion

In case an error is detected and the correction(s) are known, suggestions should be provided to the user as a guide on how to fix the error. This can be omitted if it jeopardizes the content’s security or purpose, e.g., login credentials or CAPTCHA.

If a mandatory field contains no information, the message should explain that the field is required. To implement this, aria-required can signal this information to assistive technologies.

<p>
 <label for="username">Login name: </label>
 <input type="text" name="username" id="username" aria-required="true" />
</p>

If the information for a field is required to be in a specific data format (e.g., date or phone number) or one of a limited set of values (e.g., the month of a year or country name), the validation can be triggered on the client to improve the experience. Show an alert dialog with a description of what caused the error and, if applicable, tell the user what is correct input.

Error Prevention

This success criterion intends to help people with disabilities avoid serious consequences as a result of accidental mistakes when performing an action that cannot be reversed, e.g.:

• buying a non-refundable airplane ticket
• buying stocks
• modifying and/or deleting user-controllable data
• doing an online exam

E.g., when buying stocks, a user might unintentionally input a number higher than anticipated. Users with disabilities may be more likely to make mistakes. People with reading disabilities may transpose numbers and letters, and those with motor disabilities may hit keys by mistake.

Providing the ability to reverse actions allows users to correct a mistake that could result in serious consequences. The ability to review and correct information allows the user to detect a mistake before taking action with serious consequences.

Most often, a simple "review" view will do the trick. In case of legal transactions, such as online payments or submitting an income tax return, online services should provide the user with the ability to review (and change) the answers before submitting. If an action causes information to be deleted, a confirmation should be requested from a user or an undo mechanism should be provided. An alternative approach could be to place a checkbox next to the submit button that the user should press and, with that, the user confirms that the inputs have been reviewed.

Other options include (but aren't restricted to):

• In case of a legal transaction providing some time after a purchase where the user can amend or cancel the purchase
• In case of a delete action is to provide an ability to recover the deleted data