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 ¹ -> accessibilityHint TalkBack (android) the fields will be concatted² to accessibilityLabel. accessibilityValue. accessibilityHint. followed by the role¹.

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’¹ 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 iOS³ 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.