loading...
Cover image for Pour Explained: U is for Understandable

Pour Explained: U is for Understandable

stories_of_ren profile image ⚡️Ren⚡️ ・5 min read

Principle 3 -- 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

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 lang="en"></html>

A list of ISO language codes can be found here.

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

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

3.2 Predictable

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

Marie Kondo that shit

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.

<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

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

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

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

// 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

Discussion

pic
Editor guide