Una web es accesible cuando la puede usar cualquier persona, también quien no ve la pantalla, quien no usa ratón o quien tiene dificultades para leer.
Accesible = usable por cualquier persona: con lector de pantalla, con teclado, con zoom, sin sonido.
Es obligatoria en la administración y en muchos servicios privados; la referencia son las WCAG en nivel AA.
El HTML bien escrito hace la mayor parte: idioma, título, encabezados en orden, regiones, alt, enlaces claros, <button>, <label>, tablas con encabezados y subtítulos.
Compruébalo con el teclado, con Lighthouse o WAVE y con un lector de pantalla.
Una web es accesible cuando la puede usar cualquier persona, también quien no ve la pantalla, quien no usa ratón o quien tiene dificultades para leer. Gran parte de la accesibilidad no se añade al final: sale gratis si el HTML está bien escrito, que es lo que se aprende al empezar con HTML.
Personas ciegas, que usan un lector de pantalla: un programa que lee en voz alta la página y permite saltar de encabezado en encabezado, de enlace en enlace o de campo en campo. Personas con baja visión, que amplían la página o necesitan buen contraste. Personas que no pueden usar el ratón y navegan con el teclado o con otros dispositivos. Personas sordas, que necesitan subtítulos en los vídeos. Personas con dificultades cognitivas o de lectura, que agradecen textos claros y una estructura previsible.
Y también situaciones de todos: el sol sobre la pantalla del móvil, un brazo escayolado o un vídeo en un tren sin auriculares.
Las webs de la administración pública en España tienen que ser accesibles por ley (Real Decreto 1112/2018). Desde el 28 de junio de 2025, la Ley 11/2023, que traslada la normativa europea, lo exige también a muchos servicios privados: tiendas en línea, bancos, transporte, libros electrónicos… Así en 2026; puede haber cambiado. La referencia técnica son las pautas WCAG del W3C (versión 2.2, de 2023), en su nivel AA. Se resumen en cuatro principios: el contenido tiene que ser perceptible, operable, comprensible y robusto.
Para un estudio de diseño, entregar una web inaccesible es entregar un trabajo con fallos.
Repasa esta lista con cualquier página tuya. Todo es HTML básico:
QuéPor qué ayuda <html lang="es">El lector de pantalla lee con la pronunciación del español. Un <title> que diga qué es la páginaEs lo primero que se anuncia y lo que se ve en la pestaña. Encabezados en orden: un <h1>, luego <h2>, <h3>…Quien usa lector de pantalla salta por los encabezados como por un índice. <header>, <nav>, <main>, <footer>Son «regiones»: permiten ir directo al menú o al contenido. alt en todas las imágenes (vacío si son decorativas)Sin él, el lector dice el nombre del fichero: «IMG-4032 punto jpg». Enlaces que dicen adónde llevanMuchas personas recorren solo la lista de enlaces; diez «pincha aquí» no sirven. <button> para las acciones y <a> para ir a otra páginaFuncionan con el teclado y se anuncian como lo que son. <label> en cada campo, <fieldset> con <legend>El lector dice qué hay que escribir en cada campo . Tablas con <caption> y <th scope>Cada dato se lee junto a su encabezado . Subtítulos en los vídeos con <track>Para quien no oye o no puede poner sonido.
Los subtítulos se añaden a un vídeo con un fichero de texto .vtt:
Prueba tu página sin ratón: Tab avanza por enlaces, botones y campos; Mayús + Tab retrocede; Intro activa un enlace o un botón; la barra espaciadora marca una casilla.
Tienes que poder llegar a todo lo que se puede pulsar, en un orden lógico (el del HTML). Tienes que ver dónde estás: el contorno de foco. Con CSS puedes darle estilo con :focus-visible; nunca lo borres sin poner otro. Un <div> con un clic programado no recibe el foco ni responde a Intro. Por eso los botones se hacen con <button>.
La accesibilidad sigue en el CSS y en el JavaScript:
Contraste suficiente entre el texto y el fondo. No usar solo el color para dar información, como un error marcado solo en rojo. Respetar a quien prefiere menos movimiento en las animaciones. Menús y botones con JavaScript que se anuncian bien.
Teclado: recorre la página con Tab. Es la prueba más rápida y la que más fallos encuentra. Validador del W3C : un HTML mal cerrado confunde también a los lectores de pantalla. Lighthouse, en las herramientas de desarrollo de Chrome (F12 → pestaña Lighthouse → categoría Accesibilidad): da una puntuación y una lista de fallos. WAVE (wave.webaim.org): marca sobre la propia página las imágenes sin alt, los campos sin etiqueta o los saltos de encabezado. Un lector de pantalla: NVDA en Windows (gratuito) o VoiceOver en Mac (Cmd + F5). Cierra los ojos un minuto y navega tu portfolio.
📌 Nota. Una puntuación de 100 en Lighthouse no garantiza que la web sea accesible: las herramientas automáticas encuentran solo una parte de los problemas. La prueba con el teclado y con un lector de pantalla no se puede saltar.
Pasa WAVE o Lighthouse por la web de algún museo, tienda o festival que te guste. Apunta tres fallos y cómo los arreglarías con lo que sabes de HTML. Recorre una página tuya solo con el teclado y con VoiceOver o NVDA. ¿Se entiende todo? Corrige lo que no.
alt="imagen" o el nombre del fichero como texto alternativo. Elegir un encabezado por su tamaño y saltarse niveles (de <h1> a <h4>). Enlaces «aquí», «leer más» o «+ info» repetidos. Botones hechos con <div> o con una imagen sin texto. Texto dentro de imágenes (carteles, titulares): un lector de pantalla no lo lee y no se puede ampliar sin pixelarse. Vídeos sin subtítulos o que arrancan solos con sonido.
Una web es accesible cuando la puede usar cualquier persona, también quien no ve la pantalla, quien no usa ratón o quien tiene dificultades para leer.
Código del tema: alt=""
Una web es accesible cuando la puede usar cualquier persona, también quien no ve la pantalla, quien no usa ratón o quien tiene dificultades para leer. Gran parte de la accesibilidad no se añade al final: sale gratis si el HTML está bien escrito, que es lo que se aprende al empezar con HTML.
Y también situaciones de todos: el sol sobre la pantalla del móvil, un brazo escayolado o un vídeo en un tren sin auriculares.
Para un estudio de diseño, entregar una web inaccesible es entregar un trabajo con fallos.
Repasa esta lista con cualquier página tuya. Todo es HTML básico:
| Qué | Por qué ayuda |
|---|---|
<html lang="es"> | El lector de pantalla lee con la pronunciación del español. |
Un <title> que diga qué es la página | Es lo primero que se anuncia y lo que se ve en la pestaña. |
Encabezados en orden: un <h1>, luego <h2>, <h3>… | Quien usa lector de pantalla salta por los encabezados como por un índice. |
<header>, <nav>, <main>, <footer> | Son «regiones»: permiten ir directo al menú o al contenido. |
alt en todas las imágenes (vacío si son decorativas) | Sin él, el lector dice el nombre del fichero: «IMG-4032 punto jpg». |
| Enlaces que dicen adónde llevan | Muchas personas recorren solo la lista de enlaces; diez «pincha aquí» no sirven. |
<button> para las acciones y <a> para ir a otra página | Funcionan con el teclado y se anuncian como lo que son. |
<label> en cada campo, <fieldset> con <legend> | El lector dice qué hay que escribir en cada campo . |
Tablas con <caption> y <th scope> | Cada dato se lee junto a su encabezado . |
Subtítulos en los vídeos con <track> | Para quien no oye o no puede poner sonido. |
Los subtítulos se añaden a un vídeo con un fichero de texto .vtt:
Prueba tu página sin ratón: Tab avanza por enlaces, botones y campos; Mayús + Tab retrocede; Intro activa un enlace o un botón; la barra espaciadora marca una casilla.
:focus-visible; nunca lo borres sin poner otro.<div> con un clic programado no recibe el foco ni responde a Intro. Por eso los botones se hacen con <button>.La accesibilidad sigue en el CSS y en el JavaScript:
Tab. Es la prueba más rápida y la que más fallos encuentra.alt, los campos sin etiqueta o los saltos de encabezado.Cmd + F5). Cierra los ojos un minuto y navega tu portfolio.📌 Nota. Una puntuación de 100 en Lighthouse no garantiza que la web sea accesible: las herramientas automáticas encuentran solo una parte de los problemas. La prueba con el teclado y con un lector de pantalla no se puede saltar.
alt="imagen" o el nombre del fichero como texto alternativo.<h1> a <h4>).<div> o con una imagen sin texto.Abre cada actividad para hacerla aquí mismo. Lo que resuelves se guarda en este navegador.