Question

I’m just trying to get my head around role attributes. Firstly, can someone explain the difference between the following role categories? I’ve been reading the W3C and it’s double Dutch to me.

1. Abstract Roles
2. Widget Roles
3. Document Structure Roles
4. Landmark Roles

Secondly are the following usages acceptable/recommended?

Image slider:

<ul id="slider" role="marquee">
<li><a href="#"><img alt="#" src="images/sliderplaceholder.jpg"></a></li>
<li><a href="#"><img alt="#" src="images/sliderplaceholder.jpg"></a></li>
</ul>

Twitter Feed

<section id="twitter" role="log">
<h1>Twitter</h1>
<p>Bla bla bla</p>
<p>5 hours ago</p>
<p>Bla bla bla</p>
<p>5 hours ago</p>
</section>

Thanks 🙂

Answer 1

Abstract Roles

Are roles that shouldn’t be used in your documents at all, but define common accessibility properties for the other types of role.

Widget Roles

indicate components on the page such as a progress bar or a ticker. Unlike document structure and landmark roles, they tend to have a interactive aspect to them.

Document Structure Roles

indicate areas within the main content of the page. Things like articles, sections, and headings.

Landmark Roles

indicate the areas that form the entire page including all the periphery common on web pages. Banners, asides, navigation areas and metadata areas are landmarks.

Marquee and Log Roles

These are both widget roles, and you can think of them as having the same relationship as <ul> and <ol>. If the snippets of information shown changing over time on the page have no intrinsic order to them (e.g. new headlines), use marquee. If the snippets are intrinsically ordered, (e.g. a time-line) use log.

So, certainly the twitter feed example is correct, and the image slider probably is too, assuming that there is backing javascript updating them within the displayed web page.