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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 53 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''1.1.1-K. Imágenes decorativas ''' ==
{{CriterioWCAG
<html>
|id_wcag_criterio=1.1.1
<!-- criterio 1.1.1-K -->
|id_wcag_subcriterio=1.1.1-K
<article class="wcag-card">
|wcag_titulo_criterio=1.1.1-K. Imágenes decorativas
  <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>
|wcag_discapacidades=
  <section class="wcag-users">
<li class="discapacidad-item">
    <p>Usuarios más afectados</p>
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
    <ul>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span>
      <li><img src="/images/b/b7/Bajavision.png" alt="Icono de una persona con baja visión" />
  –
      <span>Personas con baja visión - <span class="gravedad"> Barera moderada</span></span></li>
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
        <li>
</li>
          <img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" />
 
          Personas con discapacidad cognitiva – <span class="gravedad">Barrera leve</span>
|wcag_lista_discapacidades=
        </li>
[[Categoría:Discapacidad visual total]]
    </ul>
 
  </section>
</article>


<!--
|wcag_texto_criterioOAW=
Análisis: 1.1.1-K
Las imágenes decorativas deben tener texto alternativo vacío o incluirse vía CSS, para que puedan ser ignoradas por lectores de pantalla.
- 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_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.


=== Descripción y comprensión del criterio ===
|wcag_objetivo=
Evitar distracciones o información innecesaria para personas que usan lectores de pantalla, garantizando una experiencia clara y eficiente.


==== Descripción resumida ====
|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.


<div class="wcag-info-criterio"> Las imágenes decorativas no deben ser leídas por los lectores de pantalla. Para ello, usa <code>alt=""</code> o insértalas con CSS. </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/html/H67 Technique H67 – Using null alt text for decorative images]</span></li>
<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>


==== Objetivo ====
|wcag_recursos=
No hay


<div class="wcag-info-criterio"> Reducir distracciones y ruido visual o auditivo innecesario. </div>
|wcag_tipo_evaluacion=Semiautomática


==== Importancia de cumplir el criterio ====
|wcag_pasos_evaluacion=
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''


<div class="wcag-info-criterio"> Si un lector de pantalla lee imágenes decorativas, se interrumpe la comprensión del contenido. </div>
<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> Seleccionar '''Images – Display alt attributes'''.</li>
<li><span class="paso-badge">Paso 3.</span> Localizar las imágenes que se consideran decorativas.</li>
<li><span class="paso-badge">Paso 4.</span> Verificar que su texto alternativo está vacío y que no disponen de título.</li>
</ol>


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


<div class="wcag-info-criterio"> * <span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/html/H67 Técnica H67 – Texto alternativo nulo para imágenes decorativas]</span> * <span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/css/C9 Técnica C9 – Uso de CSS para imágenes decorativas]</span> </div>
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
Se observa que la imagen de separación, no muestra ningún texto alternativo.
<pre class="wcag-codigo-html">
<img src="separador.png" alt="">
</pre>
</div>


==== Ejemplo ====
|wcag_otras_herramientas_evaluacion=
<ul>
<li>
<strong>Bookmarklet para ver 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>


<div class="wcag-info-criterio"> <pre class="wcag-codigo-html"> <img src="separador.gif" alt=""> </pre> </div>
<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);});})();">
Ver ALT de imágenes
</a>
</div>
</html>
</li>
<li>
<strong>Lector de pantalla:</strong> JAWS, NVDA, VoiceOver — verificar que no se anuncian imágenes decorativas<br>
</li>
<li>
<strong>Inspector del navegador:</strong> comprobar atributo <code>alt=""</code> o uso de CSS
</li>
</ul>
}}

Revisión actual - 17:55 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 o incluirse vía CSS, para que puedan ser ignoradas por 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 Semiautomática

Procedimiento de evaluación

Usa la herramienta de Web Developer Toolbar.
  1. Paso 1. Localizar imágenes que no aportan información.
  2. Paso 2. Seleccionar Images – Display alt attributes.
  3. Paso 3. Localizar las imágenes que se consideran decorativas.
  4. Paso 4. Verificar que su texto alternativo está vacío y que no disponen de título.

Resultado esperado

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

Ejemplo

Se observa que la imagen de separación, no muestra ningún texto alternativo. 

<img src="separador.png" 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=3304»