Add alt tags to existing images
Part of #1106 (closed) (read this issue for access to the full audit and recommendations).
All images used in the application need to have alt text (to be left blank if the image is decorative):
To consider:
- Images on landing screen
- Album covers
- User avatars
- Artist avatars
Audit section (Section 1.1.1):
The whale-logo on every page has a title=”Funkwhale”. Because not all screen readers tend to read title-attributes, we advise to either use link text (the text between the anchor tags) or to use the
element on the svg.On every page, next to the logo, there is an image of the text ‘Funkwhale’. Images of texts can lead to accessibility issues, we therefore highly recommend to use HTML and CSS instead (see also criterion 1.4.5). Another solution is to merge the whale logo and the ‘Funkwhale’ text and treat them together as one logo. Then only one text alternative is needed.
The image of the whales on page https://open.audio/ doesn’t have an alt-tag. Images always need to have an alt-tag. In this case the image is decorative, so the alt tag can be empty (alt=””). This way assistive technologies will ignore the image.
The same goes for all the images that are used as covers of Albums/Tracks/Artists and profile pictures. These should have an (empty) alt-tag. Because these pictures result from content created by users, the alt-tag must be created when a user uploads an image to ensure consistency. On page https://open.audio/settings the avatar image needs an alt-tag. As mentioned above, when pushing the avatar to public pages, it should have an (empty) alt-tag.