[a11y] Every image must be coded as either meaningful or decorative

I found several images that are not coded as either meaningful or decorative. These are mainly SVGs used in the page without text alternatives (WCAG 2.1 success criterion 1.1.1). As a reminder, for a SVG, the text alternative could be a <title> element within the SVG, an aria-label attribute containing the alternative or an aria-labelledby attribute linking the text alternative in the DOM. If these images are purely decorative, they should have an empty alt attribute for images, or a role="presentation" for SVGs.

The list of images:

The logo itself — No text alternative linked to the SVG itself. I also want to warn you that the sibling <span class="screen-reader-text"> could be considered as a bad practice. This text is not really describing the logo, it is in fact providing new information only available to users with screen readers. This could be disturbing for sighted users of assistive technologies. This looks more like an SEO technique than accessibility but here it is not really good for the experience of users with AT :) Also, I would not advice the aria-label on the link in this situation especially because it can be misleading. The content of the link is not Back to homepage but the content of the image Stéphanie Walter. Users of assistive technologies are used to understanding that a link with the name of the website is sending them back to the homepage. Finally, on the homepage this label is a bit off because users are already on the homepage.
Arrows within buttons should have an role="presentation" attribute :)
Same for the ones displayed on hover on images (Read the case study context)
Facebook, Twitter and Linkedin icons could have an role="presentation" attribute on the SVG element too.

Comments (4)