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>
</>