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

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 110: Línea 110:


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
 
<ul
<li>
<strong>Bookmarklet diagnóstico ALT:</strong><br>
<strong>Bookmarklet diagnóstico ALT:</strong><br>


Línea 123: Línea 124:
</div>
</div>
</html>
</html>
 
</li>
 
<li>
<strong>Lectores recomendados:</strong> JAWS, NVDA, VoiceOver.
<strong>Lectores recomendados:</strong> JAWS, NVDA, VoiceOver.
 
</li>
</ul>
}}
}}

Revisión del 17:34 4 nov 2025

1.1.1-A. Alternativa textual breve obligatoria

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)

  • Todo contenido no textual debe disponer de una alternativa breve que proporcione la misma información o cumpla el mismo propósito que el contenido no textual.

Comprensión del criterio

Descripción resumida

Todas las imágenes, iconos o gráficos deben tener un texto que explique qué muestran o para qué sirven.
  • Imágenes informativas: texto alternativo descriptivo con `alt`.
  • Imágenes decorativas: `alt=""` o presentadas con CSS.
  • Botones e iconos funcionales: nombre accesible claro.
  • Diagramas/mapas: descripción larga disponible junto al contenido.

Objetivo

Permitir que los lectores de pantalla y otras ayudas técnicas transmitan la misma información que se presenta visualmente, asegurando acceso equitativo.

Importancia de cumplir el criterio

Sin alternativas textuales, las personas ciegas o con baja visión no pueden entender la información visual. Este problema genera barreras graves y deja inaccesibles funciones críticas o contenido informativo.

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 – Outline images without alt attributes y comprobar la página. Si hay alguna imagen resaltada, es un error y debe proporcionársele un atributo alt.
  2. Paso 2. Seleccionar Images – Display alt attributes. Verificar que el texto alternativo se ajusta a la imagen. (Consulta la sección de Recursos de apoyo)
  3. Otra opción es usar lector de pantalla y confirmar que la descripción tiene sentido en contexto.

Resultado esperado

Cada imagen tiene el atributo alt correcto y refleja fielmente la información visual, o se marca como decorativa si aplica.

Ejemplo ilustrativo

Ejemplo accesible y no accesible comparado mediante código HTML. 
<img src="imagen.jpg" alt="Paisaje de montaña al amanecer">

<img src="imagen.jpg">


Otras herramientas de evaluación

<ul
  • 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 recomendados: JAWS, NVDA, VoiceOver.










    • Ejemplos accesibles y no accesibles creados por alumnos

    <!DOCTYPE html> Formulario de Reserva - NO Accesible 3.3.2-C

    ⚠️ PROBLEMA 3.3.2-C: Este formulario NO tiene etiquetas ni instrucciones claras

    Reserva de Hotel

    ⚠️ Problemas de este formulario:
    • No hay etiquetas <label> para ningún campo
    • Algunos placeholders son ambiguos ("Código" - ¿qué código?)
    • No se indica qué campos son obligatorios
    • No hay instrucciones sobre el formato esperado
    • El select dice "Selecciona" pero ¿seleccionar qué?
    • Un campo no tiene ni placeholder ni etiqueta (campo de email)
    • No hay indicación de formato de fecha específico
    • No se explica para qué sirve cada campo

    <!DOCTYPE html> Formulario de Reserva - ACCESIBLE 3.3.2-C

    ✅ ACCESIBLE 3.3.2-C: Este formulario tiene etiquetas e instrucciones claras

    Reserva de Hotel

    Complete el siguiente formulario para reservar su estadía

    Nota: Los campos marcados con * son obligatorios

    Ingrese su nombre tal como aparece en su documento de identidad

    Enviaremos la confirmación de reserva a este correo

    Incluya el código de país (Ej: +34 para España)

    ¿Cuántas personas se alojarán?

    Formato: DD/MM/AAAA (Ej: 15/02/2025)

    Formato: DD/MM/AAAA (Ej: 20/02/2025)

    Seleccione el tipo de habitación que prefiere

    Si tiene un código promocional, ingréselo aquí

    Indique cualquier necesidad especial o preferencia (cama extra, piso bajo, accesibilidad, etc.)

    ✅ Implementación correcta:
    • Cada campo tiene una etiqueta <label> clara asociada
    • Los campos obligatorios están claramente marcados con *
    • Hay instrucciones específicas sobre formato y contenido esperado
    • Los selectores tienen opciones descriptivas, no ambiguas
    • Se explica el propósito de cada campo cuando no es obvio
    • Se proporcionan ejemplos en los placeholders
    • Hay una nota inicial explicando la convención de campos obligatorios
    • Se usan atributos ARIA apropiados (aria-required, aria-describedby)

    Comentarios

    A continuación se muestran comentarios sobre el criterio 1.1.1-A. Alternativa textual breve obligatoria

    Loading comments...




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