HTML5 Accessibility Chops: ‘real world’ ARIA landmark use

I tweeted yesterday about initial results of data crunching on ARIA landmark role use on the top 10,000 web sites HTML home page code samples. What I found is very encouraging.

ARIA role=banner usage

custom ARIA HTML5 logoAs per the ARIA specification there should only be 1 role=banner per page. Of the 93 pages found to include the banner role:

  • 90 pages had 1 instance (97%)
  • 2 pages had 2 instances
  • 1 page had 4 instances

ARIA role=main usage

As per the ARIA specification there should only be 1 role=main per page. Of the 130 pages found to include the main role:

  • 124 pages had 1 instance (95%)
  • 1 pages had 2 instances
  • 1 page had 3 instances
  • 1 page had 4 instances
  • 1 page had 7 instances
  • 2 pages had 10 instances: The daily What & fail blog which look to be affiliated sites using the same template.

ARIA role=contentinfo usage

As per the ARIA specification there should only be 1 role=contentinfo per page. Of the 72 pages found to include the contentinfo role:

Other analysis:

  • There was found to be a high correlation between use of the ARIA landmark roles  and use of the HTML5 doctype. For example of the 130 pages containing role=main, 101 (78%) also used the HTML5 doctype.
  • Typically role=main was included on a div element and there was a high correlation between use of role=main and id values such as “main” (39 instances) and “content” (34 instances).
  • role=”contentinfo” was used in conjunction with the footer element on 36/69 (52%) of instances.
  • role=banner was used in conjunction with the header element on 41/93 (44%) of instances.
  • The use of any landmark roles across the 8900 or so sample pages was low (approx. 3%), but use was considerably higher (17%) on the subset of pages (1539) that used the HTML5 doctype.
  • role= search was found on 103 pages, 90 had 1 instance, 13 had 2 instances.
  • role=application was found on only 5 pages, which is a good result considering the issues that can arise through its misuse.

Conclusion

From an initial analysis the correct use of ARIA landmark roles is surprisingly high. Developers are generally using ARIA landmark roles as intended. Although use is low, there is an major upward trend in use as sites switch to HTML5.

Further reading:

Comments

  1. Steve,

    Thanks for this. It is good news to see the use of ARIA landmark region roles growing.

    I am curious about how you approached counting instances of roles like main and banner. Multiple instances per page are allowed and important to have in particular cases. The restriction is at the document or application level. I am seeing cases where it might be advisable for us to reword the restriction a bit more broadly than the note currently included in the definitions allows.

  2. Hi Matt,

    am curious about how you approached counting instances of roles like main and banner. Multiple instances per page are allowed and important to have in particular cases. The restriction is at the document or application level. I am seeing cases where it might be advisable for us to reword the restriction a bit more broadly than the note currently included in the definitions allows.

    If a document contains a nested document then I agree its OK to have main and banner in the nested document as weel. But in the majority of cases for web pages I consider that 1 banner/main/contentinfo is a good rule of thumb.

  3. Hey Steve,
    The close correlation between the HTML5 doctype and use of ARIA roles may be related to the literature covering HTML5. Since ARIA is part of the HTML5 spec, any comprehensive study of HTML5 should include it, and that’s what I’ve found in my reading. And I wish more than 3% used ARIA but structural markup changes occur rarely vs how often the content within might. Are you planning on resurveying at some point? Thanks for doing this research. Tipped to your post by @brucel.

Comments for this post are closed.