Accessibility plugin for NativeScript (would you like to help?)


#1

Hi,

I’m working for Nota, the Danish Library and Expertise Center for people with print disabilities.
My team and I are working on an soon-to-be-release App for our members, a little over 14.000 of those have some form of visually impairment, this makes accessibility a very important feature for our App.

We found nativescript’s built-in support lacking, so we created a plugin for our purposes:
@nota/nativescript-accessibility-ext
npmjs github
Licensed under the BSD 3-Clause License

This post intended partially as shameless promotion of the plugin, but mostly in the hope to encourage others in the community to try it out and provide some feedback and hopefully help with making the plugin even better.

Using the plugin:
Install with:

npm i --save @nota/nativescript-accessibility-ext

And add this to your app.ts/js, if you’re using angular do it right after you import the NativeScriptModule.

import '@nota/nativescript-accessibility-ext';

With this plugin you can mark any element as a button, this allows you to make far more advanced buttons than NativeScript’s built-in <button>.

A simple example here:

<StackLayout
  accessible="true"
  automationText="This now a button"
  accessibilityComponentType="button"
  accessibilityTraits="button"
>
  <Label text="First button" (tap)="tapped($event)"></Label>
</StackLayout>

This StackLayout will be shown with the label “First button”, but the screen reader will read it as “This now a button” - “button”.

Sometimes you need to hide an element from the screen reader (TalkBack/VoiceOver), this can be done like this:

<Label text="Text that would only confuse the user" accessibilityElementsHidden="yes" importantForAccessibility="no"></Label>

For more you can try the demo in the github project.

The plugin is far from finished, we’ve implemented features as we needed them.

I hope this has peaked your interest and I hope to hear some feedback :slight_smile:


#2

That’s awesome. I’ve never actually seen how this works for someone who utilizes the accessibility features. Do you have any links to users on mobile apps who need accessibility? I’ve been tightening up my web apps to be more accessible but never thought much about mobile apps really. Awesome stuff, wish I had more free time to contribute :slight_smile:


#3

HI @bradwaynemartin,

Sorry, I thought I had already replied to you, I must have forgotten to press the reply-button. :innocent:

Being a library for the visually impaired, we have access to people who need accessibility in-house, so we haven’t looked for those resources online.