E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Heidi Jungel
Date: Tue, Dec 13 2011 10:03AM
Subject: WAI-ARIA: Labelling Landmarks
No previous message | Next message →

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,

From: Jared Smith
Date: Tue, Dec 13 2011 10:33AM
Subject: Re: WAI-ARIA: Labelling Landmarks
← Previous message | Next message →

On Tue, Dec 13, 2011 at 10:06 AM, Heidi Jungel wrote:

>  3.  Is there a better way to label these landmarks so that we can differentiate between the two?

<div role="complimentary" aria-label="Class Roster">

Jared

From: Heidi Jungel
Date: Tue, Dec 13 2011 12:09PM
Subject: Re: WAI-ARIA: Labelling Landmarks
← Previous message | Next message →

Awesome! Thank you, Jared. This is so much easier.

From: Gunderson, Jon R
Date: Tue, Dec 13 2011 2:21PM
Subject: Re: WAI-ARIA: Labelling Landmarks
← Previous message | No next message

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