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

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 1: Línea 1:
== '''1.1.1-K. Imágenes decorativas ''' ==
{{CriterioWCAG
|id_wcag_criterio=1.1.1
|id_wcag_subcriterio=1.1.1-K
|wcag_titulo_criterio=1.1.1-K. Imágenes decorativas
|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-K -->
<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>
   –
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
   <span class="gravedad gravedad-moderada">Barrera moderada</span>
      <li><span class="label">Versión:</span><span class="value">2.0</span></li>
</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>


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


[[Categoría: Contenido]]
|wcag_texto_criterioOAW=
[[Categoría: Nivel-A]]
Las imágenes decorativas deben tener texto alternativo vacío (<code>alt=""</code>) o incluirse mediante CSS para ser ignoradas correctamente por los lectores de pantalla.
[[Categoría: Versión-2.0]]


|wcag_descripcion_resumida=
Las imágenes decorativas no deben ser anunciadas por el lector de pantalla. 
Para ello, se deben usar atributos <code>alt=""</code> o incluir las imágenes en CSS, evitando interferencias con la lectura del contenido real.


<html>
|wcag_objetivo=
<!--
Evitar distracciones o información innecesaria para personas que usan lectores de pantalla, garantizando una experiencia clara y eficiente.
Análisis: 1.1.1-K
- Discapacidad: Personas con baja visión
- Problema: Imágenes decorativas con texto alternativo o título innecesario pueden confundir o distraer, pero no bloquean acceso.
- Gravedad: Moderado
-->
</html>


|wcag_importancia=
Si una imagen decorativa se lee como contenido, el flujo narrativo se rompe, provocando confusión, pérdida de tiempo y barreras en la comprensión.


=== Descripción y comprensión del criterio ===
|wcag_referencias=
<div class="wcag-info-criterio">
<ul>
Las imágenes decorativas deben tener texto alternativo vacío o incluirse vía CSS, para que puedan ser ignoradas por lectores de pantalla.
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html Understanding Success Criterion 1.1.1]</span></li>
</div>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/html/H67 Technique H67 – Using null alt text for decorative images]</span></li>
==== Descripción resumida ====
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/css/C9 Technique C9 – Using CSS background images for decorative images]</span></li>
</ul>


<div class="wcag-info-criterio"> Las imágenes decorativas no deben ser leídas por los lectores de pantalla.
|wcag_recursos=
No hay


Para ello, usa <code>alt=""</code> o insértalas con CSS. </div>
|wcag_tipo_evaluacion=Manual


==== Objetivo ====
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Localizar imágenes que no aportan información.</li>
<li><span class="paso-badge">Paso 2.</span> Usar Web Developer Toolbar → Images → Display alt attributes.</li>
<li><span class="paso-badge">Paso 3.</span> Verificar que las imágenes decorativas tienen <code>alt=""</code> y sin atributo <code>title</code>.</li>
<li><span class="paso-badge">Paso 4.</span> Si están en CSS, comprobar que no transmiten información relevante.</li>
</ol>


<div class="wcag-info-criterio"> Reducir distracciones y ruido visual o auditivo innecesario. </div>
|wcag_resultado_evaluacion=
Las imágenes decorativas se ignoran correctamente por lectores de pantalla, sin generar ruido o confusión.


==== Importancia de cumplir el criterio ====
|wcag_ejemplo_evaluacion=
Ejemplo correcto:


<div class="wcag-info-criterio"> Si un lector de pantalla lee imágenes decorativas, se interrumpe la comprensión del contenido. </div>
<pre class="wcag-codigo-html">
<img src="separador.gif" alt="">
</pre>


==== Referencias WCAG ====
|wcag_otras_herramientas_evaluacion=
 
<strong>Bookmarklet para ver ALT:</strong><br>
<div class="wcag-info-criterio">  
<html>
* <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 class="highlight-box">
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/html/H67 Técnica H67 – Texto alternativo nulo para imágenes decorativas (en inglés)]</span>
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los textos alternativos de otras páginas. <br>
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/css/C9 Técnica C9 – Uso de CSS para imágenes decorativas (en inglés)]</span> </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 y leer las descripciones para comprobar que la información esté completa.
</div>
 
==== Procedimiento de evaluación ====
<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> Localizar las imágenes que se consideran decorativas.
 
<span class="paso-badge>Paso 2.</span>
Seleccionar '''Images – Display alt attributes'''. Verificar que su texto alternativo está vacio y que no disponen de atributo title.
 
<span class="paso-badge>Paso 3.</span> Para las imágenes que se incluyen mediante Hojas de Estilo (CSS) (y que por lo tanto no se resaltan con la opción '''Images – Outline all images'''), verificar que son puramente decorativas y no transmiten información importante
</div>


==== Ejemplo ====
<a class="bookmarklet-button"
<div class="wcag-info-criterio">
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);});})();">
Se muestra una imagen decorativa sin texto alternativo.
Ver ALT de imágenes
<div class="accessibility-card">
</a>
<pre class="wcag-codigo-html">
<img src="separador.gif" alt="">  
</pre>
</div>
</div>
</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 imágenes
    </a>
  </div>
</html>
</html>


'''Lector de pantalla'''
<strong>Lector de pantalla:</strong> JAWS, NVDA, VoiceOver — verificar que no se anuncian imágenes decorativas<br>
 
<strong>Inspector del navegador:</strong> comprobar atributo <code>alt=""</code> o uso de CSS
Uso de lectores de pantalla como JAWS, NVDA o VoiceOver, para comprobar que no se escucha las imágenes decorativas.
}}
 
'''Inspector del navegador'''
 
Puedes usar la herramienta de inspección del navegador para comprobar el texto alternativo de imágenes decorativas </code>.
 
</div>
 
{{#set: categoria=CriterioWCAG}}
{{#set: id_criterio=1.1.1-A}}
{{#set: tiene_criterio_WCAG=1.1.1-A}}
{{#set: titulo_criterio=1.1.1-K. Imágenes decorativas}}
{{#set: nivel=A}}
{{#set: version=2.0}}
{{#set: principio=1.Perceptible}}
{{#set: pauta=1.1.Texto alternativo}}
{{#set: grupo=contenido}}

Revisión del 11:31 4 nov 2025

1.1.1-K. Imágenes decorativas

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 decorativas deben tener texto alternativo vacío (alt="") o incluirse mediante CSS para ser ignoradas correctamente por los lectores de pantalla.

Comprensión del criterio

Descripción resumida

Las imágenes decorativas no deben ser anunciadas por el lector de pantalla. Para ello, se deben usar atributos alt="" o incluir las imágenes en CSS, evitando interferencias con la lectura del contenido real.

Objetivo

Evitar distracciones o información innecesaria para personas que usan lectores de pantalla, garantizando una experiencia clara y eficiente.

Importancia de cumplir el criterio

Si una imagen decorativa se lee como contenido, el flujo narrativo se rompe, provocando confusión, pérdida de tiempo y barreras en la comprensión.

Referencias WCAG

Recursos de apoyo

No hay

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Localizar imágenes que no aportan información.
  2. Paso 2. Usar Web Developer Toolbar → Images → Display alt attributes.
  3. Paso 3. Verificar que las imágenes decorativas tienen alt="" y sin atributo title.
  4. Paso 4. Si están en CSS, comprobar que no transmiten información relevante.

Resultado esperado

Las imágenes decorativas se ignoran correctamente por lectores de pantalla, sin generar ruido o confusión.

Ejemplo

Ejemplo correcto: 
<img src="separador.gif" alt="">

Otras herramientas de evaluación

Bookmarklet para ver 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

Lector de pantalla: JAWS, NVDA, VoiceOver — verificar que no se anuncian imágenes decorativas

Inspector del navegador: comprobar atributo alt="" o uso de CSS










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.1.1-K. Imágenes decorativas

Loading comments...




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