Accessibility in Firefox OS: An update

After my introductory video, quite some things happened in the realm of Firefox OS accessibility, and although we’re still not quite ready yet to release builds to beta testers, we’re getting closer to a state where this will be the case.

In the interim, I’d like to share a few things that have happened over the past few months that may get you a bit excited! We certainly are! ;)

A screen reader toggle

It recently became possible to toggle the screen reader and thus gain access to a Firefox OS device running the Feb 12 or later nightly builds of Firefox OS 1.4/Master. The way this works is as follows:

  1. Press the Power button three times, with close to one second pause between each press. So unlike iOS, which some of my readers may be familiar with, here it’s slowness that matters. The reason is that currently, the Power button doesn’t register properly when you press it too fast in rapid succession.
  2. You’ll then hear an announcement instructing you to press the Power button three more times in the same manner to toggle screen reader on.
  3. Do so, and you’re ready to go.

This even works in the Welcome wizard/First Time User experience screen. In essence, I can now setup a Firefox OS phone as a blind user.

Turning the screen reader off works in a similar fashion: Press the Power button three times in slow succession, confirm that you want to end it, and off it is switched.

Speech property controls

Also, recently, speech controls were added to an Accessibility panel in the Settings app. You can control the screen reader on/off state itself, the speech rate and the volume.

The Accessibility panel is enabled when the screen reader is turned on, or it can be enabled from Developer settings, which in turn can be enabled from Device Info/More information. This, of course, is only interesting for sighted folks interested in trying things out, a blind user will most likely use the toggle. The important thing to note is that the screen reader setting has been moved out from the developer settings into the Accessibility panel in 1.4. So the occurrences that we had over the past couple of weeks where people turned on the screen reader accidentally and then didn’t know how to work their devices, should occur less. ;)

Automatic focusing on new elements

When switching pages, bringing up an application or a website, the first element is now automatically focused after load. This is something Firefox for Android 30 and later will also do when a new web page loads. With that, speech response is much moe intuitive.

Accessible Settings

The Settings app in Firefox OS is the first to become fully accessible. It was the ground work laying app for us and turned out pretty well. We learned a lot about how to style, or not style, stuff, how to properly use techniques to only have items to swipe to that are actually relevant, and other details.

Problems, problems, problems

Oh yes, there are still a lot of problems, primarily in the user interface itself. The whole user interface of Firefox OS is written in HTML5, JavaScript and CSS, and when we started making it accessible, some of the code was pretty rough in terms of semantics. But Eitan and Yura sank their teeth into it, and despite several refactorings and such, we’re getting to a point where important work is being done that will make a lot of apps at once much more accessible. Along the way, we’re setting some rules for everyone on the Gaia team to follow, and implementing tests to make sure breakage occurs less often in the future. Some of these rules include things like “don’t use WAI-ARIA roles as parts of CSS selectors”, for example.

Everyone who has made a so far mostly inaccessible web app accessible knows how much tedious work this can be. And even more so with a dynamic project like Gaia, the Firefox OS user interface. But we’re getting a lot better, and seeing other team members pick up knowledge and attention on proper accessibility semantics. :) Gaia’s code is also improving a lot over-all, and that definitely helps, too!

In summary, we’re working hard, with me testing and other team members coding their butts off to give everyone the best possible user experience in Firefox OS in the near future! Stay tuned for more updates!

This entry was posted in FirefoxOS and tagged , . Bookmark the permalink.
Skip to top

Comments

15 Responses to Accessibility in Firefox OS: An update

  1. Cleverson says:

    Thank you Marco for the news, very good to know this.

    Is ESpeak the synthesiser used in this screen reader?

  2. Marco says:

    No, it is Picco TTS.

  3. Cleverson says:

    OK, I’m sorry to say, it is then a bad news for foreign people like me, as Pico doesn’t support Brazilian Portuguese, for example. In any case, this doesn’t undeserve other progresses, of course.

  4. Marco says:

    Stay tuned, Pico is not the end of that story. More details when I have them. :-)

  5. Anders says:

    “We learned a lot about how to style, or not style, stuff, how to properly use techniques to only have items to swipe to that are actually relevant, and other details… some of the code was pretty rough in terms of semantics… we’re setting some rules for everyone on the Gaia team to follow… team members pick up knowledge and attention on proper accessibility semantics…”

    Any chance of a whitepaper or guide describing these learnings? Seems like something that would be applicable to webapps (if not websites) in general.

  6. Syl says:

    Thanks, for news !

  7. pvagner says:

    Exciting news!
    But guys please if it is doable I would kindly ask to do something that might allow us to get eSpeak working instead of pico TTS.

    Benefits:
    eSpeak has a bit lower foot print than pico
    eSpeak can speak over 40 languages
    eSpeak is significantly more responsive and allows speaking at verry high speech rates

    Disadvantages:
    eSpeak has more robotic sounding voice which may be not pleasant to listen to for wider audience including potential developers and adopters of the platform in general. However for blind people used to it in other platforms it brings an extra level of confort, efficiency and usefullness.

  8. Woohoo! This all sounds super exciting, Marco. Thanks a ton for the update, my friend.

  9. Like Anders already asked for:

    Are the lessons documented anywhere? Look, it’s likely to use <a href="http://buildingfirefoxos.com/building-blocks&quot; Gaia Building Blocks and <a href="https://github.com/robnyman/Firefox-OS-Boilerplate-App&quot; Firefox OS Boilerplate App as base for upcoming apps by the community, so it would be useful to have your documentation available. You can simply append them at the end of the article and refer via [NUMBER] (since I dunno, how well screenreader can handle editing …).

    By the way, I’ve noted, that the Mozilla UX (“Drawl” and “Sticky”) seem not to be that accessible. I’d like to PR them with an a11y update :-)

  10. Marco says:

    I decided to dedicate a whole new blog post to the topic of the lessons learned from making the Gaia UI more accessible. We’re currently working on integrating that knowledge into the various shared code that Gaia and apps use or are likely to use.

  11. Ben Moser says:

    just using the check boxes in the form to sign up for comments/updates. Eagerly awaiting non-beta screen reading for Firefox OS.

  12. Tristan Tilson says:

    Marco
    I am a member of the tablet contribution program and somehow i got screen reader stuck on any idea how to turn it off i cant go into settings and that method you mentioned doesn’t work

  13. Marco says:

    Hi Tristan, the interaction is as follows:
    1. Touch an item so it gets a colored border around it.
    2. Double-tap anywhere on the screen to activate that bordered item.
    3. Use two fingers and swipe up, down, left and right through screens to flip pages.
    4. Use single finger swipes left and right to go sequentially from one item to the next.

    So, you must go to the home screen that has settings via two-finger swipe left or right, then touch or single-finger swipe to the Settings icon, then double-tap to activate and open Settings.
    use a similar method to then find the Developer Settings and turn screen reader back off.

  14. Hi Marco, the double tap is not working for open apps, I’m trying to disable screen reader without success. I successfully unlock the phone and with hard effort I can swipe between screens, but when I select Settings and try to double tab, simple nothing happend. I’m using Flame with Firefox 1.4, the up/down volume and power controls don’t work neither.

    What can I do?

  15. Marco says:

    Hi! Try varying the speed of the double-tapping. It has to be rather rapidly, not too slowly. If you cannot get it to work at all, use ADB to clear out your user data. You’ll have to completely set up your phone again, and then not turn on the screen reader again. ;) But that’s the last exit if you don’t get back into Settings.

    And yes, the toggle was introduced late in the 1.4 game, so the version many partners use from some time in January doesn’t have the toggle yet. :(

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>