Geek Blight

A couple of days ago I read an interesting story on Hacker News about accessibility in web pages and what a man had learned by browsing his sites blindfolded and using a screen reader. He summarized his experience as a purported blind web user in a blog post and the story comments at Hacker News were pretty interesting too. As a result, I’ve been trying to slightly improve the accessibility of this blog this evening.

One of the first steps I took was to install the Fangs Screen Reader Emulator add-on for Firefox and see how the site could appear to a screen reader. I think the result is not so bad thanks to my usage of HTML headers for post titles and subsection titles.

Still, I was interested in adding Aria role properties to some elements in the site to ease navigation if possible. At first, this topic is a bit confusing because, on the one hand, you have the "role" property and on the other hand you have a few overlapping HTML5 tags. For example, if you want to indicate a certain section of the site is a collection of navigation links, like the top bar in this site containing links to the home and archive pages, you can put that inside an element and add to it the role property with value "navigation". But in HTML5 there is also a <nav> tag that can somehow represent the same thing semantically.

Fortunately, I found an excellent post summarizing the relationship between HTML5 tags and ARIA role properties that I used as a quick HOWTO. As a result, the blog title and subtitles at the top of the page have been enclosed in a header element with the banner role, the navigation links have been put inside a nav element with the navigation role, the main content div has the main role, etc.

In my final review, I noticed post dates below the post title can be a bit distracting when using a screen reader. While I prefer to keep them there as they are easier to locate when browsing visually, I also enclosed them in a time tag and gave them the standardized format that W3C recommends. Hopefully, screen readers may use this information to read dates better. This applies to archive items too.

I know most of the content I’ve been posting lately is not of interest to blind people (talking about computer games that are played visually, or the pixel visibility calculator post), but from time to time I write content that can be interesting to any programmer or geek, so I’m committing here to improve the accessibility of this blog if I can, even if there are a few sections in the site that fall out of my control, like the comments iframe that is inserted by Disqus using Javascript after the post contents.

With the recent format changes I urge any regular temporarily abled readers to notify me of visual problems.

Also, I don’t know how accessible my contact page is, given that it uses a slightly weird spam prevention strategy. In case you have accessibility issues with the site or would like to send me comments, please do so by writing to public at rg3.name.