html5 / xhtml "role" attribute

[murraybiscuit]

i've come across <div role="main"> and various other similar "role" markups in various popular html templates. sometimes the property is "navigation" sometimes it's "sitemap". it seems to be whatever you want it to be...

googling it just leads me to a somewhat defunct xhtml reference in the html spec and aria roles, which don't specify any of these properties.

why do people put this code in their templates? is there some kind of useful reference to properties which ARE actutually supported by screen readers / accessibility engines? i'm happy to use semantics it if it gives greater usability, but it just seems like hipster markup to me...

 

[frikkie6000]

For me personally it makes the flow of the site much easier with HTML 5, although I haven't seen the use of div role before I normally make use of <div class="whatever"> as this gives me the ultimate control in site layout as well as colourising etc and I tend to group the following

<div class="header">
<div class="left-sidebar">
<div class="right-sidebar">
<div class="footer">

This works perfectly on all browser umm except IE 6, even android and apple Ios seems to understand it

 

[murraybiscuit]

byron, your markup uses divs which are not exclusively html 5.
http://www.w3.org/TR/html4/struct/global.html#edef-DIV
class is a pseudo-attribute afaik (no real semantic utility).
assigning class or id for the purposes of presentation has no semantic benefit.

html 5 would replace your divs (which are semantically meaningless) with more useful elements, like <header><footer> (the columns are a different story as they are largely presentational).
even then the html 5 header and footer elements should be used within an <article> or <section> context to have better semantic utility (not as layout elements to present top and bottom of your page).