Preferred technique for using HTML5 elements/ARIA roles

Question

So this is a small issue I keep thinking about from time to time. For about a year or two I've been curious about the best way to use HTML5 elements.

The most frequent technique I see - Use the elements like header, footer, section, aside with classes and ARIA roles on them. Use html5shiv.js for older browsers.

This lines up more with graceful degradation rather than progressive enhancement. If JS is not enabled/not available at all in older mobile/desktop browsers, we loose the ability to style a layout built solely with HTML5 elements.

Another approach I've seen lines up more with progressive enhancement and does not rely on JS being enabled in older browsers for the layout to work properly. I've talked just briefly with Josh Clark[Global Moxie] about this. They used this approach in the m. version of People Magazine. http://www.people.com/people/mobile/home/ They used HTML5 elements to help outline the semantics of the document and divs with classess for styling. No styles were dependent on HTML5 elements like header, footer, aside, section.

One of my questions is, if ARIA roles are already set on the divs, is it beneficial to layer HTML5 elements around my divs/spans to give the document markup a better outline? Other than "being semantic", what does this benefit?

If adding the HTML5 elements around the divs which are used for styling, would it be beneficial to move the ARIA roles from the divs, to the HTML5 elements? I'm assuming it would, but would love to get more feedback on this technique.

Answer 1

The HTML5 spec greatly improved the automation of the outlining algorithm and as such browsers and screen readers will definitely benefit by your inclusion of html5 tags and ARIA roles.

Mozilla produced a great document on this topic that addresses the incorporation of html5 elements into that of an html4 document. This should serve as a great example of where you can swap out some divs for more semantic elements. Found here: https://developer.mozilla.org/en-US/docs/HTML/Sections_and_Outlines_of_an_HTML5_document

With that said, the new semantic elements of HTML5 do capture a lot of the div's territory, but the div should still be used when there is no other semantically appropriate element that fits your purpose. This has also been greatly expanded upon by html5 Doctor. Found here: http://html5doctor.com/you-can-still-use-div/