WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: WAI-ARIA: Labelling Landmarks

for

From: Gunderson, Jon R
Date: Dec 13, 2011 2:21PM


Heidi,

Another way to use use headings (H2) which provides redundant navigation schemes to screen reader users (Landmark or Header navigation) to get to the sections of the page:

<div role="complimentary" aria-labelledby="class_roster_h2">

<h2 id="class_roster_h2">Class Roster</h2>
....

</div>

<div role="complimentary" aria-labelledby="readings_h2">

<h2 id="readings_h2">Suggested Readings</h2>
....

</div>

You probably already would have the text "Class Roster" and "Suggested Readings" visible in the document to label the list anyway for graphical renderings.

Jon


-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Heidi Jungel
Sent: Tuesday, December 13, 2011 11:06 AM
To: <EMAIL REMOVED>
Subject: [WebAIM] WAI-ARIA: Labelling Landmarks

Our site uses various landmark roles and WAI-ARIA features.
Since it can get complex, I suggest that we label landmarks so that the user can differentiation between landmarks of the same "role"
For example, if there are two complimentary landmarks, it would look like the following:

<div role="complimentary" aria-labelledby="comp1_label"> <span class="hidden-element" id="comp1_label">Class Roster</span> ....
</div>

<div role="complimentary" aria-labelledby="comp2_label"> <span class="hidden-element" id="comp2_label">Suggested Readings</span> ....
</div>


1. Is this a standard? If so, can someone point me to that standard?
2. Would this be useful? The hidden-element class hides it from the visual users, but still reads the landmark on NDVA/JAWS 3. Is there a better way to label these landmarks so that we can differentiate between the two?

Your help is greatly appreciated.

Thank you,