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
 
(No se muestran 13 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''1.1.1- G. Texto alternativo en imágenes funcionales''' ==
{{CriterioWCAG
|id_wcag_criterio=1.1.1
|id_wcag_subcriterio=1.1.1-G
|wcag_titulo_criterio=1.1.1-G. Texto alternativo en imágenes funcionales
|wcag_nivel=A
|wcag_version=2.0
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_pauta=1.1_Textos_alternativos
|wcag_pauta_url=Principio_1/1.1_Texto_Alternativo
|wcag_grupo=Contenido
|wcag_subgrupo=No-texto


<html>
|wcag_discapacidades=
<!-- criterio 1.1.1-G -->
<li class="discapacidad-item">
<article class="wcag-card">
   [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
   <section class="wcag-info">
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
    <ul>
   <span class="gravedad gravedad-grave">Barrera grave</span>
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
</li>
      <li><span class="label">Versión:</span><span class="value">2.0</span></li>
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
      <li><span class="label">Pauta:</span><span class="value">1.1 Textos alternativos</span></li>
      <li><span class="label">Categoría:</span><span class="value">Contenido</span></li>
      <li><span class="label">Subcategoría:</span><span class="value">No-texto</span></li>
    </ul>
  </section>
   <section class="wcag-users">
    <p>Usuarios más afectados</p>
    <ul>
      <li><img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" />
      <span>Personas con discapacidad visual total - <span class="gravedad">Barrera grave</span></span></li>
    </ul>
  </section>
</article>


</html>
|wcag_lista_discapacidades=
[[Categoría: Visual total]]
[[Categoría:Discapacidad visual total]]


[[Categoría: Contenido]]
|wcag_texto_criterioOAW=
[[Categoría: Nivel-A]]
[[Categoría: Versión-2.0]]
 
 
<html>
<!--
Análisis: 1.1.1-G
- Discapacidad: Personas con discapacidad visual total
- Problema: Imágenes con funcionalidad (enlaces, botones, mapas de imagen) sin texto alternativo impiden interactuar con el contenido.
- Gravedad: Grave
-->
</html>
 
 
=== Descripción y comprensión del criterio ===
Las imágenes con funcionalidad (enlaces, botones, áreas activas) deben incluir un texto alternativo que describa claramente su propósito.
Las imágenes con funcionalidad (enlaces, botones, áreas activas) deben incluir un texto alternativo que describa claramente su propósito.
==== Descripción resumida ====


<div class="wcag-info-criterio">
Las imágenes que son botones, enlaces o acciones deben tener un <code>alt</code> que explique su función, no su forma.


Por ejemplo: <code>alt="Buscar"</code>, no <code>alt="Lupa"</code>.
|wcag_descripcion_resumida=
</div>
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 (<code>alt="lupa"</code>), se debe describir su acción (<code>alt="Buscar"</code>).


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


<div class="wcag-info-criterio"> Ayudar a los usuarios que no pueden ver los iconos a entender su propósito. </div>
|wcag_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 ====
|wcag_importancia=
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.


<div class="wcag-info-criterio"> Un botón con una imagen sin descripción funcional impide al usuario saber qué acción realiza. </div>
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html Understanding Success Criterion 1.1.1]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G82 Technique G82 – Providing a text alternative that identifies the purpose of the non-text content]</span></li>
</ul>


==== Referencias WCAG ====
|wcag_recursos=
 
<ul>
<div class="wcag-info-criterio">
<li>[https://www.w3.org/WAI/tutorials/images/functional/ Tutorial W3C sobre imágenes funcionales]</li>
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html| Comprender el criterio 1.1.1 (en inglés)]</span>
</ul>
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G82 Técnica G82 – Identificar propósito del contenido no textual (en inglés)]</span> </div>
 
==== Recursos de apoyo ====
 
<div class="wcag-info-criterio"> * [https://www.w3.org/WAI/tutorials/images/functional/ Tutorial de W3C sobre imágenes funcionales (en inglés)] </div>
 
=== Evaluación del criterio ===
==== Tipo de comprobación ====
 
<div class="wcag-info-criterio">
Comprobación <strong>Manual</strong>
 
Es necesario revisar visualmente las imágenes funcionales (que realizan alguna función al interactuar con ellas y observar si su descripción contiene la acción que realizan.
 
</div>


==== Procedimiento de evaluación ====
|wcag_tipo_evaluacion=Semiautomática


<div class="wcag-info-criterio">
|wcag_pasos_evaluacion=
<span class="paso-badge>Paso 1.</span>
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Seleccionar '''Images – Display alt attributes'''.</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>


<span class="paso-badge>Paso 2.</span> Localiza imágenes dentro de enlaces o botones.  
|wcag_resultado_evaluacion=
Las imágenes funcionales incluyen un texto alternativo que comunica claramente la acción que realizan, p. ej: 
<code>alt="Buscar"</code> en lugar de <code>alt="Lupa"</code>.


<span class="paso-badge>Paso 3.</span> Comprueba que el <code>alt</code> indica su función, no su aspecto.
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">  


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


==== Ejemplo ====
<pre class="wcag-codigo-html">
Se presenta un botón buscar y su texto alternativo es la acción que realiza el botón.
<div class="wcag-info-criterio">
<div class="accessibility-card">
 
<pre class="wcag-codigo-html">  
<input type="image" src="iconobuscar.png" alt="Buscar">
<input type="image" src="iconobuscar.png" alt="Buscar">
<input type="image" src="enviar.png" alt="Enviar formulario">  
<input type="image" src="enviar.png" alt="Enviar formulario">
</pre>
</pre>
</div>
</div>
</div>


==== Otras herramientas de evaluación ====
|wcag_otras_herramientas_evaluacion=
<div class="wcag-info-criterio">
<ul>
'''Herramienta de inspección con un Bookmarklet'''
<li>
 
<strong>Bookmarklet diagnóstico ALT:</strong><br/>
Al mostrar la información con el bookmarklet, comprobar que el texto de cada imagen corresponde a la imagen.
<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>
<div class="highlight-box">
<a class="bookmarklet-button"
    <strong>Arrastra este botón a tu barra de marcadores:</strong>
href="javascript:(function(){document.querySelectorAll('img').forEach(img=>{let altText=img.getAttribute('alt');if(altText){img.style.border='2px solid blue';}else{img.style.border='2px solid red';altText='Sin texto alternativo';}let label=document.createElement('div');label.textContent='[ALT: '+altText+']';label.style.position='absolute';label.style.background='yellow';label.style.padding='5px';label.style.fontSize='12px';let rect=img.getBoundingClientRect();label.style.top=(window.scrollY+rect.top-20)+'px';label.style.left=(window.scrollX+rect.left)+'px';document.body.appendChild(label);});})();">
 
Ver ALT de imágenes funcionales
    <a class="bookmarklet-button"
</a>
      href="javascript:(function() {     document.querySelectorAll('img').forEach(img => {         let altText = img.getAttribute('alt');                 if (altText) {             img.style.border = '2px solid blue';         } else {             img.style.border = '2px solid red';             altText = 'Sin texto alternativo';         }         let label = document.createElement('div');         label.textContent = `[ALT: ${altText}]`;         label.style.position = 'absolute';         label.style.background = 'yellow';         label.style.color = 'black';        label.style.padding = '5px';         label.style.border = '1px solid black';        label.style.fontSize = '12px';         label.style.zIndex = '1000';        label.style.whiteSpace = 'nowrap';          let rect = img.getBoundingClientRect();         label.style.top = `${window.scrollY + rect.top - 20}px`;         label.style.left = `${window.scrollX + rect.left}px`;         document.body.appendChild(label);     }); })();">
</div>
      Haz clic para ver los textos alternativos de las imágenes
    </a>
  </div>
</html>
</html>
 
</li>
'''Lector de pantalla'''
<li>
 
<strong>Lectores de pantalla:</strong> NVDA, JAWS, VoiceOver
Uso de lectores de pantalla como JAWS, NVDA o VoiceOver, para comprobar que la información que se escucha al acceder a una imagen funcional, es comprensible.
Verificar que la acción del control se comunica correctamente.
 
</li>
 
<li>
'''Inspector del navegador'''
<strong>Inspector del navegador:</strong> 
 
Confirmar atributo <code>alt</code> informativo en imágenes usadas como controles.
Puedes usar la herramienta de inspección del navegador para comprobar el texto alternativo de una imagen funcional </code>.  
</li>
 
</ul>
</div>
}}

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»