Language of parts for image alt text

Question

I was working on the DHS trusted tester course and came across this example (on Lesson 4: Forms (On Input) > Passing examples > Example 3) where a page language is changed to Spanish using a radio button.

A screenshot of a webpage

is shown with radio buttons at the top to select page language, and both English and Spanish text content (title in English, content in Spanish), and the alt tag is set as follows:

`<img src="https://training.section508testing.net/pluginfile.php/38884/mod_book/chapter/2767/image50.png" 
id="Picture312700771" 
alt="Screenshot of web page with the Spanish option selected for page language and the following text: Department of Homeland Security. In Spanish: Hola y bienvenidos a la página web de accesibilidad del Departamento de Seguridad Nacional." 
class="img-responsive border" longdesc="" width="542" height="190">`

This is a bit of a contrived example as realistically you shouldn't be using the image to convey text anyway, but here NVDA reads out everything in the default English voice. The developers have tried to compensate for this by showing a part is 'in Spanish', but it doesn't stop the SR reading it out in the wrong accent!

My question relates to WCAG 3.1.2 Language of Parts. If this were plain text (as in the web page this screenshot was taken from) you'd need to set the lang="es" for the part in Spanish assuming the main page is lang="en" (or vice versa if selecting the radio button option has changed the entire page's language).

However, in an image showing text in multiple languages, I'm not certain what is expected. This post suggests you should localise the alt tag: Is is good to use local language on the alt tag? but I'm unsure how you would do this or if you can set it to be multiple languages in a single alt tag for the benefit of AT users.

My only other solution to this would be to use aria-labelledby where the language for 2 separate labels can be set independently, but again unsure if this would work in practice. Any thoughts on how you'd design this to avoid violating 3.1.2?

Answer 1

You have a few possibilities.

To not use the ALT tag with two languages, you can use the aria-label

<img src="https://training.section508testing.net/pluginfile.php/38884/mod_book/chapter/2767/image50.png" id="Picture312700771" 
aria-label="Description in English. Descripción en español.">

Alternatively use a figcaption with a span and lang attribute

<figure>
  <img src="https://training.section508testing.net/pluginfile.php/38884/mod_book/chapter/2767/image50.png" id="Picture312700771" alt="Description in English and Spanish.">
  <figcaption>
    Screenshot of web page with the Spanish option selected for page language and the following text: Department of Homeland Security. 
<span lang="es">Hola y bienvenidos a la página web de accesibilidad del Departamento de Seguridad Nacional.</span>
  </figcaption>
</figure>

Make sure the page has utf8 header and content