Pour Explained: U is for Understandable
Tags: a11y, beginners, webdev, inclusion
Published: 2020-10-03 20:38:04

## [__Principle 3 -- Understandable__](https://www.w3.org/TR/WCAG21/#understandable)

### The information provided and the operation of the UI __MUST__ be understandable. 

While writing this up I had 'Hidden Figures' on,  and I feel like it was a super appropriate movie to help inspire me to write about accessibility.  As accessibility is really about civil rights and equality in the creation and procurement of software and web applications. 

In America, the Section 508 Standards were updated in 2018 to reflect WCAG 2.0 standards at the AA Success Criterion level, but with more stringent and binding, enforceable language.

Again, a quick refresher on the levels:
  - A, AA, AAA
  - Many entities try to maintain a level AA compliance because it is achievable as well as meaningful. Maintaining just a level AA compliance is still falling short in being accessible and inclusive.
  - Every guideline success criterion is necessary to at least some users with disabilities, so don't ignore level AAA compliance.


## __Guidelines:__ 
### __[3.1 Readable](https://www.w3.org/TR/WCAG21/#readable)__

As a user, you can only hope that the textual content is readable and understandable.  This goes double for software and web applications, as we have to make sure the content is readable by human users but also assistive tech.

### __Success Criteria:__
##### 3.1.1 Language of page
__Level A__

The default language on each webpage can be programmatically determined.  
- Helping Screen Readers read the content in the correct language
- Helping translators interpret the page correctly.

```HTML
<html lang="en"></html>
```

A list of ISO language codes can be found [here](https://www.w3schools.com/tags/ref_language_codes.asp).



##### 3.1.2 Language of Parts
__Level AA__

The default language on each passage on a page can be programmatically determined.
__Exceptions:__
- Proper names
- Technical terms
- Words of indeterminate language
- Words or Phrases that have become part of the vernacular of the immediate surrounding text.

Similarly to the above criterion, a `lang` attribute can be placed on specific elements.  This is particularly useful if a section of a page is referencing a different language from the full page.

```HTML
<html lang="en">
    <body>
        <h1>Page Title in English</h1>
        <section>
             <h2>Some English Sub-header</h2>
             <p>Cupcake ipsum dolor sit. Amet sweet roll 
                jujubes croissant tootsie roll candy. Dragée
                bonbon I love toffee bear claw. Jelly-o 
                croissant halvah brownie tiramisu.
             </p>
        </section>
        <section lang="fr">
             <h2>Un sous-en-tête anglais</h2>
             <p>Cupcake ipsum dolor s'asseoir. Amet sweet roll
                jujubes croissant tootsie roll bonbons. Dragée
                bonbon J'adore la griffe d'ours au caramel. 
                Gelée-o croissant halva brownie tiramisu.
             </p>
        </section>

    </body>
</html>


```  

##### 3.1.3 Unusual Words
__Level AAA__

A process or technique is available to identify specific definitions of words and phrases that are unusual or are restricted.  This includes:
 - Idioms:
    - A phrase whose meaning cannot be deduced from the meaning of the individual words and the specific words cannot be changed without losing the meaning.
 - Jargon: 
   - Words used in a particular way by people in a particular field.

![Loralie Gilmore says, What does that mean](https://media.giphy.com/media/3o6wrF90tIqTzxCVbO/giphy.gif)

##### 3.1.4 Abbreviations
__Level AAA__

A process or technique is available to identify the expanded form or meaning of abbreviations.

##### 3.1.5 Reading Levels
__Level AAA__

When the textual content requires a more advanced reading level (Higher than the lower secondary educational level*) after the removal of proper names and titles, supplemental content, or a version that does not require a more advanced reading ability should be made available.

*__Higher than the lower secondary educational level:__ The two or three year period of education that begins after completion of six years of school and ends nine years after the beginning of primary education*

##### 3.1.6 Pronunciation
__Level AAA__

A process or technique is available to identify specific pronunciation of words where the meaning, in context, is ambiguous without knowing the pronunciation.

![jif v gif pronunciation](https://media.giphy.com/media/h2Su6ZaqUivVDl1XXP/giphy.gif)


### __[3.2 Predictable](https://www.w3.org/TR/WCAG21/#predictable)__

The order of your site Must be predictable. This includes the visual elements as well as the DOM order.

![Marie Kondo that shit](https://media.giphy.com/media/eJEs5hwhSfDDNH07Yz/giphy.gif)

##### 3.2.1 On Focus
__Level A__

When a UI component receives focus, it doesn't initiate a change of context.

##### 3.2.2 On Input
__Level A__

Changing the setting of any UI component doesn't automatically cause a change of context UNLESS the user is notified in some way of the behavior prior to the use of the component.

##### 3.2.3 Consistent Navigation
__Level AA__

If there is redundant navigation throughout the site, the navigation must be consistent in order, UNLESS a change is initiated by the user.

##### 3.2.4 Consistent Identification
__Level AA__

If a Component or components have the same functionality in a site then they need to be identified consistently.

```HTML
<input id="SearchBar" aria-label="Search" />
<button>Search</button>


<input id="SearchBar" aria-label="Find" />
<button>Find</button>

```
The two examples above perform the same functionality, and as such should be labeled consistently, but are sometimes overlooked when on different pages.

##### 3.2.5 Change on Request
__Level AAA__

Changes of context are initiated only by a user request or a device is provided or made available to turn off the changes. 

### __[3.3 Input Assistance](https://www.w3.org/TR/WCAG21/#input-assistance)__

As we create, we must provide assistance to our users.  In the cases of user input, we should help the user by providing help to avoid and correct mistakes.

![Penny needs help](https://media.giphy.com/media/oGzFZek2lszlK/giphy.gif) 

### __Success Criteria:__
##### 3.3.1 Error Identification
__Level A__

If an error is auto-detected from user input, the error is identified and described to the user in text.

##### 3.3.2 Labels or Instructions
__Level A__

![Cat owner instructions](https://media.giphy.com/media/3o7buhvQ7SWP7Xfve8/giphy.gif)

A label or instructions are provided when a component requires user input.

```HTML
// Label method 1
<label>
First Name: 
<input type="text" />
</label>

// Label method 2
<label for="firstName">
First Name: 
</label>
<input id="firstName" type="text" />

```

-try to be precise in the wording, making it easy for your user to understand from context or specific instructions. 

##### 3.3.3 Error Suggestions
__Level AA__

An error is detected and suggestions are known, these suggestions must be provided to the user.
_UNLESS:_
- Security would be jeopardized 
- Purpose of the content would be jeopardized 

##### 3.3.4 Error Prevention (Legal, Financial, Data)
__Level AA__

In the instance that a site changes or makes legal or financial transactions via modifying or deleting data, or submits test answers, at least one of these is true:
- Reversible:
  - Any submissions are able to be reversed.
- Checked:
  - Any data entered by the user is checked for errors and given the chance to correct errors if present.
- Confirmed:
  - A function is provided that allows the user to review, correct, and confirm data entries before submission.


##### 3.3.5 Help
__Level AAA__

Contextual help is available

_**Contextual help:** Leading text that provides info related to the action being performed_

##### 3.3.6 Error Prevention (All)
__Level AAA__

Any site that requires a user submits information, one of these should be true:
 
- Reversible:
  - Any submissions are able to be reversed.
- Checked:
  - Any data entered by the user is checked for errors and given the chance to correct errors if present.
- Confirmed:
  - A function is provided that allows the user to review, correct, and confirm data entries before submission.

Thank you for kickin' it with me for U if for Understandable!!  Next, we'll be covering Principle 4, so be on the lookout for `R is for Robust`!!!

![Later Gators](https://media.giphy.com/media/3o6ozgxc5VkZXUwe9W/giphy.gif)