HTML5 Accessibility was created by The Paciello Group, a web accessibility consultancy. The site shows whether or not browsers have implemented HTML5 features accessibly, such that users of assitive technology can interact with web content successfully. This of course helps inform web developers of potential issues to look out for, but the test pages also allow browsers to verify that they've implemented features correctly. It was mine and David Storey's (as Microsoft Edge team members) pleasure to support this effort with a redesign.
We started the redesign of the HTML5 Accessibility site in an unconventional place: on the structurally simplest pages. The test pages are what browser vendors use to verify if they’ve implemented a feature accessibly. That means that while they should look nice and be a pleasant experience, it was important to us to restrict the markup only to what was absolutely necessary to render the information and tests—no extra HTML crufting up the screen reader or tabbing experience. We chose to start the design here where the code style was more restrictive to ensure that our design styles worked in this reduced form.
It is difficult to capture just how many ways people interact with web content. Instead of trying to jam all these accessibility concepts into one small mark, I opted for a more graphical representation of a unified effort.
The orange color of this project’s logo is a nod to the W3C’s branding for HTML5.
Our redesign of the main site was more than a re-skin. We restructured content so that:
- It was quicker to understand the purpose of the site
- The user could see inline in the table where accessibility support failed (expanded table row gives extra detail)
- The user could look at the set of elements they are interested in, instead of looking at one giant table