CODEWITHSUNDEEP
accessibilitywai-ariascreen-readers
Pete
Pete

Reputation: 7579

Should ARIA labels provide context?

I'm working on a site that lists a bunch of MP3 radio programs. Every program has a few different tab-able elements: a title link, tags, controls to choose language, and a play button. When the user tabs over the content with a screen reader, they hear something like:

Dan's Story

Mystery

French // There might be a tag named this

Mayhem

English

French

Spanish

Play

Under the Treehouse

Nature

Outdoors

English

French

Play

That's pretty confusing to discern from only audio.

So my question is this, what's best practice in situations where you have recurring "components" that have controls. When you tab over the control, should the screen reader provide context as to what component it belongs to?

For example, should I set the aria-label for the play button to something like aria-label="Play Under the Treehouse"? Similarly, should I add aria-labels to the tags that describe them as a tag, for example aria-label="Mystery Tag"?

Upvotes: 1

Views: 195

Answers (2)

aardrian
aardrian

Reputation: 9009

In a collection of tags a heading does the job well without being too verbose:

<h#>Tags</h#>

<p>
Nature, Outdoors, English, French
</p>

Ideally, if you have any content grouping then this fits naturally. You can style the heading to minimize it as you see fit.

For the play button, that also depends. If the play button is clearly for the only thing on the page, then you probably do not need it. If the play button is one of many, but grouped with the title of the thing, you may not need it. If there are only play buttons and no good grouping, or the play button shifts context, then you probably do need the label.

The key here is to rely on good content and HTML structure first. Then consider how verbose the page is otherwise (verbose pages are a hassle for screen reader users). Then, only when you absolutely cannot find a good way in standard HTML or page structure, could you consider using ARIA.

Upvotes: 1

Fiona - myaccessible.website
Fiona - myaccessible.website

Reputation: 14921

You could have some screen reader only text in between the sections, like "Tags" and "Languages".

Just have some text that's positioned off the screen:

.screenreader-only
{
        position: absolute;
        left: -10000px;
}

Your aria-label solution may work dependent on the HTML, but screen readers only tend to read that out if it is a form control or actual label - it doesn't get read out for a <div> or <span>

Upvotes: 1

Related Questions