Accessibility Kiwi

Sensory Characteristics

Level
A
Criterion
1.3.3

Use sensory characteristics, but always offer text alternatives, because not every person can perceive them.

  • Audio
  • Color
  • Content
  • Function
  • Heading
  • Icon
  • Image
  • Label
  • Layout
  • Responsive
  • Text
  • Video

Design

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

Sketch with problem and alternatives. The problem only show icons of hands pointing to the left and right. Alternatives show the hands in addition with text (previous and next) or two buttons with text (CANCEL and NEXT).
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

Sketch with problem and alternative. The problem is a list of items in a shop with colored circles identifying their status. An alternative adds text (available, five left and out of stock) to the colored circles.
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

Sketch with problem and alternative. The problem shows a cookie banner with a huge button and a small link. The alternative shows a cookie banner with two nice buttons with labels (deny and accept).
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

Sketch with problem and alternatives. The problem starts with a text: “Right is forward. Left is backward. Middle is save.“ Three buttons are aligned below, all of them with the label “Click”. Alternatives only show three buttons with text labels. The first alternative contains “Save”, “Back” and “Forward”. The second alternative contains “Previous”, “Save” and “Next”.
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
Three Screenshots with problem on instagram. The first screenshot shows an instagram post, the second one shows the header of the profile of the author and the third screenshot shows the opened link in the instagram browser.
Visual location

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

Sketch with recommendation. The outlines of a smartphone are shown in landscape and portrait with the text “Available” on their screens.
Orientation

Content and functions should be available with every screen orientation. See 1.3.4 Orientation for more details.

Sound

Sketch with problem and alternative. The problem shows a bell with the text “Ping”. The alternative adds a notification to the bell and the text.
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

Description

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.