Sesión 11 – Accesibilidad y buenas prácticas

1

¿Qué es la accesibilidad web?Diseñar para todos

La accesibilidad web (a11y) garantiza que todas las personas puedan usar un sitio web, independientemente de sus capacidades. Esto incluye personas con discapacidad visual, auditiva, motora o cognitiva, pero también beneficia a todos los usuarios (por ejemplo, quienes navegan con mala conexión o con pantallas pequeñas).

👁

Visual

Ceguera, baja visión, daltonismo. Los lectores de pantalla leen el contenido en voz alta.

👂

Auditiva

Sordera o hipoacusia. Los subtítulos y transcripciones son esenciales para contenido multimedia.

⌨

Motora

Dificultad para usar ratón. La navegación por teclado (Tab, Enter) debe funcionar siempre.

📚

Cognitiva

Dislexia, TDAH. Un diseño claro, consistente y con lenguaje sencillo ayuda a todos.

2

Etiquetas semánticas HTML5Significado y estructura

Las etiquetas semánticas comunican el significado del contenido al navegador y a las tecnologías de asistencia (lectores de pantalla). Evita usar <div> para todo; los <div> no aportan significado semántico.

<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Inicio</a></li>
                <li><a href="servicios.html">Servicios</a></li>
                <li><a href="contacto.html">Contacto</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h1>Título del artículo</h1>
            <section>
                <h2>Subsección</h2>
            </section>
        </article>
        <aside>Contenido relacionado</aside>
    </main>

    <footer>© 2026 Mi sitio web</footer>
</body>

Etiqueta	Uso
<header>	Encabezado de la página o de una sección
<nav>	Bloque de navegación principal
<main>	Contenido principal (uno solo por página)
<article>	Contenido independiente y autocontenido
<section>	Sección temática del contenido
<aside>	Contenido complementario o lateral
<footer>	Pie de página o de una sección

3

Buenas prácticas de accesibilidadReglas esenciales

1

Texto alternativo

Siempre usa alt descriptivo en imágenes. Si es decorativa, usa alt="".

2

Labels en formularios

Cada campo debe tener un <label> asociado con el atributo for.

3

Navegación por teclado

Todos los elementos interactivos deben ser accesibles con Tab y activables con Enter.

4

Contraste de colores

Ratio mínimo 4.5:1 para texto normal, 3:1 para texto grande.

Tamaño de texto legible

Usa al menos 16px como tamaño base. Usa unidades relativas (rem, em) para que el usuario pueda ajustar el tamaño.

html { font-size: 16px; }
h1 { font-size: 2rem; }     /* 32px */
h2 { font-size: 1.5rem; }   /* 24px */
p  { font-size: 1rem; }     /* 16px */

Atributos ARIA

Proporcionan información adicional a los lectores de pantalla cuando el HTML semántico no es suficiente.

<!-- Botón de menú hamburguesa -->
<button aria-label="Abrir menú de navegación" aria-expanded="false">
    ☰
</button>

<!-- Región identificada -->
<div role="alert">
    <p>Tu formulario se ha enviado correctamente.</p>
</div>

Idioma del documento

Especifica el idioma para que los lectores de pantalla pronuncien correctamente.

<html lang="es">

Imágenes: correcto vs incorrecto

<!-- Imagen informativa: alt descriptivo -->
<img src="grafico-ventas.png"
     alt="Gráfico de barras mostrando ventas trimestrales de 2025">

<!-- Imagen decorativa: alt vacío -->
<img src="ornamento.png" alt="">

Labels en formularios: correcto vs incorrecto

<!-- Correcto -->
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email">

<!-- Incorrecto: sin label -->
<input type="email" placeholder="Correo electrónico">

Contraste de colores

/* Buen contraste */
body { color: #333; background-color: #fff; }

/* Mal contraste (difícil de leer) */
body { color: #aaa; background-color: #fff; }

4

Lista de verificaciónChecklist interactivo de accesibilidad

Audita tu proyecto

Marca cada punto que hayas verificado en tu sitio web.

0 / 10

5

Ejercicio prácticoAplica la accesibilidad a tu proyecto

Tareas de la sesión

Revisa tu proyecto completo y sustituye los <div> genéricos por etiquetas semánticas apropiadas (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>).
Comprueba que todas las imágenes tienen un atributo alt descriptivo.
Verifica que todos los campos de formulario tienen su <label> asociado.
Comprueba el contraste de colores de tu página con una herramienta online (como WebAIM Contrast Checker).
Navega por tu página usando solo el teclado (Tab, Shift+Tab, Enter) y asegúrate de que puedes acceder a todos los elementos interactivos.
Añade lang="es" al <html> de todas tus páginas.
Usa la lista de verificación interactiva de arriba para auditar tu proyecto completo.