Achieving Accessibility Alt text Colour Contrast

In spring 2021, Brandon Walsh performed a general accessibility audit using Google Chrome's Lighthouse feature. Below is some received wisdom from that process, but he might have missed things. In the future, you can find information for how to perform accessibility testing with Lighthouse here - https://developers.google.com/web/tools/lighthouse.

Alt-text

As part of our response to the recommendations outlined within Dr Kavanagh's report and discussed in Issue #2072, we are committing to provide alt text for all figure images, plots and graphs included in lessons.

Alt-text is integrated into the liquid syntax we use to include images. The required format is: {% include figure.html filename="file-name.png" alt="Visual description of figure image" caption="Caption text to display" %}

Here are some resources to help us write effective alt-text:

• Writing Alt Text for Data Visualization : Amy Cesal
• Web Accessibility Tutorials: Complex images : W3C
• Alt Text & Accessibility : Web Aim
• How to Write Great Image Alt Text : Catherine McNally
• The Right Way to Write Alt Text | : Natalie Gotko
• Examples of Accessible, Effective Chart Descriptions : Frank Elavsky
• Collated list of people and resources in the field Dataviz Accessibility Resources : Frank Elavsky

Note: Most of these articles warn that screen readers cut off alt text which is longer than 125 characters, but elsewhere this is found to be outdated information, although being clear and succinct is recommended.

Translating Alt Text for Shared Images

We use the same translation strategy for sharing translated alt text for images that are shared across the site. The top of the "contribute" page, for example, has an image that is shared across the different language publications. To implement this, we first create a section in _date/snippets.yml for a new set of alt text like this:

write-a-lesson-image-alt:
  en: A woman at a desk writing.
  es:
  fr: 
  pt: 

Then, each page can use the same piece of markup to introduce the image with translated alt text:

<img src="{{site.baseurl}}/images/author-sm.png" class="garnish rounded float-right" alt="{{ site.data.snippets.write-a-lesson-image-alt[page.lang] }}"/>

The important piece here is alt="{{ site.data.snippets.write-a-lesson-image-alt[page.lang] }}" - this fills in the alt text for the image with translated language from the snippets file.

Colour

Consider users with colour vision deficiency (colour blindness). Authors and editors are to be aware of avoiding the use of red/green in data visualisations, graphs etc. James Baker explains that most standard languages (including R & Python) have colour vision deficient friendly and accessible libraries. He has collated the following resources, and we ask editors to insist upon on their use:

• R https://cran.r-project.org/web/packages/colorBlindness/index.html
• R https://cran.r-project.org/web/packages/colorBlindness/vignettes/colorBlindness.html
• Python https://pypi.org/project/colorblind/"

Contrast

Our base theme had a lot of contrast issues. When Brandon performed an accessibility audit in May 2021, he tried to clean things up as best he could. But he might have missed things! Information for how to perform this particular test can be found here - https://web.dev/color-contrast/. In general, the smaller the text on the page the higher the contrast ratio has to be.