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.