Blogger and accessibility

Starting to edit my new blogger-blog, I see some glaring mistakes done by the developers. There is a ton of inline CSS for example. Even worse is the fact that they are hiding the skip-links from screen readers. It is a well known fact that "display: none" in your CSS will make all the block disappear not only from sighted users view, but also from what is being exposed to a screen reader. Thus, the following in my template is bad code:

  <span id="skiplinks" style="display: none;">
    <a href="...">skip to main </a> |
    <a href="...">skip to sidebar</a>
  </span>

I decided to improve upon that. Here is my agenda:

• Begin removing inline CSS.
• Make the skip-links accessible as they should be.
• Add ARIA-landmark roles.

Fixing the skip links and the CSS

Notice that the skip links are still part of the page tab order. In order to avoid confusion I want to make them reappear visually when they receive focus. And while we are at it, lets experiment with some new CSS-techniques as well:

#skiplinks {
    position: absolute;
    top: -100em;
    left: -100em;
}
#skiplinks a:focus {
    position: absolute;
    top: 103em;
    left: 100em;
    background: yellow;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: -o-max-content;
    width: max-content;
}

Max-content is a planned addition for the CSS 3 box model. Currently it is only supported by Firefox and that through the preliminary -moz- prefix. I suppose Opera and Webkit will add support in a similar fashion, so I have anticipated that in my code.

ARIA Landmark roles

The breakfast on Saturday that concluded European Accessibility Forum I sat next to Peter Krantz and Steve Faulkner, as they discussed ARIA Landmark roles. Steve has written a nice wrap-up about them. In the future they will make skip-links redundant, as this is a much better solution. Look at the source code on this blog, and you'll see my contribution. Look for all "role" attributes. I have yet to add the role "navigation", but that seem to be impossible without using JavaScript. Since landmarks do not define dynamic content, I think static additions to the HTML is the preferred solution.

HTML 5 doctype

I have changed the doctype as well. Personally I am a fan of HTML 5, at least in comparison to many of my friends. The reason now however is that I intend to use Henri Sivonens conformance checker, that includes ARIA and RDFa support, instead of the W3C validator. Adding subheadings to my blog posts also really makes me wish that I could use HTML 5 sections in order to make them work even if the document structure changes drastically. Right now I am using h4, as that seems appropriate on the front-page, but will h4 be the correct choice also on other pages or in the future?

Update: Blogger keeps messing with the doctype. Aargh! Will leave it as is for now, but it does not help me stop thinking that Blogger's CMS is really annoying.

Declaration of dependence

I am starting this blog to document the joys and woes of using my Thinkpad (currently a Z61p, dreaming of a W700ds).

This documentation might be of use for someone stumbling across similar issues and through the magic of search engines he or she might find my solutions.

I also need a place where I can regularly communicate in English. My main domain, keryx.se , should remain a Swedish language site.

Finally I wanted to experiment with blogger. What is it like, usability and accessibility wise? Soon I'll know.

Why now?

I recently upgraded my Thinkpad from the standard 100G drive to a 320G drive. I chose a Seagate Momentus 7200 rpm drive, since it offered both superb specs and a reasonable price.

The discussion I had on Lenovos forums, leading up to my decision confirmed my suspicion that it was no problem at all chosing a drive from a non-Lenovo source.

Very first impressions of Blogger

Why can I not turn off automatic insertions of br-tags? It would have been soo easy for them to look for two line breaks and wrap things between p-tags instead. And inserting an image means a whole lot of intrusive and unnecessary JavaScript. I'll stick to manual editing of all my HTML!