Generated HTML:
VoiceOver in Safari will announce this as:
"Link, image, Leidschendam-Voorburg logo, to the homepage".
All info is there.
There is an advantage of using the alt text instead of an aria-label solution. When the connection is slow, the alt text will show up before the image does and already informs all users of the site name and link destination. It's quite robust.
Yes, in this case the fact that this is a logo tells important info.
Not only for blind users, but for all screenreader users. If you are visually impaired but not totally blind, you may see the image vaguely. With the addition of the word logo, you also know what the image is.
The site name is required, but the logo gives extra context.
No, the visible name is in the alt text, which becomes the accessible name of the link. Adding extra context to the link is common practice.
Compare this with the notorious "Read more" link in a card. A common pattern is to use a sr-only CSS class (or equivalent) with additional text:<a href="url">Read more<span class="sr-only"> about cute kitten</span></a>
.
In our case:
The whole visible text should be in the accessible name, but extra information, like the meaning of the image and link destination can be added for context. That way the purpose of the link is explained.
Of course there are other and also valid solutions. By using plain simple HTML I want to honor the first rule of ARIA:
If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
Happy Holidays!
Web accessibility specialist and developer from the Netherlands.
Site: rianrietveld.com
Social: @rianrietveld@mstdn.io