Presentación del curso en vídeo

0:00 Te damos la bienvenida

Te damos la bienvenida a CSS, JavaScript y frameworks, un curso del nivel 3 de la Certificación ADDAW de Accesibilidad Digital, dedicado al desarrollo web accesible. Está pensado para quien programa interfaces. Aquí verás que la accesibilidad no termina en el HTML: también se gana o se pierde en las hojas de estilo, en los scripts y en los frameworks.

0:22 Ocultar y ordenar con CSS

Empezamos por el CSS que oculta y reordena. Display none oculta a todo el mundo. La clase visually hidden oculta solo a la vista y conserva el texto para el lector. Si cambias el orden visual con order o con Grid, el teclado seguirá el código. Por eso se reordena en el código, no en la hoja de estilos.

0:42 Un foco visible y nunca tapado

Después llega el CSS de la interacción. Un contorno en focus visible, con buen contraste, marca dónde está el foco. Con scroll padding evitas que una cabecera fija lo tape, como exige el criterio 2.4.11. Y los botones deben medir al menos 24 por 24 píxeles, o tener espacio suficiente a su alrededor.

1:04 Respeta las preferencias

Muchas personas ajustan su sistema para ver mejor. Con un tema de contraste de Windows desaparecen las sombras y los fondos de color, y un botón sin borde se convierte en texto suelto. Aprenderás a usar bordes transparentes y colores del sistema, a dar más contraste cuando se pide y a crear un modo oscuro con el mismo contraste.

1:23 Movimiento bajo control

Las animaciones pueden provocar mareos a las personas con trastornos vestibulares. Por eso las definirás respetando la preferencia de reducir movimiento del sistema. Todo lo que se mueva solo más de 5 segundos, como un vídeo de fondo, necesita un botón de pausa. Y nada puede destellar más de 3 veces por segundo por encima de los umbrales del criterio 2.3.1.

1:45 JavaScript que no sorprende

El JavaScript decide qué ocurre y cuándo. Las acciones se programan con click, que se dispara al soltar y también con el teclado. Un desplegable no debe cambiar de página solo por elegir una opción. Y si la sesión de una sede electrónica caduca, debe avisar antes y dejar ampliarla con un solo botón.

2:03 Aplicaciones de una sola página

En las aplicaciones de una sola página, hechas con React, Vue o Angular, el navegador ya no hace su trabajo en cada carga. Tendrás que poner un título nuevo en cada ruta, mover el foco al encabezado principal, volver arriba y anunciar que la vista ha cambiado. Verás cómo hacerlo en cada framework.

2:21 Componentes que no olvidan nada

Un componente reutilizable multiplica lo que contiene, para bien o para mal. Aprenderás a hacer obligatoria la etiqueta en su API y a llevar los atributos al control real. En los Web Components envolverás elementos nativos y sabrás por qué las referencias por id no cruzan el Shadow DOM.

2:39 Pruebas automáticas en tu flujo

Se estima que las herramientas automáticas detectan en torno a un tercio de los problemas, según el estudio y el sitio. No son todos, pero sí los más repetitivos. Integrarás un linter al escribir y el motor axe en pruebas de componentes y de extremo a extremo. Y fijarás un umbral de errores que nunca pueda crecer.

2:58 Por qué importa

Esto no es opcional. El Real Decreto 1112 de 2018 obliga al sector público. La Ley 11 de 2023 alcanza, desde el 28 de junio de 2025, a servicios privados como el comercio electrónico y la banca. Pero piensa sobre todo en las personas que usan tu web hoy.

3:17 Al terminar el curso

Al terminar, revisarás con criterio el CSS y el JavaScript de cualquier proyecto, corregirás aplicaciones de una sola página y componentes, y evitarás con pruebas que los errores vuelvan. Ten a mano un proyecto propio y las herramientas de desarrollo del navegador. Cada ejercicio te llevará pocos minutos. Empezamos.