It was early November of last year when I received an offer to intern at Mozilla. Having previously contributed to their Firefox Devtools project, I was absolutely ecstatic. It would be one of the biggest steps I took in my career and the start date being eight months away made the internship feel even more surreal.
Fast-forward to the first week of June, I was both nervous and excited when I arrived at the office for my first day. I was a little early for the technical on-boarding session so I had a chance to meet my mentor briefly before leaving to retrieve my Mozilla-issued laptop (which I would be able to keep after my internship!). The rest of the day was a mixture of surprise, anxiety, and excitement as my mentor introduced me around the office. I remember feeling a sense of pride and honour being able to be in the same room as individuals who were passionate about their work. To top it off, my desk had me greeted with my own Mozilla intern sweater and backpack containing some swag!
Diving into Accessibility
Okay, so what exactly is my internship about? My position is as an intern on the Firefox Accessibility team. I will be focusing on developing brand new functionality into the Accessibility Inspector, which is available as a setting in Firefox Devtools as of release 61. In particular, the first part of my project will be to display information, warnings, suggestions, etc… about accessibility objects on a web page. It is a feature that is similar to the aXe auditing tool.
The general goal of this portion of my project was familiar to me as I had done similar work for the CSS Grid Inspector. I was fortunate enough to have some familiarity with parts of the Devtools’ codebase when it came to the general approach of how it would be implemented. However, my knowledge of accessibility for the web was limited at best. I had read suggested resources from my mentor prior to my internship, but accessibility is a topic I had rarely encountered during my university studies or even online. This is not to say resources for accessibility are lacking, but rather its awareness and promotion in the classroom (both online and offline) was not something I was deeply familiar with.
This gap in my knowledge was the first “gotcha” I encountered as part of my project. I found myself familiarizing myself with online resources such as WebAIM and tools like aXe to guide my decisions when it came to displaying warnings about an inaccessible element. However, the more I dived into accessibility the more I realized how vast of a topic it is. It would be impossible to learn everything. The best approach for me would be to learn and discuss accessibility with others who are far more experienced than I am.
My First All-Hands!
Luckily for me, the second week of my internship had me traveling to San Francisco for Mozilla’s bi-annual “All-Hands” work week. “All-Hands” gives members of the Mozilla community, from employees to volunteers, a chance to meet and collaborate all in one location. There I had the chance to meet my manager and other members of the Accessibility team. I even had the chance to meet my mentor’s Outreachy intern! During this time, I had the opportunity to discuss the difficulties of web accessibility with them. I even had the opportunity to suggest some of my own accessibility resources and tips to another fellow intern who was also learning about accessibility for their project. In general, All-Hands was an invaluable experience for my project. Being able to exchange my ideas with people far more experience than I was a humbling (if not a little nerve-wracking) experience. In addition, I also got to explore the city with fellow interns during my time there!
Experimenting with Displaying Contrast Ratio
It’s been a couple weeks since All-Hands but I’ve made big strides with my project since then. My mentor and I have been collaborating closely with other members of Devtools into designing how information and warnings can be shown in a meaningful way. One of my favourite parts of having a mentor is being able to have someone who can help you learn something new everyday. One instance is where I was working on a basic implementation of displaying colour contrast ratio for text elements and their containers. I had been displaying AA and AAA scores through colour where green would indicate a “pass” whereas red would indicate a “fail”. I learned representation of critical information through colour alone is not accessible since it does not account for those with colour-blindedness, who would not be able to discern between a passing or failing score. I extended this visual representation to show a checkmark/cross to indicate a pass/fail, respectively.
What am I Doing Now?
Currently, I am now writing tests for this part of my project. Once I have this finished I will be able to move on and work on embedding the Accessibility Inspector as a secondary panel inside Devtools’ inspector panel. I am particularly excited about this since the Accessibility Inspector exists as its own panel. This makes inspecting an accessible’s corresponding element rather clunky since you would need to switch between both panels to do this.
The biggest takeaways from my first month at Mozilla was that being an intern here is an absolute honour. The people here are fantastic and the free snacks and lunches have me hooked. Moreover the work here is challenging, but I have the chance to work on problems I never encountered before. And I absolutely love it.
For the first part of my project, you can find its meta bug here.