29 Jul 2019

Accessible NativeScript - Part 2 - The Labeling

This is the second part in my Accessible NativeScript-series.

Since part 1 NativeScript 6.0 have been release and we’ve published the new alpha-version of our plugin, with the new and improved API and new css-properties.

Introduction

Writing good labels is essential for making your app accessible for the visually impaired.

We have three properties for labeling our UI: accessibilityLabel, accessibilityValue and accessibilityHint.

There is a slight difference in behavior between iOS and Android. VoiceOver (iOS) will read these fields in this order accessibilityLabel -> accessibilityValue -> traits/role 1 -> accessibilityHint TalkBack (android) the fields will be concatted2 to accessibilityLabel. accessibilityValue. accessibilityHint. followed by the role1.

You’ll also want to set accessible="true" on the element or you might get unexpected behavior.

Writing a good label:

Common for all three properties:

  • Values should be localized or it will sound very strange when the screen reader reads the label. You can override the language on iOS via accessibilityLanguage but not on Android.
  • Start with a capitalized later. Helps the screen render.
  • Should not contain the name of the control use `accessibilityRole’1 for that.

accessibilityLabel=”…”

Ideally a single word description the element like Add, Play, Delete etc. It isn’t always possible to give a single word description, in these cases you should strive for a short phrase like Delete bookmark.

Every accessible element should have this value.

Should not end with a period.

accessibilityValue=”…”

Use this property to override the value of the field. If this value is not set the screen reader will use the default value for the element.
For Label and Button the default value is from the text-property.
For Slider on iOS3 it will be the numeric value.

accessibilityHint=”…”

If the result of interacting with the element is not obvious from the accessibilityLabel use an accessibilityHint to describe it.

  • The hint should be as short as possible.
  • It should not sound as a command:
    • Opens rather than Open
    • Plays rather than Play
    • Deletes rather than Delete.
    • etc…
  • It should end with period.
  • Few elements should have this.
  1. Will be covered by a later article. For now see accessibilityRole in the README 2 3

  2. Android only provide one field for labeling an element ContentDescription

  3. It isn’t possible to override the value on the Slider on Android. 


Tags: