aria roles and marking up important content

Tue Jun 16 03:23:52 UTC 2009

there's an approach that's been hiding in plain sight (from me, anyway)

among the ARIA roles are "main" and "complementary"
they are intended to do what we want, marking the more and less  
central content in a page

only one thing in a doc is supposed to be tagged "main", so that's  
not very flexible
but lots of things can be tagged "complementary"

since roles are attributes that CSS can select on, it is easy to  
style out anything tagged "complementary"

this very simple example page shows this:

<html>
<head>
	<title>Role Styling Test</title>
	<style type="text/css">
   		div[role="complementary"] {display:none}
   	</style>

</head>
<body>
<div role="complementary">
This is secondary text.
</div>
<div>
This is important text.
</div>
<div role="complementary">
This is secondary text.
</div>
<div>
This is secondary text not marked "complementary".
</div>
</body>
</html>

A drawback to using "complementary" in this way would be that if we  
were dealing with content someone else had tagged for ARIA, say with  
a screen reader in mind, they'd be using "complementary" differently,  
that is, NOT to mean "don't show this on an iPhone". so we'd have to  
mess with their tags. We can use RDFa to coin our own role tags that  
no-one else would use, as in this example page:

<html>
<head>
	<title>Role Styling Test</title>
	<style type="text/css">
		div[property="fe:complementary"] {display:none}
   	</style>

</head>
<body>
<div role="complementary">
This is secondary text marked with the ARIA "complementary" tag. It's  
visible in this version.
</div>
<div>
This is important text.
</div>
<div>
There follows some text marked with our very own "fe:complementary"  
property. It should be invisible.
<div property="fe:complementary">
This is secondary text marked "fe:complementary".
</div>
</body>
</html>

Clayton Lewis
Professor of Computer Science
Scientist in Residence, Coleman Institute for Cognitive Disabilities
University of Colorado
http://www.cs.colorado.edu/~clayton

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20090615/aae789f2/attachment.html>