La accesibilidad web es la práctica de diseñar y construir sitios y aplicaciones para que cualquier persona pueda percibirlos, entenderlos, navegarlos y operarlos, con independencia de sus capacidades, del dispositivo que utilice o del contexto en el que se encuentre. En esta primera lección definimos el concepto con precisión, aclaramos a quién beneficia (que es a mucha más gente de la que imaginas), y lo distinguimos de otros términos con los que suele confundirse: usabilidad, diseño inclusivo y diseño universal. También presentamos Cursalia, la plataforma de e-learning ficticia que auditaremos y haremos accesible a lo largo de todo el curso. Entender bien esta base es imprescindible: todo lo que veremos después (leyes, WCAG, técnicas de HTML/ARIA, pruebas) se apoya en tener claro qué estamos intentando lograr y para quién.

1. Definición precisa de accesibilidad web
2. A quién beneficia: discapacidad y beneficio universal (efecto acera)
3. Accesibilidad vs. usabilidad vs. diseño inclusivo vs. diseño universal
4. Los cuatro principios POUR (solo de pasada)
5. Presentación del proyecto-hilo: Cursalia

La definición de referencia procede de la Web Accessibility Initiative (WAI) del W3C, el consorcio que estandariza la web:

La accesibilidad web significa que los sitios web, herramientas y tecnologías están diseñados y desarrollados de forma que las personas con discapacidad puedan usarlos. Más concretamente, que puedan percibir, comprender, navegar e interactuar con la web, y contribuir a ella.

Conviene desmenuzar tres ideas de esta definición:

• No es una característica opcional, es una propiedad del producto. Un sitio es accesible o no lo es (en distintos grados) igual que es rápido o lento. No se "añade al final": se construye.
• Cubre percibir + comprender + navegar + interactuar + contribuir. No basta con que el contenido se vea; el usuario debe poder leerlo con un lector de pantalla, entenderlo, moverse por él con el teclado y rellenar un formulario para participar.
• Habla de personas con discapacidad, pero no solo. Como veremos, el beneficio se extiende a todos los usuarios.

Una forma útil de interiorizarlo: la accesibilidad consiste en eliminar barreras. La discapacidad, en el modelo social que asume la web moderna, no está solo "en la persona"; surge de la interacción entre una limitación funcional y un entorno mal diseñado. Una escalera sin rampa no discapacita a nadie por sí sola: discapacita a quien usa silla de ruedas porque no se pensó una alternativa. En la web, un botón que solo funciona con clic de ratón es esa escalera sin rampa para quien navega con teclado.

El primer grupo beneficiario son las personas con discapacidades, que pueden ser visuales (ceguera, baja visión, daltonismo), auditivas, motrices (dificultad o imposibilidad de usar el ratón) o cognitivas y del lenguaje. En el módulo 2 estudiaremos en detalle estos tipos y las tecnologías de asistencia que emplean; aquí basta con retener que hablamos de una parte muy significativa de la población (la OMS estima en torno a un 15-16% de personas con alguna discapacidad).

El curb-cut effect o "efecto acera" es la mejor metáfora para entender por qué la accesibilidad importa a todo el mundo. Los rebajes de bordillo (esas rampitas en las esquinas de las aceras) se instalaron pensando en sillas de ruedas. Pero hoy los usan —y los agradecen— muchísimas más personas: quien empuja un carrito de bebé, un repartidor con una carretilla, alguien con una maleta, un ciclista, un niño con patinete. Lo que se diseñó para un grupo concreto acabó mejorando la experiencia de la mayoría.

En la web ocurre exactamente lo mismo:

La conclusión es potente: la accesibilidad no es un coste para una minoría, es una inversión en calidad para todos. Profundizaremos en el "caso de negocio" y en las situaciones temporales/situacionales en la lección 01-02.

Estos cuatro términos están relacionados y a menudo se usan como sinónimos, pero significan cosas distintas. Distinguirlos evita malentendidos frecuentes en los equipos.

Ideas clave para no confundirlos:

• Accesibilidad y usabilidad se solapan pero no son lo mismo. Un sitio puede ser técnicamente accesible (un lector de pantalla lee todo) y aun así tener mala usabilidad (el formulario tiene 40 campos confusos). Y al revés: algo muy usable con ratón puede ser inaccesible con teclado. El ideal es la "usabilidad accesible": que sea usable también para quien tiene una discapacidad.
• Diseño inclusivo es el "cómo" (el proceso); accesibilidad es en buena medida el "qué" (el resultado y su cumplimiento).
• Diseño universal es el "ideal": una única solución que no segregue. Evitar la típica "versión accesible" separada y peor mantenida.

WCAG organiza toda la accesibilidad en torno a cuatro principios, conocidos por el acrónimo POUR. Aquí solo los nombramos para que te suenen; los desarrollaremos en profundidad en el módulo 3:

• Perceptible (Perceivable): la información debe poder percibirse por algún sentido (p. ej., texto alternativo para imágenes).
• Operable (Operable): la interfaz debe poder manejarse (p. ej., con teclado, no solo con ratón).
• Comprensible (Understandable): el contenido y el funcionamiento deben entenderse.
• Robusto (Robust): el código debe funcionar de forma fiable con distintos navegadores y tecnologías de asistencia.

Por ahora quédate con el acrónimo. La estructura de WCAG la veremos en la lección 01-04 y cada principio, con criterios y técnicas, en el módulo 3.

A lo largo del curso trabajaremos sobre un caso práctico continuo: Cursalia, una plataforma de e-learning (campus online) ficticia. Es un ejemplo ideal porque concentra casi todos los retos de accesibilidad reales: contenido multimedia, formularios, interacciones dinámicas y mucho texto.

Iremos auditando y haciendo accesibles estas superficies clave, que reaparecerán en los ejemplos y ejercicios de cada módulo:

• Landing y catálogo de cursos: tarjetas con imágenes (texto alternativo, estructura).
• Ficha de curso: títulos, descripciones y jerarquía de encabezados.
• Reproductor de vídeo-lección: subtítulos y transcripción.
• Formulario de matrícula/registro: etiquetas, errores y validación accesible.
• Cuestionarios interactivos: foco, teclado y feedback.
• Filtro desplegable del catálogo: un widget personalizado accesible.
• Barra de progreso del alumno: estado comunicado a tecnologías de asistencia.
• Paleta de marca Cursalia: contraste de color suficiente.
• Foros/comentarios: contenido generado por usuarios.
• Panel del alumno como SPA: navegación y anuncios de cambios dinámicos.

En este módulo introductorio usaremos estas superficies solo para ilustrar conceptos. Veamos un primer ejemplo minúsculo, una tarjeta del catálogo, para fijar la idea de "barrera":

No te preocupes por dominar el alt ahora (lo veremos a fondo en el módulo 5): el objetivo es que reconozcas la diferencia entre una interfaz con barrera y una sin barrera. Ese "ojo" es lo primero que desarrolla un profesional de la accesibilidad.

• "La accesibilidad es solo para personas ciegas." Falso. Cubre discapacidades visuales, auditivas, motrices y cognitivas, y beneficia a todos por el efecto acera.
• "Ya lo arreglaremos al final del proyecto." El error más caro. Rehacer una interfaz para hacerla accesible cuesta mucho más que diseñarla bien desde el principio (diseño inclusivo).
• Confundir accesibilidad con usabilidad. Pasar una herramienta automática no garantiza que el sitio sea usable por una persona con discapacidad. Son cosas complementarias.
• Crear una "versión accesible" aparte. Suele quedar desactualizada y de peor calidad; segrega en lugar de incluir. Persigue el diseño universal: una sola solución para todos.
• Consejo: empieza a mirar cualquier web preguntándote "¿podría usar esto sin ver la pantalla? ¿sin ratón? ¿sin oír?". Ese hábito es más valioso que memorizar reglas.

Ejercicio 1. Explica con tus palabras el "efecto acera" (curb-cut effect) y pon un ejemplo distinto a los de la lección aplicado a Cursalia.

Ejercicio 2. Clasifica cada frase como referida a accesibilidad, usabilidad, diseño inclusivo o diseño universal:

1. "Rediseñamos el menú para que se encuentre a la primera."
2. "El reproductor se maneja igual de bien con teclado que con ratón, sin una versión aparte."
3. "Invitamos a un usuario ciego y a uno mayor a las pruebas desde el sprint 1."
4. "Añadimos texto alternativo a todas las imágenes del catálogo para lectores de pantalla."

Ejercicio 3. Observa esta tarjeta del catálogo de Cursalia e identifica al menos una barrera potencial (sin resolverla todavía):

Solución 1. El efecto acera describe cómo una mejora diseñada para un grupo con discapacidad acaba beneficiando a mucha más gente. Ejemplo en Cursalia: las transcripciones de las vídeo-lecciones se crean pensando en personas sordas, pero también permiten a cualquier alumno buscar por texto un concepto dentro del vídeo o repasar sin auriculares en la biblioteca.

Solución 2.

1. Usabilidad. 2. Diseño universal. 3. Diseño inclusivo. 4. Accesibilidad.

Solución 3. Barreras potenciales: (a) el clic está en un <div> con onclick, no en un <a>/<button>, así que no es alcanzable ni activable con teclado (barrera motriz); (b) la <img> no tiene alt, invisible para lectores de pantalla (barrera visual); (c) no hay indicación de que el elemento sea interactivo para tecnologías de asistencia. Las soluciones concretas llegarán en los módulos 4 y 5; aquí bastaba con detectar las barreras.

En esta lección hemos definido la accesibilidad web como la eliminación de barreras para que cualquier persona pueda percibir, comprender, navegar e interactuar con la web. Hemos visto que beneficia tanto a las personas con discapacidad como, por el efecto acera, a toda la ciudadanía, y hemos distinguido accesibilidad, usabilidad, diseño inclusivo y diseño universal. Hemos nombrado los principios POUR (que se desarrollan en el módulo 3) y presentado Cursalia, el proyecto que nos acompañará todo el curso.

Ahora que sabemos qué es la accesibilidad, la siguiente pregunta natural es por qué deberíamos invertir en ella. En la próxima lección, "Importancia de la Accesibilidad Web", veremos la dimensión ética, el caso de negocio (mercado, SEO, marca), el riesgo legal y el coste real de la inaccesibilidad.