BlindLead.org 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 BlindLead.org 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.

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.

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.