Fallback image text

[MontseTelefonica]

Goal

To be able to see a text when a image fails to load

Context

When a image fails to load, and it's not a part of a card or any element, could an alternative text be a possible fallback experience along with the image?

Impact

In designs where the images do not have other elements to support, it can be a way of not only providing an image with no value to the user.

Discussion Questions

-Is it possible?
-Is it even neccesary?
-Is there other ways to solve this problem?

Additional considerations

No response

Do you have a visual proposal?

https://www.figma.com/file/eE87dEhhkHw8esqhfvoZ0c/Figma-para-poner-ejemplos-de-cosas?type=design&node-id=290-3735&mode=design

[aweell]

Hi @MontseTelefonica,

Some questions:

1. Do the alternative texts included with images also come through the API? Because it could perhaps be the case that just as I can't display the image, I also don't have the information for that alt text?
2. Regarding your questions:

-Is it possible?
-Is it even neccesary?

I leave here documentation from w3c related to the usage of alt text: https://www.w3.org/WAI/tutorials/images/decision-tree/

-Is there other ways to solve this problem?

Yes, we've seen for example how "formerly twitter" solve this by adding a button with the alt label that shows a sheet with the alt text when available.

3. The intention is to display the alt text only in the image component, should other components be considered? I'm thinking for example in media, naked, mediaDisplay, poster cards, hero. For example, the position suggested could be a problem in a poster card due to the overlay with content.

[MontseTelefonica]

We have a case in entrypoint list, where the elements is just an image with a link, no text. We have "solved" this by using the entrypoint title (which is mandatory) and use it inside the image, this is our "alt text" invention.

But my concern is about using the image element alone, as an atom that is used in the CMS "dynamic content". Should the atribute "alt" text be mandatory in terms of accesibilty? If the image fails, how the alt should be displayed for the user?

[aweell]

This is the current behaviour of the native html img component vs mística image:

https://tinyurl.com/25dr5nr4

[yceballost]

Should we have the possibility to show an alt text always? even is the image is working? Like twitter

For example

[MontseTelefonica]

Maybe could be interesting, I don't know. In terms of card image I don't know if it's relevant, but when is a standalone image, maybe it could be useful.

[Ro-Matos]

I think there might be problem if the alt description is too long. Is this really the alt on Twitter or a kind of tag above the image?

[Ro-Matos]

Hi guys! I consider important shows the alt text when image fails to load, in the Mística Image component. Just as it is displayed in the native tag img.

Regarding the mandatory alt text in the CMS, it must be taken into account that in the case of purely decorative images they can be ignored. It must be evaluated according to the context. In case of decorative image, the most recommended in the code is to use the empty alt (alt="").

[aweell]

Thank you @Ro-Matos, What i was seeing is that there are only two cases:

• The image need alt text
• The image is purely decorative and we can force alt=""

So when the alt is not provided we can force the empty alt assuming is always decorative

[aweell]

Hemos creado una issue para abordar este problema, quedan algunas dudas pendientes para cuando nos pongamos con las especificaciones de esta feature:

• Como se evita que el lector de pantalla lea tanto el alt como el texto visible? @MontseTelefonica esto da algún problema en producción?
• No se nos ocurre manera de solucionar cuando son textos muy largos, ya que tener un elemento interactivo dentro de otro elemento interactivo no nos parece la mejor opción.

[MontseTelefonica]

Son ambas muy buenas preguntas pero no tengo respuesta.
El primer punto sería un tema de implementación técnica, que solo lea uno de los dos, entiendo.
El segundo punto se me escapa, no se si sería posible o tendría sentido poner una limitación de caracteres al alt. O quizás deplegando el alt en otro lugar que no sea bajo el propio elemento.

Dejo ideas, pero entiendo que ninguna cubre todos los riesgos. La de mostrar el texto sobre la imagen sin falla lo descartaría porque no sabemos que tamaño va tener las imagenes y en algunas sería inviable.

https://www.figma.com/file/eE87dEhhkHw8esqhfvoZ0c/Figma-para-poner-ejemplos-de-cosas?type=design&node-id=290-3735&mode=design

[aweell]

Gracias por el ejercicio ❤️

En twitter por ejemplo lo despliegan en una bottom sheet, igual podemos explorar por ahí siendo la que mas escala cuando no controlamos la longitud del texto y el tamaño de la imagen es bastante relativo.

[yceballost]

we will work on it! #1723