WCAG: Text Alternatives

[StephDriver]

Summary

The OLH website currently has no tests/exercises, and is not designed to create a specific sensory experience. Time-based media will be discussed in 1.2. Controls and inputs will be reviewed in section 4.1. This review considers:

1. CAPTCHA
2. decorative images
3. the text alternatives from all other non-text content

• review and update background image description. #361
• Logos should normally be described as logos in the alternative text #360
• decide whether journal cover images should have text alternatives, added to alt text janeway#2825
• news article headings issue is with user content which is not under our control, adding to User Content Accessibility Issue Collection janeway#4085 but not further action under this audit.

Audit Results

CAPTCHA

• captcha offers accessible alternatives

Decorative Images

Icons with labels

these are decorative and are correctly set to be ignored with alt=""

Text Alternatives for non-text content

Background images

While these are decorative, they also set the scene for each page. To ignore them for assistive tech users would remove a key part of our branding and design from their experience. They currently have some alt-text, which I agree is required, but the content of this needs to be revised for clarity. For example when landing on the home page this is how that page begins when being read aloud (using Voiceover on iOS):

Open Library of Humanities.  
Toggle Navigation.
We are the Open Library of Humanities.
Woman with hoop earrings dancing and waving arms.
Woman burying her face in the pages of a book.
For free.
For everyone.
Forever.

The two lines about women are the descriptions of the two images as the top of the page. These have distinct visual styling that links across the whole site - and yet here none of that comes through. I suggest we need a form of text that identifies images as branding/background that fits with the theme so that these images can be given their own alt-text styling, that also fits with the branding. This might be something to think about more widely and add to the asset library alongside the images themselves.

On mobile, some of these background images are part off the side of the screen - so the description then doesn't match with what is visible on the page because it id describing the whole image. This needs a rethink, as image description should match the visible image.

Similarly other background images are described where they fall, without necessarily fitting within the flow of the text of the page. But not all background images are described (for example, the image at the top of the OA glossary page is not described).

1. reconsider how background images should be described in line with the visual branding
2. reconsider the description in regards to when the background image is read out in the context of surrounding paragraphs.
3. consider how first background image at the top of the page sets the scene/branding identity and how an equivalent may be done with the description that makes sense in the context of hearing that page.

Logos

The OLH logo at top of page is read out as Open Library of Humanities without indicating it is a logo.
The OLH, Janeway, Birkbeck logos at the bottom of the page are ignored. I am not sure why they are not being read out, given there is a defined alt attribute for each of them. This is described further within #325

Images within snippets e.g. on news pages, journal pages with a link to that item

It could be argued that most of these are decorative, for example in the list of journals there is the journal cover as a thumbnail next to the name of that journal and a link to the journal page. The cover should be described on the journal page itself, but on following a few of these links, the journal cover is not then on the landing page. So there is an argument for needing to describe the journal cover image.

When it comes to new and announcement items, where the headline is more variable, this is not always the case. Sometimes the thumbnail is of the banner image, and again this would be described on the linked page. But sometimes the thumbnail contains vital information, for example:

The image of "The Comics Grid, Journal of comics scholarship" is set to be ignored. But the title refers to volumes, without the name of the journal, and thus that image contains important information for the context of the link, which is not being conveyed other than visually.