Cache the World: Turbo Charging Firefox Accessibility Performance and Maintainability

22 December 2022

The Firefox accessibility engine is responsible for providing assistive technologies like screen readers with the information they need to access web page content. For the past couple of years, the Firefox accessibility team have been working on a major re-architecture of the accessibility engine to significantly improve its speed, reliability and maintainability. We call this project “Cache the World”. In this post, I explain the reasons for such a massive undertaking and describe how the new architecture solves these issues.

Tab Keywords in Firefox

3 June 2020

Introduction

An awesome feature in Firefox that has existed forever is the ability to assign keywords to bookmarks. For example, I could assign the word “bank” to take me directly to the login page for my bank. Then, all I have to do is type “bank” into the address bar and press enter, and I’m there.

Another awesome feature in Firefox is the ability to use the address bar to switch to open tabs. For example, if I want to switch to my Twitter tab, I can type “% twitter” into the address bar, then press down arrow and enter, and I’m there.

Making PennyTel Accessible with Greasemonkey

9 August 2011

PennyTel is an incredibly cheap VoIP provider serving Australia (among other countries) which I have been using for several years. For the most part, I am fairly happy with them, especially the price. Unfortunately, their customer portal has many accessibility problems, and despite a polite request from me quite some time ago, nothing has been done to rectify this.

The biggest issue is that there are many buttons on the site which are presented using clickable graphics, but they have been marked with @alt="", indicating that the graphics are for visual presentation/layout only and suggesting to screen readers that they shouldn't be presented to the user. Obviously, this is very wrong, since these graphics are buttons which the user might wish to activate. It's bad enough that no text alternative is provided, but specifying empty text is extremely incorrect. With the current version of NVDA, this issue makes the portal practically unusable.

It recently occurred to me that it might be possible to hack around this with Greasemonkey. In short, Greasemonkey is a Firefox add-on which allows you to "customize the way a web page displays or behaves, by using small bits of JavaScript".

This turned out to be a great success. I now have a Greasemonkey script that not only gives friendly labels to many graphic buttons, but also injects ARIA to transform these graphics into buttons. In addition, there are parts of the portal which use graphics to indicate which option has been selected and the script turns these into radio buttons using ARIA. There is a navigation bar where the items are only clickable text, which the script changes into links for quicker navigation using ARIA. Finally, @alt="" is removed from all other clickable graphics which the script doesn't yet know about, which at least allows screen readers to present the graphic using their own algorithms to determine a label. Once the script is installed, this all happens transparently without any special action.

This took me a few hours, though this was mostly because I had never used Greasemonkey and only had a very basic knowledge of JavaScript before. Aside from the fact that PennyTel is now quite usable for me, this is also an exciting demonstration of how accessibility improvements for a site can be "scripted" within the browser like this, independent of any particular screen reader.

If you happen to have a PennyTel account and would find this useful yourself, you can grab the script. I'm sure there are more things I can improve, but this is sufficient to make the site quite usable.