CODEWITHSUNDEEP
accessibilitywai-aria
Sumit M Asok
Sumit M Asok

Reputation: 2950

When Using wai-aria how important is alt tag

If an image tag has to be inside the a tag, and has a sibling span, that displays the content which is same as the one in alt/title tags of a/img elements.

Without duplication of data

how can get accessibility using aria-labelledby attribute.

<a href="/project/image.jpg" title="photo caption" alt="photo caption">
 <img src="/image/thumb.jpg" alt="photo caption"/>
</a>

<span id="pc_1">photo caption</span>

I am hoping that this Question will help me to understand how aria specific attributes and regular html attributes play their roles in accessibility. Alt tag vs aria-labelledby.

Upvotes: 0

Views: 1067

Answers (1)

Ryan B
Ryan B

Reputation: 3392

Well for starters, your HTML is incorrect. The alt attribute is only valid on <img>, so you putting it on the anchor, is invalid. Second, I don't recommend using title because different assistive technologies deal with it differently. Third, alt text should be describing the image's meaning. Looking at the code, this link opens up a larger image of something, so the alt should be something like view a larger version of the Mona Lisa.

If you were writing this in HTML5, I'd modify it to:

<figure role="group">
 <a><img src="...." alt="Photo 1: view a larger version {a short phrase}" /></a>
 <caption>Photo 1: photo caption here</caption>
</figure>

You can check out W3C's page on HTML5 techniques for text alternatives for more reference/guidance.

Replies to comments Sumit said

"a short phrase" in our app is the "photo cation" itself. Or that duplication wouldn't matter for our users ?

Your app is doing it wrong, as I mentioned above. The alt should be describing the image if it doesn't have a proper title. The caption of it should give additional context, ex:

<figure role="group">
 <a><img src="...." alt="Photo 1: view a larger version the Mona Lisa" /></a>
 <caption>Photo 1: Sumit posing in front of 
 the <em>Mona Lisa</em> by da Vinci </caption>
</figure>

OR

<figure role="group">
 <a><img src="...." alt="Photo 1: view a larger version of a boy 
  holding a balloon" /></a>
 <caption>Photo 1: my son Johnny holding a red balloon from the 
  State Fair. It has to be 2' in diameter!</caption>
</figure>

Sumit said

Also, my understanding was that image figure would prefer to have role=presentation. Is group better than presentation for some reason ? I'm sorry if I sound too naive with Accessibility

The role="presentation" is not correct here, as it removes syntax. So, making the role="presentation" in my Mona Lisa example, would make the output look like:

<>
 <a><img src="...." alt="Photo 1: view a larger version the Mona Lisa" /></a>
 <caption>Photo 1: Sumit posing in front of the
 <em>Mona Lisa</em> by da Vinci </caption>
</>

Upvotes: 6

Related Questions