Mini lecciones

Practica HTML accesible

Cada lección incluye una lista breve de verificación y un ejercicio de copiar y pegar que puedes usar dentro de Inclusion Code. El objetivo es ayudar a estudiantes ciegos a conectar lo que muestran los lectores de pantalla y las líneas Braille con la estructura HTML que lo hace accesible.

Editor HTML básico en línea de Inclusion Code Descargar Inclusion Code – Editor HTML básico para Windows

Lección 1: Encabezados que tengan sentido

Meta: Crear una estructura fácil de recorrer usando la navegación por encabezados (H / 1–6).

Lista de verificación

Utiliza un solo <h1> claro para el tema principal de la página.
Usa <h2> para secciones principales y <h3> para subsecciones.
No te saltes niveles (evita saltar de H1 a H4).
Los encabezados deben describir el contenido, no solo verse “grandes”.

Ejercicio (copiar y pegar)

Después de generar la página, prueba la navegación por encabezados con tu lector de pantalla.

Práctica de encabezados accesibles

Mi página accesible

Noticias

Aquí van actualizaciones breves.

Recursos

WCAG

WCAG ayuda a definir requisitos de accesibilidad.

Lectores de pantalla

NVDA, JAWS, VoiceOver, TalkBack.

Contacto

Correo: ejemplo@ejemplo.com

Lección 2: Enlaces que funcionen fuera de contexto

Meta: Que el texto del enlace sea comprensible cuando un lector de pantalla presenta la lista de enlaces.

Lista de verificación

Evita usar “haz clic aquí” o “leer más” por sí solos.
El texto del enlace debe describir el destino o la acción.
Usa un lenguaje consistente para elementos repetidos de navegación.
Si necesitas usar “leer más”, añade contexto (avanzado) o reescribe el texto.

Ejercicio (copiar y pegar)

Luego de generar, usa la “lista de enlaces” del lector de pantalla. ¿Los enlaces se entienden?

Práctica de enlaces accesibles

Enlaces que tienen sentido

Buenos ejemplos: Leer la especificación de WCAG 2.2 y Abrir los recursos de Inclusion Code.

Evita enlaces vagos como: haz clic aquí o leer más.

Lista para practicar

Lección 3: Imágenes y texto alternativo significativo

Meta: Usar el texto alternativo correctamente: las imágenes informativas deben tener alt útil; las decorativas deben tener alt="".

Lista de verificación

Si una imagen añade información, incluye un alt significativo.
Si la imagen es puramente decorativa, utiliza alt="".
Evita repetir texto cercano en el alt a menos que sea necesario.
El alt debe reflejar el propósito, no cada detalle visual.

Ejercicio (copiar y pegar)

Lee la página con tu lector de pantalla y compara el comportamiento del alt en cada caso.

Práctica de texto alternativo

Ejemplos de texto alternativo

Imagen informativa

Imagen decorativa

Esta imagen decorativa debe ser ignorada por los lectores de pantalla.

Ejemplo de mal alt

(Evita textos alternativos que no aporten información.)

Lección 4: Formularios con etiquetas (y errores claros)

Meta: Asegurar que cada campo tenga una etiqueta y que las instrucciones sean fáciles de entender.

Lista de verificación

Cada campo debe tener un <label> visible enlazado con for.
Incluye instrucciones claras y ejemplos cuando sea necesario.
Usa texto descriptivo en los botones.
Los errores deben ser específicos (qué ocurrió + cómo corregirlo).

Ejercicio (copiar y pegar)

Navega con Tab. Verifica que cada campo lea correctamente su etiqueta.




  
  Práctica de formularios accesibles


  Formulario de contacto

  
    
      Nombre completo

      
    

    
      Correo electrónico

      
    

    
      Tema

      
    

    
      
    

    
      Ejemplo de un mensaje de error claro:
      Error: Por favor, escribe tu correo electrónico para poder responderte.