From Saturday, September 22 to Monday, September 24, more than twenty people met in London to work on improving accessibility on MDN Web Docs — both the content about accessibility and the accessibility of the site itself. While much remains to be done, the result was a considerable refresh in both respects.

Attendees at Hack on MDN listen to a lightning talk by Eva Ferreira. Photo by Adrian Roselli.

Hack on MDN events

Hack on MDN events evolved from the documentation sprints for MDN that were held from 2010 to 2013, which brought together staff members and volunteers to write and localize content on MDN over a weekend. As implied by the name, “Hack on MDN” events expand the range of participants to include those with programming and design skills. In its current incarnation, each Hack on MDN event has a thematic focus. One in March of this year focused on browser compatibility data.

The Hack on MDN format is a combination of hackathon and unconference; participants pitch projects and commit to working on concrete tasks (rather than meetings or long discussions) that can be completed in three days or less. People self-organize to work on projects in which a group can make significant progress over a long weekend. Lightning talks provide an unconference break from projects.

Accessibility on MDN Web Docs

Making websites accessible to a wide range of users, including those with physical or cognitive limitations, is a vital topic for creators on the web. Yet information about accessibility on MDN Web Docs was sparse and often outdated. Similarly, the accessibility of the site had eroded over time. Therefore, accessibility was chosen as the theme for the September 2018 Hack on MDN.

Hack on MDN Accessibility in London

The people who gathered at Campus London (thanks to Google for the space), included writers, developers, and accessibility experts, from within and outside of Mozilla. After a round of introductions, there was a “pitch” session presenting ideas of projects to work on. Participants rearranged themselves into project groups, and the hacking began. Adrian Roselli gave a brief crash course on accessibility for non-experts in the room, which he fortunately had up his sleeve and was able to present while jet-lagged.

At the end of each morning and afternoon, we did a status check-in to see how work was progressing. On Sunday and Monday, there were also lightning talks, where anyone could present anything that they wanted to share. Late Sunday afternoon, some of us took some time out to explore some of the offerings of the Shoreditch Design Triangle, including playing with a “font” comprised of (more or less sit-able) chairs.

Glenda Sims, Estelle Weyl, Janet Swisher and Adrian Roselli pose with metal letter-shaped chairs spelling “HACK” and “MdN”. Photo by Dan Rubin.

Outcomes

One project focused on updating the WAI-ARIA documentation on MDN Web Docs, using a new ARIA reference page template created by Estelle Weyl. Eric Bailey, Eric Eggert, and several others completed documentation on 27 ARIA roles, including recommending appropriate semantic HTML elements to use in preference to an ARIA role. The team even had remote contributors, with Shane Hudson writing about the ARIA alert role.

A number of participants worked on adding sections on “Accessibility concerns” to relevant HTML, CSS, and JavaScript pages, such as the <canvas> element, display property, and the Animation API.

Other efforts included:

• Glenda Sims updated the articles about the Web Content Accessibility Guidelines (WCAG) for version 2.1 of that standard, and updated the tutorial on What is accessibility?.
• Eva Ferreira wrote an article on using media queries for accessibility, and translated a number of accessibility-related articles into Spanish.
• Adrian Roselli prototyped alternatives to MDN’s use of the title attribute, which is well-known to be problematic for accessibility.
• Hidde de Vries completely rewrote and updated the article on accessibility information for UI designers and developers, and opened a pull request to add accessible text to social icons on MDN.
• Bruce Lawson reviewed, updated, and consolidated several general articles about accessibility, including the ARIA landing page, keyboard-navigable JavaScript widgets, and an overview of accessible web applications and widgets.
• Marco Zehe blogged about reasons not to use ARIA menus.
• Stephanie Hobson submitted several pull requests to improve the usability of the MDN Web Docs site for users of screen readers, such as moving the link to each section heading after the heading text, and moving the close button for menus to the top of the menu.
• Josh Mize opened a pull request to increase contrast for blue and link-color to meet WCAG AA guidelines.
• Jean-Yves Perrier prototyped a schema for compatibility data regarding browser and screen reader combinations.

Also, a fun time was had and the group enjoyed working together. Check the #HackOnMDN tag on Twitter for photos, “overheard” quotes, nail art by @ninjanails and more. Also see blog posts by Adrian Roselli and Hidde de Vries for their perspectives and more details.

What’s next?

There is plenty of work left to make MDN’s accessibility content up-to-date and useful. The list of ARIA roles, states, and properties is far from complete. More reference pages need “accessibility concerns” information added. The accessibility of the MDN Web Docs site still can be improved. As a result of the enthusiasm from this event, discussions are starting about doing a mini-hack in connection with an upcoming accessibility conference.

If you find issues that need to be addressed, please file a bug against the site or the content. Better yet, get involved in improving MDN Web Docs. If you’re not sure where to begin, visit the MDN community forum to ask any questions you might have about how to make MDN more awesome (and accessible). We’d love to have your help!