Sunday, December 12, 2010 HTML5 accessible wordpress website

Few weeks ago I received a email from Ted Moallem, we collaborated on Blind Lead project in August this year. The project website seems to be inaccessible to screen readers users. Ted used the latest version Wordpress 3.0 content management system (CMS), but Black Letterhead wordpress theme and the page structure were creating some problems.

Decided to attempt redesign the website using HTML5. HTML5 offers many accessibility improvements with new elements, ARIA landmark roles etc. Initially I thought of building with Starkers HTML5 theme. However Wordpress ships with a HTML5 complaint theme Twenty Ten so I decided to stick with it. Added some rounded corners, little bit of typographical changes, disabled the sidebar widgets for now. And the site looks better already.

blindlead website screenshot

Next I set about cleaning up the inline styles in the page content. Some of the styles were introduced by the wordpress editor and other external editors.The pages structure needed some re-organizing as well. Added headers instead of just bold text. The Web Developer Document Outline feature comes in handy here. You can access it from Web Developer > Information > View Document Outline menu item.

Web page outline
workshop project page outline

Right now we have only few pages, blog posts, photo gallery and accessible widgets would be added to the site soon. This is my first HTML5 website, there is lots of things to be fixed. So give me your feedback and share your experiences working with HTML5 accessibility.


  1. Hey, what photo gallery plugin for WP did you find that was accessible?

  2. I have no idea Mimi, Let me check!

  3. Did you ever find an accessible photo gallery plugin for WP?

  4. Not really. Looking into Jquery based photo gallery solutions right now.


You can leave a comment here using your Google account, OpenID or as an anonymous user.

Popular Posts