Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Guideline 1.1: Text Alternatives
Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
1.1.1: non-text content (Level A)
non-text contents is explained by w3c as: any content that is not a sequence of characters that can be programmatically determined or where the sequence is not expressing something in human language. This includes ASCII Art (which is a pattern of characters), emoticons, leetspeak (which uses character substitution), and images representing text
Examples:
1. Missing alt attribute
Correct
The image below has an alt attribute that explains the content of the image.
Wrong
The image below does not have an alt attribute.
2. Decorative image containing alt with non-related text.
Correct
The image below is decorative and should therefore contain an empty alt attribute.
Wrong
The image below is decorative but contains an alt attribute that says "This tag is not necessary".
3. Image containing text that is important for the reader.
Correct
The image below contains important text that should be conveyed in the alt attribute.
Wrong
The image below contains important text but the text is not conveyed in the alt attribute as it should be when it is only text in the image. For reference see example given by w3: example.
Guideline 1.3: Adaptable
Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
1.3.1: Info and Relationships (Level A)
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Examples:
1. h1-h6 in correct order.
Correct
throughout the page h1-h3 has already been used in order. Below are the rest of the headings in correct order.
This is h4
This is h5
This is h6
Wrong
throughout the page h1-h3 has already been used in order. Below are the rest of the headings in incorrect order.
This is h6
This is h4
This is h5
2. Using lists
Correct
Below is a list using the ol and li elements.
- Write code
- Review code
- Rewrite code
Wrong
Below are three paragraph elements that are direct children of the ol element without any li elements.
1. Write code
2. Review code
3. Rewrite code
3. Proper table markup
Correct
A table using the th attribute for the headers.
| Time | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|
| 8:30-9:00 | - | - | - | - | - |
| 9:00-9:30 | - | - | - | - | - |
Wrong
A table using the td attribute for the headers.
| Time | Monday | Tuesday | Wednesday | Thursday | Friday |
| 8:30-9:00 | - | - | - | - | - |
| 9:00-9:30 | - | - | - | - | - |
1.3.2: Meaningful Sequence (Level A)
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
Examples:
1. Correct order
Correct
The columns below are in the correct order programmatically.
First
If the second paragraph is positioned before the first programmatically it could potentially result in negative effects on screen readers.
Second
That would cause this part to be read first even though it is the end of the two columns.
Wrong
The columns below are in the wrong order programmatically but utilizes flex-direction: row-reverse to maintain the same structure as the correct way.
First
That would cause this part to be read first even though it is the end of the two columns.
Second
Despite its outward appearance, the second paragraph is actually positioned before the first programmatically, potentially resulting in negative effects on screen readers.
2. White space in the middle of a word
Correct
This example uses CSS to increase the spacing between the letters in the heading. Using letter spacing through CSS maintain meaningful text sequencing.
WELCOME
Wrong
This example has white spaces within a word to space out the letters in a heading. Screen readers may read each letter individually instead of the word "Welcome."
W E L C O M E
1.3.3: Sensory Characteristics (Level A)
Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound.
Example:
1. Navigation using icons
Correct
Navigation menu that contains icons and text.
Wrong
Navigation menu that contains only icons. The icons are not presented with an alternative text and is therefore solely relying on that the user can visually see and recognize the icons. A house representing "Home", a letter representing "Mail" and a phone representing "Call".
1.3.4: Orientation (Level AA)
Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.
Example:
Content not showing in certain orientation
If you are using a computer you can try this with devtools.
Correct
The content inside this box is not affected by orientation.
Wrong
You have the wrong orientation. Try rotating your device!
You are now using the correct orientation.
Guideline 1.4: Distinguishable
Make it easier for users to see and hear content including separating foreground from background.
1.4.1: Use of Color (Level A)
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Examples:
1. Link in text
Correct
The underline helps convey that the link below is in fact a link.
This link is more likely to be visible for people with color-blindness.
Wrong
This link is only a different color from the text to convey that it is a link.
This link might not be visible for people with color-blindness.
2. Color cues in a form
Correct
The form below has been "posted" without any information in the required fields. The response to this is a red error message stating the issue.
Wrong
The form below has been "posted" without any information in the required fields. The response to this is a to highlight the missing fields.
1.4.3: Contrast Minimum (Level AA)
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
- Large Text - Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental - Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes - Text that is part of a logo or brand name has no contrast requirement.
Large scale text is text with at least 18 point or 14 point bold or font size that would yield equivalent size.
Examples:
1. Normal text
Correct
The text below has sufficient contrast ratio.
This text has sufficient contrast!
Wrong
The text below does not have sufficient contrast ratio. According to WebAIM's contrast checker it has a contrast of 4.05:1
This text does not have sufficient contrast!
2. Large text
Correct
The text below has sufficient contrast ratio even though it uses the same color as the insufficient example above.
This text has sufficient contrast!
Wrong
The text below does not have sufficient contrast ratio. According to WebAIM's contrast checker it has a contrast of 1.92:1
This text does not have sufficient contrast!
3. Bold text
Correct
The text below has sufficient contrast ratio even though it uses the same color as the insufficient example above.
This text also has sufficient contrast because it is bold!
Wrong
The text below does not have sufficient contrast ratio. According to WebAIM's contrast checker it has a contrast of 1.92:1
This text does not have sufficient contrast!
1.4.6: Contrast Enhanced (Level AAA)
The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:
- Large Text - Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
- Incidental - Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes - Text that is part of a logo or brand name has no contrast requirement.
Large scale text is text with at least 18 point or 14 point bold or font size that would yield equivalent size.
Examples:
1. Normal text
Correct
The text below has sufficient contrast ratio.
This text has sufficient contrast!
Wrong
The text below does not have sufficient contrast ratio. According to WebAIM's contrast checker it has a contrast of 6.33:1
This text does not have sufficient contrast!
2. Large text
Correct
The text below has sufficient contrast ratio even though it uses the same color as the insufficient example above.
This text has sufficient contrast!
Wrong
The text below does not have sufficient contrast ratio. According to WebAIM's contrast checker it has a contrast of 4.04:1
This text does not have sufficient contrast!
3. Bold text
Correct
The text below has sufficient contrast ratio even though it uses the same color as the insufficient color from example 1.
This text also has sufficient contrast because it is bold!
Wrong
The text below does not have sufficient contrast ratio. According to WebAIM's contrast checker it has a contrast of 4.04:1
This text does not have sufficient contrast!