¿Qué es la accesibilidad web y por qué es importante? ♿

La accesibilidad web busca que páginas, aplicaciones y contenidos digitales puedan ser utilizados por la mayor cantidad posible de personas.

Esto incluye usuarios que navegan mediante teclado, lectores de pantalla, ampliadores, comandos de voz u otras tecnologías de apoyo.

¿Qué es la accesibilidad web?

La accesibilidad web es la práctica de diseñar y desarrollar sitios que no presenten barreras innecesarias para sus visitantes.

Una página accesible permite comprender el contenido, navegar entre sus secciones, completar formularios y utilizar sus funciones de diferentes maneras.

¿Por qué es importante?

Una página difícil de leer o controlar puede impedir que algunas personas encuentren información, realicen una compra, envíen un formulario o utilicen un servicio.

• Permite llegar a más personas.
• Mejora la facilidad de navegación.
• Ayuda a organizar correctamente el contenido.
• Favorece la experiencia en celulares.
• Mejora formularios y botones.
• Facilita utilizar lectores de pantalla.
• Reduce confusiones durante la navegación.
• Puede mejorar la estructura para buscadores.
• Transmite una imagen más profesional.

¿Quiénes se benefician?

Importancia del HTML semántico

El HTML semántico utiliza elementos que describen claramente la función del contenido.

<header>
    Encabezado del sitio
</header>

<nav>
    Navegación principal
</nav>

<main>
    Contenido principal
</main>

<footer>
    Pie de página
</footer>

Estos elementos ayudan a navegadores, buscadores y tecnologías de apoyo a comprender la estructura de la página.

Encabezados correctamente ordenados

Los títulos deben organizar el contenido de forma jerárquica.

<h1>Título principal</h1>

<h2>Primera sección</h2>

<h3>Tema dentro de la sección</h3>

Botón frente a enlace

<a href="articulos.html">
    Ver artículos
</a>

<button type="button">
    Abrir menú
</button>

Cómo crear imágenes accesibles

El atributo alt proporciona una descripción textual de una imagen.

<img
    src="../images/diseno-responsive.webp"
    alt="Página web mostrada en celular, tableta y computadora"
>

La descripción debe comunicar la información importante que aporta la imagen dentro del contexto.

Imágenes decorativas

Cuando una imagen es puramente decorativa y no agrega información, puede utilizar un atributo vacío:

<img
    src="../images/decoracion.svg"
    alt=""
>

Enlaces formados por imágenes

Cuando una imagen funciona como enlace, el texto alternativo debe describir la acción.

<a href="../index.html">

    <img
        src="../images/logo.svg"
        alt="Ir al inicio de ByteNova"
    >

</a>

Navegación mediante teclado

Todos los elementos interactivos importantes deberían poder utilizarse sin depender exclusivamente del ratón.

Algunas teclas habituales son:

• Tab: avanzar entre elementos.
• Shift + Tab: regresar.
• Enter: activar enlaces o botones.
• Espacio: activar determinados controles.
• Flechas: moverse dentro de algunos componentes.

Indicador de enfoque

El usuario debe poder reconocer claramente qué elemento está seleccionado mediante el teclado.

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}

Orden lógico de navegación

El orden del teclado debería seguir el orden visual y la estructura natural del documento.

Evita utilizar valores positivos de tabindex para reorganizar artificialmente toda la navegación.

Cómo crear formularios accesibles

Cada campo debe tener una etiqueta que indique claramente qué información debe introducirse.

<label for="correo">
    Correo electrónico
</label>

<input
    type="email"
    id="correo"
    name="correo"
    required
>

El valor de for debe coincidir con el id del campo.

El placeholder no reemplaza la etiqueta

<label for="nombre">
    Nombre completo
</label>

<input
    type="text"
    id="nombre"
    name="nombre"
    placeholder="Ejemplo: Ana López"
>

El placeholder desaparece cuando la persona comienza a escribir y puede resultar difícil de leer.

Mensajes de error claros

Un mensaje debe explicar qué ocurrió y cómo corregirlo.

Escribe una dirección de correo válida,
por ejemplo: nombre@correo.com

Colores y contraste

El texto debe distinguirse claramente del fondo. Combinaciones con poco contraste dificultan la lectura.

No dependas únicamente del color

Un estado, advertencia o resultado debe comunicarse mediante más de una señal.

❌ Error: completa el campo de correo.

✅ Información enviada correctamente.

Modo oscuro

El modo oscuro también debe mantener textos, enlaces, tarjetas y formularios fáciles de distinguir.

No basta con cambiar el fondo. Deben revisarse todos los colores utilizados en la interfaz.

Contenido fácil de entender

La accesibilidad también depende de cómo se escribe y organiza la información.

• Utiliza títulos descriptivos.
• Divide textos muy extensos.
• Explica los términos técnicos.
• Utiliza párrafos de tamaño razonable.
• Presenta instrucciones en orden.
• Evita frases innecesariamente complicadas.
• Mantén una navegación consistente.
• Utiliza enlaces que describan su destino.

Textos de enlaces

<a href="articulos.html">
    Haz clic aquí
</a>

<a href="articulos.html">
    Explorar todos los artículos
</a>

El segundo ejemplo permite comprender el destino incluso cuando el enlace se lee fuera del párrafo.

Idioma del documento

La etiqueta HTML debe indicar el idioma principal:

<html lang="es">

Esto ayuda a los lectores de pantalla a utilizar una pronunciación adecuada.

Videos y contenido multimedia

Los videos deberían incluir alternativas para las personas que no pueden escuchar o ver completamente el contenido.

• Agregar subtítulos.
• Ofrecer una transcripción.
• Evitar reproducir sonido inesperadamente.
• Permitir pausar el contenido.
• Describir información visual importante.
• Evitar destellos intensos o repetitivos.

¿Qué es ARIA?

ARIA es un conjunto de atributos que puede proporcionar información adicional sobre componentes interactivos a las tecnologías de apoyo.

<button
    id="menu-toggle"
    aria-label="Abrir menú"
    aria-expanded="false"
    aria-controls="menu-principal"
>
    ☰
</button>

aria-expanded indica si el menú está abierto o cerrado.

aria-controls relaciona el botón con el elemento que controla.

¿Cómo probar la accesibilidad?

Las herramientas automáticas ayudan, pero no detectan todos los problemas. También deben realizarse pruebas manuales.

Lista básica de comprobación

• La página tiene un título principal claro.
• Los encabezados siguen un orden lógico.
• Las imágenes importantes tienen texto alternativo.
• Los botones tienen nombres comprensibles.
• El enfoque del teclado es visible.
• Los formularios tienen etiquetas.
• Los errores incluyen explicaciones.
• El texto mantiene suficiente contraste.
• Los enlaces describen su destino.
• La página funciona al ampliar el contenido.

Errores frecuentes

• Utilizar imágenes sin atributo alt.
• Eliminar el indicador de enfoque.
• Crear botones mediante elementos div.
• Usar placeholder en lugar de label.
• Comunicar errores solamente mediante color.
• Utilizar texto con poco contraste.
• Crear enlaces con el texto “haz clic aquí”.
• No permitir navegar mediante teclado.
• Usar ARIA incorrectamente.
• No probar la página con diferentes usuarios.

Preguntas frecuentes

Conclusión

La accesibilidad web permite que más personas puedan comprender, navegar y utilizar una página.

El HTML semántico, los textos alternativos, la navegación mediante teclado, los formularios etiquetados y un buen contraste son elementos fundamentales.

Una página accesible no solamente cumple una función social: también ofrece una experiencia más clara, profesional y fácil de utilizar.