A Different Kind of Hackathon: Making the Web Inclusive to All
By Laura Deck, posted on May 30, 2019Benetech’s DIAGRAM Center and PEAT host a hackathon to create accessible user experiences
On May 15-16, the DIAGRAM Center, a Benetech Global Literacy Initiative, and the Partnership on Employment & Accessible Technology (PEAT) co-hosted a hackathon at the LightHouse for the Blind and Visually Impaired in San Francisco. Sponsored by Microsoft, the two-day event took place during the 16th International Web4All Conference that attracted a diverse group from academia, industry, government, and nonprofits that explored the potential of new technologies to personalize the web and provide an accessible user experience that is inclusive to all.
“This hackathon is a prime example of Benetech’s approach of bridging Silicon Valley and the social sector to address real-world challenges,” said Dr. Lisa Wadors Verne, Senior Program Manager, Benetech. “The DIAGRAM Center is committed to leveraging emerging technologies and community engagement to support different learning needs.”
Accessible Software Solutions Start with Accessible Developer Tools
The goal of the hackathon was to improve the accessibility of web design tools to enhance the user experience for individuals with learning differences. An added bonus is that the results of this work will expand the educational and employment opportunities for everyone, not just people with disabilities. Participants included front- and back-end developers, UI/UX experts, technical accessibility experts, and AT specialists from Benetech, PEAT, Microsoft, ETS, Intuit, W. W. Norton, Bloomberg, JupyterLab, Google, UC Berkeley, Prime Access Consulting, and the University of Colorado, Boulder.
“The majority of companies we talk with actively want to build accessibility into their workplace tools. It’s increasingly becoming an imperative, not an afterthought,” reported PEAT Co-Director Josh Christianson. “One of the most common challenges that we hear about from both employers and developers is the difficulty of finding development frameworks with ready-made accessibility features. It’s deeply frustrating because it can be time- and cost- prohibitive for individuals to build solutions from scratch. This event helped to bridge that gap by bringing developers, individuals with disabilities, and accessibility advocates together to work on tangible solutions face-to-face.”
Hackers’ Diversity Creates Inclusive Designs
The collaboration between experts and developers with and without disabilities created tremendous synergy. In particular, some developers used screen readers for the first time and the experience led to more accessible and inclusive designs. The diversity represented by the participants set it apart from other hackathons.
Two days of enthusiastic hacking and collaboration culminated in the teams presenting their accessibility projects to the judges:
- JupyterLab – an interactive development environment that enables users to create and share documents that combine live code with narrative text, mathematical equations, visualizations, interactive controls, and other rich output. Four teams worked on adding various features to Jupyter Notebooks that allow screen readers to recognize and verbalize menus, tabs, buttons, modal dialogs, and fields.
- Accessible Code Repository – The DIAGRAM Center is assembling a repository of open source code for common interactions such as synchronized text-to-speech highlighting, carousels, page settings, date pickers, and drag and drop. The team worked on improving the layout and functionality of the repository and plans to add more best-in-class code that can be used to make applications more accessible.
- Accessible Extended Image Descriptions – They say a picture is worth a thousand words, but when you can’t see that picture or understand it due to a visual or cognitive disability, it’s as if the image is not there. Authors and publishers need a way to add simple image descriptions as well as more detailed descriptions that appear in an unobtrusive yet easily accessible way. The team worked on an interface with Accessible Rich Internet Applications (ARIA) web standards that allow a user to create extended descriptions that can be toggled on/off and repositioned.
- Accessibility Conformance Testing – the team proposed new rules for testing the accessibility of links, link text, headings, widgets, and other elements of HTML to ensure adherence to ARIA standards that allow screen readers to be able to verbalize and interact with web pages. Automating this function makes it easier for web developers to make sites accessible from the very beginning.
While the Accessible Extended Image Descriptions team took the top prize, all of the projects focused on worthwhile hacks, and any work that makes technology more accessible to people with disabilities deserves to win. Benetech wishes to thank PEAT, Microsoft, Intuit, ETS, and LightHouse for supporting the hackathon and the DIAGRAM Center.