CODEWITHSUNDEEP
htmllocalizationwai-ariawcag2.0alt-attribute
TomC
TomC

Reputation: 21

Language of parts for image alt text

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?

Upvotes: 2

Views: 506

Answers (2)

Tsundoku
Tsundoku

Reputation: 2707

The example fails WCAG Success Criterion 1.4.5 Images of Text, since I doubt that this "particular presentation of text is essential to the information being conveyed".

If we ignore Success Criterion 1.4.5 for a moment, the solution is not aria-label (which would be read instead of the image's alt attribute) because attribute values don't support language markup. What can be used instead is an alt attribute saying something like "Screenshot of web page with the Spanish option selected for page language; check the longer description for details" and adding a description below the image. This description can be in a normal p element where you can use code such as <span lang="es"> where necessary. You could add your "sr-only" class to it if you want only screen reader users to get this information. But if you keep it visible, people who rely on custom stylesheets will be able to read that text with their favourite styles instead of only the image's black on white.

(Adding an aria-describedby attribute to reference the longer description is not great in this case, since the description referenced in this way gets flattened out as if it were just plain text.)

Upvotes: 0

mplungjan
mplungjan

Reputation: 178375

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

Upvotes: 0

Related Questions