W4A+WWW Hackathon Recap: The Right People in the Room Makes a Big Difference

The hackathon winners, a group of four men and two women, are sitting at a table with their computers, talking to each other and working on software coding.Last month, PEAT and Google Montreal invited participants at the 26th International World Wide Web Conference (WWW) and the 13th International Web for All Conference (W4A) to take a popular web-based product used widely in workplaces and schools, H5P, and make it more accessible. As a facilitator and judge, it was truly inspirational to see how much progress a small group of individuals can make toward improving the overall accessibility of a complex project like H5P in a relatively short amount of time--particularly given that the majority of participants were new to both H5P and accessibility. 


If you're a web developer who is motivated to build accessible sites, you've likely spent a good deal of time searching for extensions or modules for your development framework of choice to help you implement a new feature for your latest project—only to find that most of the available options are missing some basic accessibility features. It's a maddeningly common scenario that often leaves you with some difficult choices about how best to proceed. Should you attempt to modify the code you found to include accessibility? Choose an alternative tool that may not have the same level of browser support or available features? Build something from scratch?

The choice typically depends on a combination of the time you have to complete the project, your budget, and your skills as a developer. Odds are, you've tried some combination of each with varying degrees of success. Unfortunately, the challenges in finding ready-made solutions are common concerns that we hear frequently from employers and developers who are trying to improve the accessibility of their workplace technology.

So, how can we help bridge the gap between existing solutions and accessibility? One way is to create opportunities for developers, individuals with disabilities and accessibility advocates to come together to discuss and work on solutions face-to-face. The W4A and WWW conference themes this year provided a perfect opportunity to do just that. 

After researching a few potential projects, we chose H5P, a popular plugin that is available for a variety of commonly used web publishing systems including Drupal, Wordpress and Moodle. H5P enables authors to create, share and reuse interactive HTML5 content. It includes more than 20 content types that can be combined to create learning management systems, training materials, and educational content that can be used in both employment and educational settings. The diversity of content types and modules within the project made it an ideal candidate for groups of various abilities to work on. And it turned out to be a perfect choice because when we first approached the team at H5P, they were already in the planning stages for a code sprint to address some accessibility issues. 

The Hack

H5P lead developer Svein­Tore Griff With appears on a large screen wearing a headset, in front of an audience of the hackathon participants.For the day of the hack, we had 25 active participants, five observers, five judges and five facilitators. The five teams included representation from web development professionals, accessibility professionals, students, and individuals with disabilities. Team members included individuals from a variety of backgrounds and unique perspectives, with varying degrees of skill in web development and technologies like PHP, HTML, JavaScript, WAI-ARIA, and CSS. 

Individual teams were responsible for assigning roles and managing tasks within their groups, identifying accessibility barriers, developing solutions and testing the resulting content. Throughout the day, the teams pooled their resources with two developers from the H5P development team who were participating remotely from Tromsø, Norway via Google Hangouts. 

At the end of the day, the judges made our evaluations based on the complexity of work done, the effectiveness of the accessibility implementation, the group’s presentation, and the quality of the code at submission time. The other four judges were:

The Winners

A group of the hackathon winners stand together with their awards. The PEAT Project Director stands beside them at left, with W4A Chair at right.The winning team utilized their expertise and creative thinking skills to address accessibility issues identified in multiple H5P content types. They tackled several issues and features, including:

  • A hotspots feature that allows authors to define one or more sections of an image that represents a correct answer to a given question.
  • An arithmetic quiz feature that allows authors to create time-based quiz content. 
  • A variety of issues related to ensuring that their components could be used with a keyboard. 
  • In addition to ensuring that the H5P component could produce accessible content, they were also able to modify the authoring tool for the hotspot feature so that authors can insert text alternatives. And finally, they created user testing demonstration videos on YouTube for each component in order to demonstrate and describe the issues and problems they found, accompanied by a list of issues.

The second-place hackathon winners stand together with their awards, with W4A Chair Greg Gay at right. The second-place team tackled the interactive video content type—arguably one of the more complex features of H5P. Their research identified that many of the interactive features of the video content type were not available to individuals using screen readers. They focused their work on the addition of WAI-ARIA techniques to effectively alert users of events, such as pop-up notifications that occur while the video is playing (which were initially not available to screen reader users). They also worked to improve the keyboard shortcuts and interactions with the video player controls.
Additional Contributions

The third team focused on making the H5P summary component address the WCAG 2.0 guidelines. Changes included adding semantically meaningful markup to the output, adding keyboard operation and focus indicators, and revising labels for better recognition by text-to-speech software.

The fourth team focused on H5P’s Chart feature, an HTML5 pie and bar chart tool for presenting statistical data graphically that was not easily accessible for screen reader users. They worked to improve keyboard-only functionality, and to link text alternatives and chart summary data within the tool’s graphical chart outputs.

Finally, the fifth team addressed several critical issues related to a feature called “Mark the Words,” a question option that challenges users to mark specific types of words within a block of text, by: 

  • Adding keyboard shortcuts to allow users to more efficiently interact with the content.
  • Addressing issues with keyboard trapping.
  • Reducing a reoccurring issue of screen reader users hearing text multiple times. 
  • Improving the user experience by including visually hidden instructions for the keyboard shortcuts they added and markup to easily specify which items from the list have been selected.

Lessons Learned

In a single afternoon, each team was able to make significant progress toward improving the accessibility of the content types and components they worked on. In many cases, they were even able to take features that were mostly inaccessible at the start and turn them into features that were highly accessible when complete. This is truly remarkable given that at the beginning of the day, few were familiar with H5P—and most had either very little or no prior experience with the challenges that individuals with disabilities often face when using web-based content. 

To me, this says quite a lot about what having the right combination of skills and experience in a room or on a development team can mean for the overall accessibility of any given project. The right mix of development skills, accessibility knowledge, and the involvement of people with disabilities is clearly key. Happily, I think developers who care about accessibility can look forward to a future where they'll have little trouble finding solutions that are accessible and that they want to include in their own projects. Following this hackathon, over 90% of the participants reported that they will be more likely to incorporate accessibility practices into their future work—which is especially good news given that many participants who came to the event were new to accessibility.

Congratulations to the winners, and many thanks to Google Montreal for their role in sponsoring the event (including managing logistics and providing us a fantastic space to collaborate), to H5P for their willingness to share their code and expertise, to the W4A and WWW conference organizers and to the individuals who signed up and participated in the hack. We’re looking forward to doing it again soon!

About the Author

Ben Caldwell headshot

Ben Caldwell

Ben Caldwell is a Web Developer at Pushing7 and PEAT's lead consultant on web accessibility issues. He served as co-editor of the Web Content Accessibility Guidelines (WCAG) 2.0 from 2002-2010 while working as a Web Accessibility Specialist at the Trace Research and Development Center, a pioneer research institute in the field of technology and disability.