Diferencia entre revisiones de «Principio 1/1.1 Texto Alternativo/1.1.1-G»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 7 ediciones intermedias del mismo usuario)
Línea 20: Línea 20:


|wcag_lista_discapacidades=
|wcag_lista_discapacidades=
[[Categoría:Visual total]]
[[Categoría:Discapacidad visual total]]


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
Las imágenes que actúan como elementos funcionales —botones, enlaces o regiones activas— deben tener un texto alternativo que describa claramente su propósito funcional, no su apariencia visual.
Las imágenes con funcionalidad (enlaces, botones, áreas activas) deben incluir un texto alternativo que describa claramente su propósito.
 


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Línea 30: Línea 31:


Esto aplica a:
Esto aplica a:
- Botones con imágenes
* Botones con imágenes
- Íconos clicables
* Íconos clicables
- Enlaces basados en imágenes
* Enlaces basados en imágenes
- Mapas de imagen con áreas activas
* Mapas de imagen con áreas activas


|wcag_objetivo=
|wcag_objetivo=
Línea 52: Línea 53:
</ul>
</ul>


|wcag_tipo_evaluacion=Manual
|wcag_tipo_evaluacion=Semiautomática


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Localizar imágenes utilizadas como controles (botones, enlaces, mapas de imagen).</li>
<li><span class="paso-badge">Paso 1.</span>  
<li><span class="paso-badge">Paso 2.</span> Usar Web Developer Toolbar → Display alt attributes.</li>
Seleccionar '''Images – Display alt attributes'''.</li>
<li><span class="paso-badge">Paso 3.</span> Comprobar que el texto describe la función, no la apariencia.</li>
<li><span class="paso-badge">Paso 2.</span> Localizar las imágenes que actúan como enlaces.</li>
<li><span class="paso-badge">Paso 3.</span>
Usando la herramienta de inspección de código del navegador, comrprobar cómo se implementa dicho enlace, según los siguientes casos:
<ul>
<li>
Si la imagen es el único elemento del enlace, verificar que su texto alternativo identifica su función o destino
</li>
<li>
Si el enlace contiene texto además de imágenes, verificar que el destino queda descrito en-tre el texto del enlace y el texto alternativo de las imágenes, sin redundancias innecesarias. Si las imágenes no aportan información adicional al texto de los enlaces entonces deberán considerarse como decorativas y tener un texto alternativo vacío.
</li>
<ul>
</li>
</ol>
</ol>


Línea 66: Línea 79:


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Ejemplo de texto alternativo funcional correcto:
<div class="accessibility-card">
 
Ejemplo de texto alternativo que explica la función que realiza cada imagen: buscar un término y la otra, enviar el formulario.


<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
Línea 72: Línea 87:
<input type="image" src="enviar.png" alt="Enviar formulario">
<input type="image" src="enviar.png" alt="Enviar formulario">
</pre>
</pre>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
 
<ul>
<strong>Bookmarklet diagnóstico ALT:</strong><br>
<li>
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas.
<strong>Bookmarklet diagnóstico ALT:</strong><br/>
<html>
<div class="highlight-box">
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas. <br>
<html>
<html>
<a class="bookmarklet-button"
<a class="bookmarklet-button"
Línea 82: Línea 101:
Ver ALT de imágenes funcionales
Ver ALT de imágenes funcionales
</a>
</a>
</div>
</html>
</html>
 
</li>
<li>
<strong>Lectores de pantalla:</strong> NVDA, JAWS, VoiceOver   
<strong>Lectores de pantalla:</strong> NVDA, JAWS, VoiceOver   
Verificar que la acción del control se comunica correctamente.
Verificar que la acción del control se comunica correctamente.
 
</li>
<li>
<strong>Inspector del navegador:</strong>   
<strong>Inspector del navegador:</strong>   
Confirmar atributo <code>alt</code> informativo en imágenes usadas como controles.
Confirmar atributo <code>alt</code> informativo en imágenes usadas como controles.
 
</li>
</ul>
}}
}}

Revisión actual - 17:53 4 nov 2025

1.1.1-G. Texto alternativo en imágenes funcionales

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • Las imágenes con funcionalidad (enlaces, botones, áreas activas) deben incluir un texto alternativo que describa claramente su propósito.

Comprensión del criterio

Descripción resumida

Las imágenes usadas como controles interactivos deben tener texto alternativo que explique la acción que realizan.

En lugar de describir cómo se ve la imagen (alt="lupa"), se debe describir su acción (alt="Buscar").

Esto aplica a:

  • Botones con imágenes
  • Íconos clicables
  • Enlaces basados en imágenes
  • Mapas de imagen con áreas activas

Objetivo

Garantizar que los usuarios ciegos o con baja visión puedan entender y usar controles visuales basados en imágenes, interpretando correctamente la acción que realizan.

Importancia de cumplir el criterio

Sin texto alternativo funcional, una persona que usa lector de pantalla no puede saber qué hace un botón basado en una imagen, impidiendo la interacción e incomunicando funcionalidad clave.

Referencias WCAG

Recursos de apoyo

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

Usa la herramienta de Web Developer Toolbar.
  1. Paso 1. Seleccionar Images – Display alt attributes.
  2. Paso 2. Localizar las imágenes que actúan como enlaces.
  3. Paso 3. Usando la herramienta de inspección de código del navegador, comrprobar cómo se implementa dicho enlace, según los siguientes casos:
    • Si la imagen es el único elemento del enlace, verificar que su texto alternativo identifica su función o destino
    • Si el enlace contiene texto además de imágenes, verificar que el destino queda descrito en-tre el texto del enlace y el texto alternativo de las imágenes, sin redundancias innecesarias. Si las imágenes no aportan información adicional al texto de los enlaces entonces deberán considerarse como decorativas y tener un texto alternativo vacío.

Resultado esperado

Las imágenes funcionales incluyen un texto alternativo que comunica claramente la acción que realizan, p. ej: alt="Buscar" en lugar de alt="Lupa".

Ejemplo

Ejemplo de texto alternativo que explica la función que realiza cada imagen: buscar un término y la otra, enviar el formulario. 

<input type="image" src="iconobuscar.png" alt="Buscar">
<input type="image" src="enviar.png" alt="Enviar formulario">

Otras herramientas de evaluación

  • Bookmarklet diagnóstico ALT:
    Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas.
    Ver ALT de imágenes funcionales
  • Lectores de pantalla: NVDA, JAWS, VoiceOver Verificar que la acción del control se comunica correctamente.
  • Inspector del navegador: Confirmar atributo alt informativo en imágenes usadas como controles.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.1.1-G. Texto alternativo en imágenes funcionales

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.1_Texto_Alternativo/1.1.1-G&oldid=3300»