Sensory Characteristics
- Level
- A
- Criterion
- 1.3.3
- Audio
- Color
- Content
- Function
- Heading
- Icon
- Image
- Label
- Layout
- Responsive
- Text
- Video
Content and functions
- Use sensory characteristics.
- Don’t rely solely on sensory characteristics.
- Always add text alternatives.
Characteristics
- Shape
- Color
- Size
- Visual location
- Orientation
- Sound
Shape
Problem
- Shapes don’t help screen readers identifying the meaning.
- Some shapes can be difficult to distinguish.
- Shapes can convey different meanings.
Alternatives
- Words can be identified by screen readers.
- Simple words support the meaning of the shape, for example “Previous” or “CANCEL” would have different meanings.
- Words also work without shapes – use them, but make sure the content or functions benefit from shapes!
Color
Problem
- Colors don’t help screen readers identifying the status.
- Different individuals and different cultures may perceive colors differently, leading to varied interpretations.
Alternative
- Words can be identified by screen readers.
- Text clarifies the meaning.
- Words also work without colors – use them, but make sure the content or functions benefit from colors!
Size
Problem
- Sizes don’t help screen readers identifying the purpose.
- Cookie banners keep misusing sizes – we shouldn’t sink so low, especially not in the EU.
Alternative
- Words can be identified by screen readers.
- Keeping sizes on a fair level helps every user.
- Words also work without sizes – use them, but make sure the content or functions benefit from sizes!
Visual location
Problem
- Visual locations don’t help screen readers identifying the function.
- Connecting instructions with visual locations is an exhausting riddle.
Alternatives
- Words can be identified by screen readers.
- Text on buttons clearly defines their functions.
- Visual locations of the buttons support their functions.
- Words also work without visual locations – use them, but make sure the content or function benefit from visual locations!
Instagram links
Platforms with longer texts usually upload a preview to Instagram and include the instruction to click the link in their bio. This link opens an internal browser to a page with a list of all uploads on Instagram.
- Moving from the post to the link in the bio is a very exhausting process and difficult to handle.
- The link in the bio opens the instagram browser on first click. This browser can’t be configured and doesn’t offer any tools.
- Finding a post in the list relies on remembering the first picture of the post and identifying it in the list. This is difficult for everyone.
- If the link is added to the description, Instagram doesn’t make it clickable.
Orientation
Content and functions should be available with every screen orientation. See 1.3.4 Orientation for more details.
Sound
Problem
- Sounds can’t be perceived by everyone, for example not by deaf people.
- Sounds can’t be perceived all the time, for example when volume is turned off.
Alternative
- Words can be identified by screen readers.
- Words can be visible.
- Words also work without sounds – make sure the content or functions benefit from sounds!
Users
- You and me
- People with technology, for example screen readers
- People with disabilities, for example color blindness
- People with congnitive limitations, who benefit from visuals
- People with visual perception
Relations
- 1.3.4 Orientation (AA) clearly requires the screen orientation.
- 1.4.1 Use of color (A) focusses on color.
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.
Use of Color
- Level
- A
- Criterion
- 1.4.1
Use colors, but never rely solely on colors, as some people might not be able to distinguish them.
- Color
- Content
- Function
- Icon
- Image
- Text
Content and functions
- Use colors.
- Don’t rely solely on colors.
- Always add visible alternatives.
- This criterion focuses on people with visual impairments without assistive technology.
Visible alternatives
- Icon
- Typography
- Symbol
- Pattern
- Contrast
- Text
Examples
Colors are used in a wide variety. These examples are very basic.
Form verification
Problem
- Some people have difficulty distinguishing between the neutral and red borders.
- Problems can’t be identified and no help is offered.
Alternative
- Symbols are hints without relying on color.
- Text is a clear definition without relying on color. It supports clarifying the problem and helps solving it. Moreover, text is a part of 3.3.1 Error identification.
- The text color needs enough contrast.
Disabled elements
This criterion doesn’t mention disabled elements. Even though disabled input fields shouldn’t be used at all, they would need more than just a lighter color.
Inactive components are also mentioned in 1.4.3 Contrast (minimum), increasing the recommendation of avoiding disabled elements.
Links within text
Problems
- Limiting the difference between text and links to a hover effect basically makes links invisible. They can only be found by hovering with the assumption it might be a link.
- Changing the color of links without sufficient contrast may make them difficult to identify for some users.
Alternatives
- The common way of visualizing links is setting an underline which is always visible.
- If the design would like to focus on a different color, the color needs to have a contrast of 3:1 to the text color and 5:1 to the background color. Since it relies on contrast, only two states are possible, for example “normal text” and “link”. More details are in Technique G183.
- typographic options, for example bold, italic or a clearly visible alternative font
- symbols aligned with the link, for example an arrow
Links outside text
This example doesn’t include links outside text. They don’t necessarily adhere to these alternatives, as they can be identified based on their page context, for example header or navigation.
Map
Problem
- The map of a transportation system only displays each route in a different color.
- Each stop is marked with a circle.
Alternative
- Each route has a color and a symbol.
- Each stop is marked with the symbol of the route.
Chart
Problem
- A chart with four areas differentiates them solely based on colors
- The labels of the charts are associated only with the colors.
Alternative
- Each bar is filled with a unique pattern.
- The labels of the charts are associated with the patterns.
Users
- people who can’t distinguish colors and don’t use assistive technology
- people with limited technology, for example monochromic displays
- people who benefit from colors
- Around 8 % of men are colorblind – this should convince the old white men in the boardrooms to invest into accessibility.
Tools
Relation
- 1.3.3 Sensory characteristics (A) includes color, however, it always relies on text alternatives.
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Contrast (Minimum)
- Level
- AA
- Criterion
- 1.4.3
Text needs to have high contrast (4.5:1 or 3:1), because it has to be readable for everyone everywhere.
- Color
- Content
- Image
- Text
Sizes
- “Normal” text with 16 pt normal needs a contrast ratio of at least 4.5:1.
- “Large” text with 18 pt normal or 14 pt bold needs a contrast ratio of at least 3:1.
- Sizings have evolved – the values in pt are just a guideline.
- The contrast can be higher than these requirements!
- Individual design, like an outline (at least 1 px), can support the contrast.
- Fonts are designed differently. Usually the sizes fit the requirements. If the font is smaller or thinner than average, the sizes for calculation should be adjusted.
- These definitions don’t forbid using smaller sizes. However, text should be resizable.
Text types
The contrast criterion only applies to neccessary text. If the text is important, it needs to be accessible. Imagine sitting outside and the sun is shining on your screen – what would you like to see?
Included
- Free text
- Important text on images
- Placeholder text
- Hover text
Excluded
- Logos
- Unimportant decorative text
Inactive
No guideline exists for inactive components. A disabled button doesn’t need to meet the contrast ratio. However, my recommendation is enough contrast on every component. If a disabled button doesn’t need to be identified by people with low vision – do we need this button at all?
Disabled elements are also mentioned in 1.4.1 Use of color, increasing the recommendation of avoiding inactive components.
Colors
The calculation of contrast verifies the color of the text on the background. While colors with enough contrast are important, functions and information shouldn‘t rely on color anyway.
Don‘t block the process of defining a color system by trying to find the contrast between the colors but rather between the colors and their backgrounds.
Tools
Relations
- 1.4.6 Contrast (enhanced) (AAA) raises “Normal” to 7:1 and “Large” to 4.5:1.
- 1.4.4 Resize text (AA) reveals, that font sizes are not absolute.
Alternative
- Technique G174: If the contrast can’t be reached, a control or an alternative page with sufficent contrast could be offered.
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.
Resize Text
- Level
- AA
- Criterion
- 1.4.4
Individual text zoom sizes are included in responsive design.
- Content
- Image
- Responsive
- Text
Sizes
The minimal required zoom size of text is 200 %. If a website is responsive, the possibility of completely zooming in and out is already included.
Text types
Users may benefit from scaling all content on the Web page, but text is most critical.
(w3.org)
Included
- Free text
Excluded
- Captions
- Images of text
While this criterion focuses on text, having a completely responsive website wouldn’t hurt.
Users
Prejudices imply the requirement of zooming in, however, people with, for example, tunnel vision also need to zoom out. People are different; a friend of mine has a lot of small text on his development screen, while a businesswoman in Vienna enlarges the entire text on her smartphone.
Alternative
- Technique G178: A website could include controlled buttons for zooming in and out.
Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
Contrast (Enhanced)
- Level
- AAA
- Criterion
- 1.4.6
Text needs to have higher contrast (7:1 or 4.5:1), because it has to be readable for everyone everywhere.
- Color
- Content
- Image
- Text
Sizes
In addition to 1.4.3 Contrast (minimum) (AA), this criterion raises the values.
- “Normal” text with 16 pt normal should have a contrast ratio of at least 7:1.
- “Large” text with 18 pt normal or 14 pt bold should have a contrast ratio of at least 4.5:1.
- Sizings have evolved – the values in pt are just a guideline.
- The contrast could be higher than these requirements!
Usage
The 7:1 level therefore generally provides compensation for the loss in contrast sensitivity experienced by users with low vision who do not use assistive technology and provides contrast enhancement for color deficiency as well.
(w3.org)
Matching this criterion would be great, it can very difficult when creating a design system, though. AA should definitely be fulfilled, AAA should be considered.
Relation
- 1.4.3 Contrast (minimum) (AA) is based on 3:1 for “Large” and 4.5:1 for “Normal”. The documentation contains all details of this topic.
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.
Headings and Labels
- Level
- AA
- Criterion
- 2.4.6
Section headings and labels have to be clear and descriptive for providing a better navigation.
- Content
- Heading
- Label
- Text
Wording
- Clear structure for easy understanding.
- Clarified purpose of the content or the component.
- Start with the most important (descriptive) information.
- #Unique headings are beneficial.
- Clarity out of context is beneficial.
- One word or a single character may suffice.
Users
People with screen readers as well as people with visual perception usually navigate by grasping the first words when jumping from heading to heading.
Headings
<!-- Recommended -->
<h1>Kiwi preparation</h1>
<h2>Hatching</h2>
<h2>Growing</h2>
<!-- Not Recommended -->
<h1>Preparation for Kiwi</h1>
<h2>Preparation for Hatching</h2>
<h2>Preparation for Growing</h2>
<!-- Not Recommended -->
<h1>Preparation</h1>
<h2>Preparation</h2>
<h2>Preparation</h2>Labels
Form input controls with labels that clearly describe the content that is expected to be entered helps users know how to successfully complete the form.
(w3.org)
Recommended
- “First Name” and “Last Name” clearly define the input. Starting with “First” and “Last” makes navigation faster in the “Name” group.
Not recommended
- Starting with “Name” for “First” and “Last”, because the input fields are in the “Name” group and don’t need this definition every time.
- Using the same label more than once in a group without clear differentiation, which part of the name is required.
- No label. They are not neccessarily required for this criterion, however, they should be included for better accessibility and fulfilling other criteria, for example 3.3.2: Labels or instructions.
Relations
- 1.3.1: Info and relationships (A) for programmatical determination.
- 2.4.4: Page titled (A) for navigation through pages and tabs.
- 3.3.2: Labels or instructions (A) as more detailed requirement for labels.
- 4.1.2: Name, role, value (A) for programmatical determination.
Headings and labels describe topic or purpose.
Use sensory characteristics, but always offer text alternatives, because not every person can perceive them.