Case study HTML5 Accessibility

The home page of HTML5 Accessibility, with scores for major browsers
Logo design, web design, icons
Microsoft Edge
David Storey: front-end dev; The Paciello Group: content

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.

Screenshot of an article test page on HTML5 Accessibility

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.

Orange-and-cream colored HTML5 accessibility logo.

The large numeral 5 is made up of 5 lines.

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.

Screenshot of the previous HTML5 Accessibility version
Screenshot of HTML5 Accessibility support table

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
Category icons
Screenshot of the more information section of HTML5 Accessibility