aria roles and marking up important content

Tue Jun 16 15:05:30 UTC 2009

On second thought, I think I agree more with the issue you've outlined below: in fact, Fluid has had a similar discussion regarding conventions separating DOM selectors from stylistic selectors to avoid this very problem - piggybacking and relying to heavily on something that can change for other reasons.

Now Im a little more up in the air about using ARIA....

From: fluid-work-bounces at fluidproject.org [mailto:fluid-work-bounces at fluidproject.org] On Behalf Of Jacob Farber
Sent: Tuesday, June 16, 2009 9:18 AM
To: Clayton H Lewis
Cc: Fluid Work
Subject: RE: aria roles and marking up important content

Thanks very much for this Clayton, it seems more and more like piggybacking on ARIA or semantic class names seems a likely route for this scenario.
Im wondering if we were to roll with ARIA, would we really need to conflict with other people's usage of it (assuming they are using it in the first place)? Could we not look towards their usage of ARIA as THE pattern we should base filtering on? It might not be as straightforward as a hunting down a single ARIA role, but it seems like that's what we would want to do - if someone took the time to use ARIA as best they could, couldn't we just roll with that?

I hope I'm not misunderstanding anything.
Jacob

From: Clayton H Lewis [mailto:Clayton.Lewis at Colorado.EDU]
Sent: Monday, June 15, 2009 11:24 PM
To: heidi hazelton; Jacob Farber; Fluid Work
Subject: aria roles and marking up important content

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/20090616/c701623a/attachment.html>