1.4 Distinguishable

Your users want to be able to see and hear your content.

The P in POUR is for Perceivable:

Information and user interface components must be presentable to users in ways they can perceive. (Ensure content is accessible to people who are blind and/or deaf.)

Let me Level with you…

Each guideline has success criterion, and each one of these are placed at a level of A , AA , or AAA. Now what these levels refer to is the level of their conformance to Accessibility Laws, A being the minimum and AAA being the max. In most cases you will see a Level AA conformance, because it is achievable as well as meaningful, but will fall short here and there because really every guideline success criterion is necessary to at least some users with disabilities. So essentially do not ignore level AAA completely.

Success Criterion 1.4.1 Use of Color

--Level A

Color is not the end all and be all way to convey your important information. In fact color should not be the sole method of conveying important content or distinguishing visual elements.

In other words if I were to present a link to you in a paragraph of text it should have a hover or focus effect that will denote visually that this is a link, like becoming underlined or bold.

Here is an example of a good color contrast and use of hover and focus.

body{
    background: #FFFFFF; // White
}
.Link{
    color: #0000FF; //Blue
}

.Link::hover{
    text-decoration: underline overline;
}
.Link::focus{
    text-decoration: underline overline;
}

Generally speaking it is a good practice to set your hover and focus states as the same style. A tool for checking your color contrasts is the WebAIM Contrast Checker

Success Criterion 1.4.2 Audio Control

--Level A

If there is audio that auto plays for more than 3 seconds, you must provide a mechanism to control the audio. So your user can stop, pause, mute, or adjust the volume.

Success Criterion 1.4.3 Contrast (Minimum)

--Level AA

There are minimum contrast ratios that need to be followed to achieve level AA.

Text & Images of text

• Contrast minimum of 4.5:1

Large Text ( at least 18pt or *c.*24px or 1.5rem) or (14pt or 18.66px or 1.17rem)

• Contrast minimum of 3:1

Success Criterion 1.4.4 Resize Text

--Level AA
The text is still readable when the page is zoomed into 200%. A good practices is switching to mobile view of the page so the column size changes as it is zoomed

• 1.4.10 which was introduced in WCAG 2.1 sets high requirements in order to achieve level AA

Success Criterion 1.4.5 Images of Text

--Level AA
If at all possible try to avoid using an image of text. Essentially if you can present that same information just using text alone and image should not be used to convey that information. This allow the information to be resizable and adjust for those using assistive tech that adjusts colors of a site.

Success Criterion 1.4.6 Contrast (Enhanced)

--Level AAA

There are Enhanced contrast ratios that need to be followed in order to achieve level AAA.

Text & Images of text

• Contrast of at least 7:1

Large Text ( at least 18pt or *c.*24px or 1.5rem) or (14pt or 18.66px or 1.17rem)

• Contrast of at least 4.5:1

Success Criterion 1.4.7 Low or No Background Audio

--Level AAA
Audio with speech has no or very low background noise so the speech is easily distinguishable.
The threshold is 20 dB, this means the background sounds are low enough not to distract from the foreground sounds.

Success Criterion 1.4.8 Visual Presentation

--Level AAA

Blocks of text over one sentence long

• Column should be restrained 80 characters wide
• The text must not be fully justified (aligned left and right, it messes with the word spacing)
• Adequate line spacing must be provided
  • Line: half the height of the text
  • Paragraph: One & a half the line spacing
• Have a specified foreground and background color
• DO NOT require horizontal scrolling when text size is doubled (a user can adjust the text size via the browser)

Success Criterion 1.4.9 Images of Text (No Exception)

--Level AAA

Text must only be used in an image for decorative purposes or when the info cannot be presented with text alone.

Success Criterion 1.4.10 Reflow

--Level AA

There must not be any loss of function or content and horizontal scrolling is avoided when your screen size is at a width of 320px.

• This means that your site must have responsive design elements.
• It’s best tested when at a width of 1280px and zooming in to 400%.

Content requiring horizontal scrolling, like Data tables, complex images, toolbars and such are exempt from avoiding horizontal scrolling.

Success Criterion 1.4.11 Non-text Contest

--Level AA
There needs to be a minimum contrast ratio for non-text elements on your site in order to achieve a level AA.

Controls & Icons (Graphical Objects)

• Contrast of at least 3:1

States (hover, focus, active, invalid, etc)(borders, text-decorations, color, etc)

• Contrast of at least 3:1

Success Criterion 1.4.12 Text Spacing

--Level AA

When the user adjust text size via browser settings, there should be NO loss of content or function when:

• The paragraph spacing is adjusted to 2x the font size
• The text line height and spacing is adjusted to 1.5x the font size
• The word spacing is adjusted to .16x the font size
• The letter spacing is adjusted to .12x the font size

This is best supported by avoiding pixel height assignments for elements containing text.

• Instead use one of the more responsive measurement values like rem, em, or percent base.

Success Criterion 1.4.13 Content on Hover or Focus

--Level AA

Sometimes there is content presented on a hover or focus state. In this situation:

• The new content must be dismissed/ escapable, unless the content presents an input error or does not block or interfere with other page content.
• The pointer can be moved to the newly presented content without that content disappearing.
• The new content is persistent until the trigger loses focus, the content is dismissed/escaped, or the content is no longer relevant.

Thank you for sticking with The P in POUR is for Perceivable, be on the look out for the first section in The O in POUR is for Operable in the coming week!