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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
 
(No se muestran 22 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''1.1.1-D. Alternativa única para grupos de imágenes.''' ==
{{CriterioWCAG
<html>
|id_wcag_criterio=1.1.1
<!-- criterio 1.1.1-D -->
|id_wcag_subcriterio=1.1.1-D
<article class="wcag-card">
|wcag_titulo_criterio=1.1.1-D. Alternativa única para grupos de imágenes
  <section class="wcag-info">
|wcag_nivel=A
    <ul>
|wcag_version=2.0
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
|wcag_principio=1_Perceptible
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
|wcag_principio_url=Principio_1
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
|wcag_pauta=1.1_Textos_alternativos
      <li><span class="label">Pauta:</span><span class="value">1.1 Textos alternativos</span></li>
|wcag_pauta_url=Principio_1/1.1_Texto_Alternativo
      <li><span class="label">Categoría:</span><span class="value">Contenido</span></li>
|wcag_grupo=Contenido
      <li><span class="label">Subcategoría:</span><span class="value">No-texto</span></li>
|wcag_subgrupo=No-texto
    </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>


<!--
|wcag_discapacidades=
Análisis: 1.1.1-D
<li class="discapacidad-item">
- Discapacidad: Personas con discapacidad visual total
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
- Problema: Las alternativas textuales deben cubrir todo un grupo de imágenes que transmiten un mismo mensaje; si no, la información se pierde.
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
- Gravedad: Grave
  <span class="gravedad gravedad-grave">Barrera grave</span>
-->
</li>
</html>


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


=== Descripción y comprensión del criterio ===
|wcag_texto_criterioOAW=
Cuando varias imágenes transmiten una única información, se proporciona la alternativa textual solo en una, y las demás quedan decorativas.


==== Descripción resumida ====
|wcag_descripcion_resumida=
Si un grupo de imágenes representa un único concepto o información (como una fila de estrellas para indicar una puntuación), el texto alternativo debe proporcionarse solo en una imagen. 


<div class="wcag-info-criterio"> Cuando hay un grupo de imágenes que juntas expresan una misma idea (como varias estrellas para indicar una puntuación), solo una de ellas debe tener una descripción de texto.


Las demás se marcan como decorativas, para que los lectores de pantalla las ignoren.  
El resto de imágenes del grupo deben ser decorativas con (alt=""), para evitar repeticiones innecesarias para los lectores de pantalla.


De esta forma, la persona que escucha la web solo oye la información importante una vez, sin repeticiones molestas.  
|wcag_objetivo=
</div>
Evitar repetir la misma información varias veces a los usuarios de tecnologías de apoyo, garantizando una experiencia clara, fluida y sin redundancias.


==== Objetivo ====
Una sola descripción cubre el significado completo del grupo visual.


<div class="wcag-info-criterio"> El objetivo de este criterio es '''evitar repetir la misma información varias veces'''.  
|wcag_importancia=
Si cada imagen del grupo tuviera un texto alternativo completo, los lectores de pantalla repetirían la misma información varias veces, generando confusión y fatiga cognitiva.


Si todas las imágenes de un grupo tuvieran texto alternativo, un lector de pantalla leería la misma frase una y otra vez.  
Este criterio asegura que la información se transmita una sola vez, de forma clara y eficiente.


Al indicar que solo una imagen tiene texto y las demás son decorativas, la información se entiende mejor y la navegación es más clara y agradable.
|wcag_referencias=
</div>
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html Understanding Success Criterion 1.1.1: Non-text Content]</span></li>
</ul>


==== Importancia de cumplir el criterio ====
|wcag_recursos=
<ul>
<li>Tutorial sobre imágenes en grupo: 
[https://www.w3.org/WAI/tutorials/images/groups/ W3C Tutorials – Groups of images]</li>
</ul>


<div class="wcag-info-criterio"> Cumplir este criterio es importante para que la experiencia de las personas que usan lectores de pantalla sea '''fluida, clara y sin repeticiones innecesarias'''.
|wcag_tipo_evaluacion=Semiautomática


Imagina que estás escuchando una página web con un lector de pantalla.
|wcag_pasos_evaluacion=
Si hay cinco estrellas para mostrar una valoración y todas dicen “estrella de calificación”, escucharías esa frase cinco veces seguidas.
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
Sería confuso y cansado.


Si, en cambio, solo una imagen tiene la descripción “Calificación: 4 de 5 estrellas”, la información se transmite completa y sencilla, sin repeticiones.
<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 un grupo</li>
<li><span class="paso-badge">Paso 3.</span> Verificar que se proporciona un texto alternativo adecuado en una de las imágenes y que el resto tienen un texto alternativo vacío (alt="").</li>
</ol>


</div>
|wcag_resultado_evaluacion=
El grupo de imágenes se anuncia '''una sola vez''' con su significado completo, evitando repeticiones. 
Las imágenes auxiliares están correctamente marcadas como decorativas.


==== Referencias WCAG  ====
|wcag_ejemplo_evaluacion=
 
<div class="accessibility-card">  
<div class="wcag-info-criterio">
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html| Comprender el criterio 1.1.1 (en inglés)]</span>
 
</div>
 
==== Recursos de apoyo ====
 
<div class="wcag-info-criterio">
 
Puedes consultar el tutorial de W3C que explica como incluir texto alternativo en imágenes de grupo.
 
[https://www.w3.org/WAI/tutorials/images/groups/ Grupos de imagenes, tutorial de W3C]


Representación accesible de una puntuación con estrellas:


<pre class="wcag-codigo-html">
<!-- Solo la primera imagen describe el grupo -->
<img src="estrella_rellena.png" alt="Puntuación: 4 de 5 estrellas">
<img src="estrella_rellena.png" alt="">
<img src="estrella_rellena.png" alt="">
<img src="estrella_rellena.png" alt="">
<img src="estrella_vacia.png" alt="">
</pre>
</div>
</div>


=== Evaluación del criterio ===
|wcag_otras_herramientas_evaluacion=
 
<ul>
==== Tipo de comprobación ====
<li>
<span class="wcag-info-criterio">
<strong>Bookmarklet diagnóstico ALT:</strong><br/>
Comprobación '''manual'''
<html>
 
<div class="highlight-box">
Es necesario revisar visualmente las imágenes y leer las descripciones para comprobar que la información esté completa.
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas. <br>
</span>
<a class="bookmarklet-button"
 
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);});})();">
==== Procedimiento de evaluación ====
Ver ALT de imágenes
 
</a>
<div class="wcag-info-criterio">
 
<span class="paso-badge>Paso 1.</span>
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
 
<span class="paso-badge">Paso 2.</span>
Selecciona la opción Images – Display alt attributes para mostrar los textos alternativos de todas las imágenes.
 
<span class="paso-badge">Paso 3.</span>
Busca grupos de imágenes que, visualmente, representen una sola idea (como una fila de estrellas o un conjunto de iconos similares).
 
<span class="paso-badge">Paso 4.</span>
Comprueba que solo una imagen tenga una descripción con sentido, y que las demás tengan el atributo <code>alt=""</code> (vacío), para que el lector de pantalla las ignore.
 
</div>
</div>
==== Ejemplo ====
<div class="wcag-info-criterio">
Ejemplo correcto de uso del texto alternativo en un grupo de estrellas para mostrar una puntuación de 4 sobre 5:
<pre class="wcag-codigo-html">
&lt;!-- Solo la primera imagen describe todo el grupo -->
&lt;img src="estrella_rellena.png" alt="Puntuación: 4 de 5 estrellas">
&lt;img src="estrella_rellena.png" alt="">
&lt;img src="estrella_rellena.png" alt="">
&lt;img src="estrella_rellena.png" alt="">
&lt;img src="estrella_vacia.png" alt="">
</pre> </div>
==== Otras herramientas de evaluación ====
<div class="wcag-info-criterio">
'''Herramienta de inspección con un Bookmarklet'''
Al mostrar la información con el bookmarklet, comprobar que el texto de cada imagen corresponde a la imagen.
<html>
<div class="highlight-box">
    <strong>Arrastra este botón a tu barra de marcadores:</strong>
    <a class="bookmarklet-button"
      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);    }); })();">
      Haz clic para ver los textos alternativos de las imagenes
    </a>
  </div>
</html>
</html>
</li>


'''Lector de pantalla'''
<li>
 
<strong>Lectores de pantalla:</strong> JAWS, NVDA, VoiceOver
Uso de lectores de pantalla como JAWS, NVDA o VoiceOver, para comprobar que la información se escucha una sola vez y de forma comprensible.
Validar que solo se anuncia la calificación una vez.
</li>
</ul>


</div>
}}

Revisión actual - 17:50 4 nov 2025

1.1.1-D. Alternativa única para grupos de imágenes

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)

  • Cuando varias imágenes transmiten una única información, se proporciona la alternativa textual solo en una, y las demás quedan decorativas.

Comprensión del criterio

Descripción resumida

Si un grupo de imágenes representa un único concepto o información (como una fila de estrellas para indicar una puntuación), el texto alternativo debe proporcionarse solo en una imagen.


El resto de imágenes del grupo deben ser decorativas con (alt=""), para evitar repeticiones innecesarias para los lectores de pantalla.

Objetivo

Evitar repetir la misma información varias veces a los usuarios de tecnologías de apoyo, garantizando una experiencia clara, fluida y sin redundancias. Una sola descripción cubre el significado completo del grupo visual.

Importancia de cumplir el criterio

Si cada imagen del grupo tuviera un texto alternativo completo, los lectores de pantalla repetirían la misma información varias veces, generando confusión y fatiga cognitiva. Este criterio asegura que la información se transmita una sola vez, de forma clara y eficiente.

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 un grupo
  3. Paso 3. Verificar que se proporciona un texto alternativo adecuado en una de las imágenes y que el resto tienen un texto alternativo vacío (alt="").

Resultado esperado

El grupo de imágenes se anuncia una sola vez con su significado completo, evitando repeticiones. Las imágenes auxiliares están correctamente marcadas como decorativas.

Ejemplo

Representación accesible de una puntuación con estrellas: 

<!-- Solo la primera imagen describe el grupo -->
<img src="estrella_rellena.png" alt="Puntuación: 4 de 5 estrellas">
<img src="estrella_rellena.png" alt="">
<img src="estrella_rellena.png" alt="">
<img src="estrella_rellena.png" alt="">
<img src="estrella_vacia.png" alt="">

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
  • Lectores de pantalla: JAWS, NVDA, VoiceOver Validar que solo se anuncia la calificación una vez.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.1.1-D. Alternativa única para grupos de imágenes

Loading comments...




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