All text references do not use shape, size, or relative position alone
1.3.3 Sensory Characteristics
Introduction
This document gives information about the related accessibility check:
All text references do not use shape, size, or relative position alone.
What
Instructions about how to use the content of the website must be formulated to be understandable even if a user cannot perceive shape, color, size, visual location, orientation, or sound.
Why
Users who are limited in one of their senses may not be able to use your content if the instructions only rely on one type of input that the user has difficulty with.
For instance, blind individuals who use screen readers to access websites cannot perceive properties like shape and color. Consequently, if you rely on instructions related to shape or color, it may hinder these users from accessing your content.
Affected users
This check affects the following users who have:
No impairments: On a small screen device where location /orientation of content layout may be different than on the desktop version.
Sight impairments: Who access the site contents with a screen reader or other text-to-speech software.
Hearing impairments: Who can not use instructions based on audio cues.
User story
Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:
“I recently had to complete an online learning course at my workplace. The course consisted of several pages of text followed by questions. After filling out the first page, there was an instruction to click on the arrow to continue. However, I couldn't find the "arrow" with my screen reader. I find it frustrating when such a small thing prevents me from doing my work.”
Examples
This section gives some common examples of the issue.
Example 1
In relation to a multi-step questionnaire, the following instruction is provided:
"Press the green arrow labeled 'Next' to continue."
This instruction can be easily understood by individuals who can not see, as it refers to both the shape, color, and the text label on the arrow. The text label can be read by the assistive technologies that blind users rely on.
Example 2
A website provides the user with the following instructions to get help:
“Write to us via the chat function in the box on the right.” Users who cannot see the visual layout of the page will struggle to follow the instruction.
When the page is displayed in mobile view, it can also cause issues because the chat function, which was displayed on the right in the desktop version of the website, is no longer shown on the right but further down on the page.
Example 3
During an online course test, the following instruction is given to the user:
"Begin typing your response when you hear the starting sound."
People with hearing impairments will not be able to follow an instruction that relies solely on sound.
How
How to review and fix it:
Review your website for any instances where you provide user instructions.
For each instruction, ensure that it does not solely rely on shape, color, size, visual location, orientation, or sound. Try to ask yourself if you could follow the instructions without the user of sight or hearing.
If you find instructions on your website that require the use of a specific sense, you should modify the instructions to make it usable by everyone.
Examples of how instructions can be changed:
Change “Press the green arrow to proceed” to “Press the green arrow labeled ‘Next’ to proceed.”
Change “Begin typing your response when you hear the starting sound” to “Begin typing your response when you see the message “Start your test and hear the starting sound.”
Change “Write to us via the chat function in the box on the right” to “Write to us via the chat function found under the heading “Contact” in the box on the right.”
Note
In the previous example, we refer to the heading “Contact”, located just above the chat function. This heading can be identified by screen readers, whereas the position “to the right” cannot be located by a screen reader.
Sometimes it may be necessary for you to modify the content in order to provide instructions that work for people with limited use of a specific sense. In the example where a sound signal is used to indicate the start of the test, it is necessary to add a visual text that also shows when the test begins.
Additional resources
This section contains useful resources for this subject.
All text references do not use shape, size, or relative position alone
1.3.3 Sensory Characteristics
Introduction
This document gives information about the related accessibility check:
All text references do not use shape, size, or relative position alone.
What
Instructions about how to use the content of the website must be formulated to be understandable even if a user cannot perceive shape, color, size, visual location, orientation, or sound.
Why
Users who are limited in one of their senses may not be able to use your content if the instructions only rely on one type of input that the user has difficulty with.
For instance, blind individuals who use screen readers to access websites cannot perceive properties like shape and color. Consequently, if you rely on instructions related to shape or color, it may hinder these users from accessing your content.
Affected users
This check affects the following users who have:
No impairments: On a small screen device where location /orientation of content layout may be different than on the desktop version.
Sight impairments: Who access the site contents with a screen reader or other text-to-speech software.
Hearing impairments: Who can not use instructions based on audio cues.
User story
Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:
“I recently had to complete an online learning course at my workplace. The course consisted of several pages of text followed by questions. After filling out the first page, there was an instruction to click on the arrow to continue. However, I couldn't find the "arrow" with my screen reader. I find it frustrating when such a small thing prevents me from doing my work.”
Examples
This section gives some common examples of the issue.
Example 1
In relation to a multi-step questionnaire, the following instruction is provided:
"Press the green arrow labeled 'Next' to continue."
This instruction can be easily understood by individuals who can not see, as it refers to both the shape, color, and the text label on the arrow. The text label can be read by the assistive technologies that blind users rely on.
Example 2
A website provides the user with the following instructions to get help:
“Write to us via the chat function in the box on the right.” Users who cannot see the visual layout of the page will struggle to follow the instruction.
When the page is displayed in mobile view, it can also cause issues because the chat function, which was displayed on the right in the desktop version of the website, is no longer shown on the right but further down on the page.
Example 3
During an online course test, the following instruction is given to the user:
"Begin typing your response when you hear the starting sound."
People with hearing impairments will not be able to follow an instruction that relies solely on sound.
How
How to review and fix it:
Review your website for any instances where you provide user instructions.
For each instruction, ensure that it does not solely rely on shape, color, size, visual location, orientation, or sound. Try to ask yourself if you could follow the instructions without the user of sight or hearing.
If you find instructions on your website that require the use of a specific sense, you should modify the instructions to make it usable by everyone.
Examples of how instructions can be changed:
Change “Press the green arrow to proceed” to “Press the green arrow labeled ‘Next’ to proceed.”
Change “Begin typing your response when you hear the starting sound” to “Begin typing your response when you see the message “Start your test and hear the starting sound.”
Change “Write to us via the chat function in the box on the right” to “Write to us via the chat function found under the heading “Contact” in the box on the right.”
Note
In the previous example, we refer to the heading “Contact”, located just above the chat function. This heading can be identified by screen readers, whereas the position “to the right” cannot be located by a screen reader.
Sometimes it may be necessary for you to modify the content in order to provide instructions that work for people with limited use of a specific sense. In the example where a sound signal is used to indicate the start of the test, it is necessary to add a visual text that also shows when the test begins.
Additional resources
This section contains useful resources for this subject.
Web Governance