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.
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.
3.2 Predictable
The order of your site Must be predictable. This includes the visual elements as well as the DOM order.
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.
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
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!!!
Top comments (0)