Yura Zenevich home

FirefoxOS Accessible Tabs

01 May 2014 - Toronto, ON

Firefox OS accessibility has been one of the main focus items for our team for quite a while now. The TODO list is fairly long so it's important to prioritize the most impactful items. We recently completed making the Tabs widgets accessible across all Firefox OS applications.

Tabs is part of Building Blocks - a collection of commonly used patterns in CSS, HTML and, eventually, Javascript that comprise different commonly used widgets such as header, list, button, etc (currently located here in Gaia source code). This meant that by addressing Tabs accessibility we would improve accessibility of all Gaia apps that use them. It would also serve as a good accessible Tabs template for the upcoming apps that would need to use them.

Most of the changes were specific to HTML and CSS with a little extra Javascript work, all described below:

As of right now, if an app implementation requires a Tabs widget, developers need to use the above markup, include the above CSS file as well as the accessibility_helper.js file. And if they do, their users should be able to enjoy fully screen reader accessible Tabs.