Screen reader

  • One UI supports Screen reader, an app that reads aloud the contents on the screen, such as text, images, etc., to assist people who are visually impaired or have low vision. Contents without any text, such as images, should be provided with alternative texts to give audible feedback.
  • Screen reader will read all readable elements. Elements may be navigated by swiping left or right on the screen with one finger, and double tapping will run the action.
  • Each element can have up to four components for audible feedback: the status value, name, element type, and usage hint, read in that order.
  • The name is mandatory. If the element has a status, that's also mandatory. Element type and Usage hints are not mandatory, and users can turn them off in accessibility settings.

Mandatory

Current status value

  • Indicates the current status value of the element, such as On or Off.

e.g., On or Off / Selected or Not selected / Checked or Not checked / Collapsed or Expanded

Name

  • Reads the text as seen on screen or reads pre-defined alternative text. Additional descriptions must be provided to distinguish order, location, etc.

Optional (Setting On/Off)

Element type

  • Audible feedback will be automatic, based on the interaction type.

Usage hint

  • Informs you of actions to take based on the interaction type. Screen Reader will read the default text, and you may edit the default text if you require a detailed explanation.

e.g., Double tap to activate / Double tap to toggle / Double tap to select

Principle 1

  • Provide clear, short alternative text for non-text elements. Don't include the current status value or element type in the alternative text.

Principle 2

  • Alternative text is not necessary for text, non-focused images, auxiliary images with descriptions, or CAPTCHAs.
  • Compose new message, button
  • Compose, button
  • Compose new message button, button

Principle 3

  • Text included within an image will be read aloud as is.
  • This month’s indie favorites
  • Indie music

Principle 4

  • Make sure that alternative text is written so that it can be understood independently of any visual references. For example, "New content available" is better than just "New".
  • Settings, New contents available
  • Settings, New

Principle 5

  • Provide clear descriptions of emojis, GIFs, and stickers.
  • Smiling face with halo
  • Smiling face

Principle 6

  • The screen reader provides audible feedback for impending actions, transitions, and results of actions. For example, let the user know when a checkbox is checked or unchecked, a slider control is adjusted, or a pop-up is shown.
# Action Screen reader
1 _feature A_Double tap to active,
Double tap and hold to long press 		-
2 Started dragging item at position %d Explaining action to perform
3 Now at position %d Explaining changing status
4 Item dropped into position %d Explaining action result
# Action Screen reader
1 When checkbox is checked / unchecked Checked
Not checked
2 When radio button is selected Selected
3 When switch is turned On/Off On
Off
4 When slider is adjusted %d percent
5 When list is collapsed/expanded Collapsed
Expanded
6 When popup is provided Alert
7 When actionable item is dimmed Disabled
8 When dragging item to reorder Started dragging item at position %d
9 When dropping item to reorder Item dropped into position %d
10 When item is added/deleted (%s or %d item(s)) added
(%s or %d item(s)) deleted
11 When item is shown/hidden Shown
Hidden
12 When tab is selected Tab %1$d of %2$d
13 When item(s) is(are) selected %d item(s) selected
14 When nothing is selected No %s selected
15 When screen rotation happens Landscape view, Portrait view
16 When converting to Flex mode view Flex mode view
  • Accessibility introduction
  • Focus order