Posts Tagged ‘accessibility’

This week I converted a site from XHTML 1 to HTML5, and as part of this I moved the ARIA landmark role attributes from generic div elements to various new elements. And I got to wondering whether this could have unforeseen consequences.

I know from feedback that the ARIA landmark roles have proved useful for some users of this site, so it would be a bad move if this stopped working because their screen readers didn’t recognise the role attributes on “unknown” elements.

<div role="banner"> vs <header role="banner">

I guess what this boils down to, are there any user agents that (a) support the role attribute and (b) use the DOM as generated by a browser engine that fails to recognise HTML5 elements?

Firefox 2 and Internet Explorer won’t style HTML5 elements (though IE will after applying a little JavaScript magic) but styling isn’t the same as recognised at a basic level.

This seems like an edge case, as most of the reports I’ve found whilst searching have indicated that HTML5+ARIA is a good thing and works, but most of the reports don’t specify versions of user agents used. Does anyone have any links to first hand research into this issue?


A few of you may remember this sterling piece of work from last year. Well today I found a very similar case on another site.

<a href="#mainsection" class="skip">skip to content</a>
<a href="#topnav" class="skip">skip to main navigation</a>
<a href="#topnav" class="skip">skip to main navigation</a>

  1. “skip to main navigation” is repeated twice…
  2. but does nothing as “topnav” is not present anywhere on the page
  3. The skip links aren’t wrapped in any form of structure (thus also requiring the class=”skip” on each link)

The site claims to be XHTML 1.0 Transitional but has 76 validation errors, including a character encoding mismatch between the HTTP header and the meta tag. It calls in 8 external CSS files and 23 external JavaScript files and contains large chunks of commented out HTML (so it will be slow as well as inaccessible).

Compared with this, some of my stuff is not so bad after all.


From the web site of a major high street retailer:

<ul>
    <li><a accesskey="c" href="#maincontent">
        Jump to main content [Access key 'C']
    </a></li>
    <li><a accesskey="n" href="#primarynav">
        Jump to primary navigation [Access key 'N']
    </a></li>
    <li><a accesskey="s" href="#maincontent">
        Skip navigation [Access key 'S']
    </a></li>
</ul>

What is the difference between “Jump to main content” and “Skip navigation”? Clearly nothing in this case as they both go to #maincontent. But for added points, there’s no id=maincontent or name=maincontent anywhere in the page, so they both do nothing.

And trying to find a contact form to inform them of this error I instead find a “Generic System Error” page which contains this very user friendly message:

CMN3101E The system is unavailable due to "CMN0420E".

Some days I actually feel quite okay about the work I produce.