Hack on MDN

Last week Mozilla brought together a group of smart people (and me) who work in or near accessibility to spend a long weekend updating the MDN Web Docs. If you are not familiar with them, MDN (formerly Mozilla Developer Network) Web Docs are a collection of resources that explain HTML, CSS, and JavaScript, provide best practices, offer tutorials, and generally act as the online go-to resource for many.

We were asked to update anything and everything we could that had anything to do with accessibility, including adding notes to content that otherwise was not specifically about accessibility. We identified gaps, broke into teams, picked up tasks, and spent a lot of team sharing what we knew with one another.

I am going to use this post to recap my weekend there. I will link to posts from other attendees as I find them, and whatever MDN writes to memorialize the weekend.

Day 1

Saturday, September 22 was the kick off day, starting at 9am. This was a bit tricky for me since I was flying into London overnight from Orlando, and only landed at 7am. I managed to get from Gatwick to the event by 9:30am, so I was pretty pleased with myself. I also had not slept since 6am ET the previous day, so it was going to be interesting.

I volunteered to run some of the dedicated MDN team through an intro to accessibility training, which pivoted into a larger discussion about assistive technology, and then into ARIA. I spent a good deal of time using NVDA and JAWS to demonstrate how some of the existing content and structure is handled. Stephanie Hobson was kind enough to help moderate since I have a tendency to want to get deep into the weeds.

In the afternoon, I helped Glenda Sims with updates to the WCAG pages, including all of the Perceivable success criteria. This was our chance to ensure WCAG 2.1 was folded into the documentation by default, not awkwardly tacked on. We wanted to ensure we did not leave the impression that WCAG 2.1 did not count yet. I may have also tried to make sure Deque resources were not the only ones linked.

Projector screen showing a Firefox window open to an MDN page with the NVDA Speech Viewer visible. Glenda’s laptop with the MDN page loaded, my laptop with the WCAG 2.1 quick reference loaded.
First image: I ran an unexpected intro training and then live testing with NVDA on no sleep for the #HackOnMDN. I hope I made sense. Second image: With my ‘helpful’ copy edits, Glenda updated the MDN Web Docs through WCAG 1.4. I had been awake 30 hours and counting…

Day 2

Sunday was a bit less structured for me. I started off working on a replacement for MDN’s reliance on title attributes, which sent me down an interesting path of WCAG 2.1 compliance, an insufficient ARIA Authoring Practices Guide tool-tip pattern, and frustrating browser quirks. I may have harassed Eric Bailey a bit too much to vent. You can see my progress on CodePen.

We also had the opportunity to present some quick lightning talks for the room. It gave each of us a chance to dive into some narrow aspect of accessibility we had discovered but which was not widely known. I used my time to remind people that there really is value to the table role, at least until browsers stop being broken with CSS display properties. Stephanie tweeted one of my posts, Bruce tweeted two others.

Much of the rest of the day I floated from team to team, answering questions, bouncing ideas, arguing about semantics, and generally feeling useful. One of the downsides to working alone in your house (or a hotel room, as is often the case) is not having people in the same space (physical and technical) with whom you can argue and roll ideas around.

Some of us also broke out toward the end of the day to see some of the local art installations from the Shoreditch Design Triangle. It was on the schedule, so I do not consider it slacking off.

A room full of people with laptops and a young woman on stage. A bunch of laptops on a table surrounded by worker drones.
First image: I am trying to reinvent a keyboard-friendly, WCAG 2.1 1.4.13-compliant tool-tip. Eric Bailey politely listened to me rant. Second image: Lightning talks, this one from Eva Ferreira reviewing translation challenges.

Day 3

Monday was our last day, so the crunch was on to tackle items that we could wrap up before we all scattered. Some of us were headed to the London Accessibility Meet-up later that night, so we would have to pay closer attention to time.

We ran more lightning talks, and I reviewed how to convey text-level semantics to screen readers that are otherwise not exposed by browsers. I leaned on Steve Faulkner’s post and my own. At this point I had not slept much in days, so I can only hope the room understood the words coming out of my face.

I continued to work on the tool-tip pattern and bounce around the room, so when it came time to report what we had accomplished over the weekend my overall list looked a bit… anemic.

Plates of food and a room full of people working at tables with Eric at the front by his opening slide. A circle of 12 hands all showing their nails to Bruce’s cell phone camera.
First image: Lunch break and Eric Bailey setting up a preview of a coming talk. Second image: Bruce capturing a photo of last night’s awesome nail painting from Ninja Nails (Seren Davies).


Chris Mills and Janet Swisher proved to be great hosts. Not only was it great to spend a solid few days updating MDN Web Docs with accessibility information, it was also great to be in the same room and share ideas with everyone there. These kinds of focused events mostly do not exist, and I hope more happen.


Update: October 3, 2018

MDN typically references WHATWG HTML, which often gets accessibility… well, not quite right. Part of my efforts included updating the accessibility content to point to the W3C specs wherever appropriate. This is not just for web devs, but also for browser makers. All of which helps users.

No comments? Be the first!

Leave a Comment or Response

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=""> <s> <strike> <strong>