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
Línea 98: Línea 98:
</div>
</div>
</div>
</div>
<html>
<h5>Ejemplo demostrativo en HTML</h5>
<p>En el siguiente codigo puedes ver un ejemplo práctico de xxxx.</p>
<iframe height="300" style="width: 100%;" aria-label="Codigo de ejemplo de CodePEN" scrolling="no" title="Formulario Imput No Resize" src="https://codepen.io/afrikiudl/embed/JjgzVdz?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true">
      See the Pen <a href="https://codepen.io/afrikiudl/pen/JjgzVdz">
  Formulario Imput No Resize</a> by afrikiudl (<a href="https://codepen.io/afrikiudl">@afrikiudl</a>)
  on <a href="https://codepen.io">CodePen</a>.
      </iframe>
</html>
<html>
<section aria-labelledby="demo-formulario">
  <h5 id="demo-formulario">Ejemplo interactivo: Formulario con campo no redimensionable</h5>
  <p>
    En el siguiente ejemplo incrustado desde CodePen se muestra un formulario con un campo de texto cuya
    propiedad <code>resize</code> está deshabilitada mediante CSS.
    Puedes explorarlo, pero si prefieres abrirlo en una pestaña nueva, usa el enlace siguiente.
  </p>
  <iframe
    height="300"
    style="width: 100%; border: 1px solid #ccc; border-radius: 8px;"
    src="https://codepen.io/afrikiudl/embed/JjgzVdz?default-tab=html%2Cresult"
    title="Ejemplo interactivo en CodePen: formulario con campo no redimensionable"
    frameborder="0"
    loading="lazy"
    allowtransparency="true"
    aria-label="Demostración interactiva del formulario no redimensionable">
    <p>
      Tu navegador no puede mostrar el contenido embebido. Puedes ver el ejemplo directamente en
      <a href="https://codepen.io/afrikiudl/pen/JjgzVdz">CodePen</a>.
    </p>
  </iframe>
  <p>
    <a href="https://codepen.io/afrikiudl/pen/JjgzVdz" target="_blank" rel="noopener">
      Abrir este ejemplo directamente en CodePen
    </a>
  </p>
</section>
</html>


==== Otras herramientas de evaluación ====
==== Otras herramientas de evaluación ====

Revisión del 11:04 31 oct 2025

1.1.1-K. Imágenes decorativas

  • Nivel:A
  • Versión:2.0
  • Principio:1. Perceptible
  • Pauta:1.1 Textos alternativos
  • Categoría:Contenido
  • Subcategoría:No-texto

Usuarios más afectados

  • Icono de una persona con discapacidad visual Personas con discapacidad visual total - Barrera grave



Descripción y comprensión del criterio

Las imágenes decorativas deben tener texto alternativo vacío o incluirse vía CSS, para que puedan ser ignoradas por lectores de pantalla.

Descripción resumida

Las imágenes decorativas no deben ser leídas por los lectores de pantalla. Para ello, usa alt="" o insértalas con CSS.

Objetivo

Reducir distracciones y ruido visual o auditivo innecesario.

Importancia de cumplir el criterio

Si un lector de pantalla lee imágenes decorativas, se interrumpe la comprensión del contenido.

Referencias WCAG

Evaluación del criterio

Tipo de comprobación

Comprobación Manual

Es necesario revisar visualmente las imágenes y leer las descripciones para comprobar que la información esté completa.

Procedimiento de evaluación

Paso 1. Usa la herramienta de Web Developer Toolbar.

Paso 2. Localizar las imágenes que se consideran decorativas.

Paso 2. Seleccionar Images – Display alt attributes. Verificar que su texto alternativo está vacio y que no disponen de atributo title.

Paso 3. 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


Ejemplo

Se muestra una imagen decorativa sin texto alternativo. 

 
<img src="separador.gif" alt="">

Otras herramientas de evaluación

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.

Arrastra este botón a tu barra de marcadores: Haz clic para ver los textos alternativos de las imágenes

Lector de pantalla

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 .

1.1.1-A

A 2.0 Perceptible 1.1 Texto alternativo conteido https://www.w3.org/WAI/WCAG22/Understanding/orientation.html

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