This is the first post in a multi-part series where I will walk you through all the steps I took to make the Gaia Clock app accessible. Now, as of this posting, these changes have not been merged into Gaia, not even reviewed. You could follow the entire effort to make the app accessible in bug 921201
In this post, we will cover the most cliché web accessibility topic, and that is properly labeling controls and elements.
When I started testing the clock app with a screen reader, I quickly stumbled upon a control that the screen reader describes as “button”. Sighted users have a good clue as to what this button does. It has an image of a bell, and a plus sign. The active tab below says “Alarm”, so a sighted user would likely assume this button will allow them to add an alarm setting. And they would be right. A blind user will hear “button”, and won’t have the vaguest idea as to what this button does.
The solution is straightforward. We need to add a label. The aria spec gives us the aria-label attribute just for that purpose:
...
<!-- create new alarm icon -->
-<button id="alarm-new"></button>
+<button id="alarm-new" aria-label="New alarm" data-l10n-id="newAlarmButton"></button>
...
Of course, when you add human readable strings, you need to make it localizable, the l10n.js script should do the trick along with the data-l10n-id attribute above. We will add the string to the locale properties files:
...
editAlarm = Edit alarm
+newAlarmButton.ariaLabel = New alarm
...
It’s that simple. We just took the first step to screen reader friendliness.
Next post we will dig deeper into other accessibility challenges and solutions, stay tuned!