This is the second part in my
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.
Writing good labels is essential for making your app accessible for the visually impaired.
We have three properties for labeling our UI:
There is a slight difference in behavior between iOS and Android. VoiceOver (iOS) will read these fields in this order
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
accessibilityLanguagebut 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.
Ideally a single word description the element like
Delete etc. It isn’t always possible to give a single word description, in these cases you should strive for a short phrase like
Every accessible element should have this value.
Should not end with a period.
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.
Button the default value is from the
Slider on iOS3 it will be the numeric value.
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:
- It should end with period.
- Few elements should have this.