Texto alternativo en imágenes

MIT App Inventor Help
1

Buenos días.
Este es mi primer post. Saludos a todos.
Tengo una duda sobre cómo poner un texto alternativo a las imágenes de mi app para que se pueda mostrar en los lectores de pantalla de personas con problemas de accesibilidad.
¿Cómo pongo en appinventor un texto alternativo en cada imagen de mi app?
Un saludo.

Google Translate
Good Morning.
This is my first post. Greetings to all.
I have a question about how to put an alternative text to the images in my app so that it can be displayed on screen readers of people with accessibility problems.
How do I put an alternative text in appinventor in each image of my app?
Greetings.

2

If you put the image as a background of a canvas you can put a text on top of it.

You could also use this extension where you can make an image from every component.


So you could use an arrangement with an image as background en put some labels inside for the text.

Maybe you can tell more about what you are trying to do. Maybe show an image of how the endresult should look.

3

Gracias por su respuesta; pero creo que no es lo que quiero.
Me explico:
Cuando un lector de pantalla lee la pantalla que tiene imágenes y no las puede mostrar, en lugar de que dé un error, quiero que aparezca un texto explicativo de lo que se ve en la imagen.Sería algo como lo que se usa en una página web donde no se puede ver el contenido de una imagen y en su lugar aparece un texto explicativo.Creo que se usa la instrucción “alt image” o algo así cuando se escribe el código.Pero en appinventor no sé cómo hacerlo.

Google translate:
Thanks for your reply; But I think it’s not what I want.
I explain:
When a screen reader reads the screen that has images and cannot display them, instead of giving an error, I want an explanatory text to appear in the image. It would be something like what is used on a page web where you cannot see the content of an image and instead an explanatory text appears. I think you use the “alt image” instruction or something like that when writing the code. But in appinventor I don’t know how to do it.

4

I am not sure if there is anything for an “alt text” feature in native AI2.

What you could try is to display your images in a webviewer with html that gets the alt text from the webviewstring? (I have not tried this but could work…)

1 Like
5

Is this what you mean by screen reader?

6

Exactamente.

7

Just tested Android Accessibility Suite on a webview with an image with alt text and it read it out just fine.
(When image displayed and when not displayed)

8

Como hago para poner el texto alternativo en la imagen con appinventor

9

Save the html below to a file and upload it to your assets.
Set the webviewstring in the app as indicated below
Call the webviewer with the file:

file:///mnt/sdcard/AppInventor/assets/file.html (for Companion)
file:///mnt/sdcard/android_asset/file.html (for Compiled App)

HTML

<!DOCTYPE html>
<html>
<head>
	<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
	<title>Image Set and Read Test</title>
</head>

<body>
	<img id="myImage" src="" alt="" />
</body>

<script>

	// set webviewstring in AppInventor to "<imagefilename>,altText"
	// no commas in the altText !
	
	var img = window.AppInventor.getWebViewString();
	document.getElementById("myImage").src = img.split(",")[0];
	document.getElementById("myImage").alt = img.split(",")[1]; 
</script>

</html>
10

Entiendo que este procedimiento es programando codigo, pero app inventor no permite programar Código, y yo tampoco sé hacerlo.
¿Como lo haría con los bloques de app inventor.?

11

El codigo en la respuesta de @TIMAI2 es html. Es para que lo guardes en un archivo html y lo abras con el componente WebViewer.

Mi solución a lo que estás preguntando, sería agregarle un componente label debajo de cada componente image. En ese label pondría el texto explicativo de la foto. Si no deseas que el texto se vea, probá poniéndolo en color transparente o en el mismo color del fondo.
El lector de pantalla debería leerlo igual aunque no se vea por los colores del texto.

-----------English-----------
The code in @TIMAI2’s answer is html. You have to save it in an html file and open it with the WebViewer component.

My solution to your question would be to add a label component under every image component. In that label component I would include the alternative text for that image and set the text color to none or same color as the background. The screen reader should be able to read that even if it’s not visible due to the colors selected.

12

Lo probare, creo que puede funcionar

13

Just for information, the google screen reader doesn’t read text drawn on a canvas.