Diseño web inclusivo. Qué es, cómo se aplica y qué exige la ley en 2026
El diseño web inclusivo consiste en pensar una web para que la pueda usar cualquier persona. Quien no ve bien, quien navega solo con el teclado, quien usa un lector de pantalla o quien se pierde con textos largos y formularios confusos. No es un añadido de última hora. Se decide desde el primer boceto.
Aquí tienes en qué se diferencia de la accesibilidad, qué tiene que tener una web inclusiva, por qué un botón de accesibilidad no basta y qué exige la ley en España. Incluye el Real Decreto 707/2026 de accesibilidad cognitiva, que se aplica desde el 2 de enero de 2027. Está actualizado a octubre de 2026.
La accesibilidad web en una cifra
95,9 %. Es la parte de las páginas de inicio del millón de webs más visitadas del mundo que tiene fallos de accesibilidad detectables de forma automática. La media es de 56 errores por página.
Casi todos se repiten. Poco contraste, imágenes sin texto alternativo, campos de formulario sin etiqueta y enlaces o botones vacíos. Son fallos baratos de corregir si se revisan a tiempo.
Fuente · WebAIM, The WebAIM Million, informe de 2026
¿Qué es el diseño web inclusivo y en qué se diferencia de la accesibilidad?
La accesibilidad web es el resultado. Una web que se puede percibir, manejar y entender, y que funciona con las tecnologías de apoyo. Se mide con las pautas WCAG del W3C, que van por la versión 2.2.
El diseño inclusivo es la forma de llegar a ese resultado. Parte de la diversidad real de quien va a usar la web. Personas mayores, personas con discapacidad, gente que lee en el móvil a pleno sol o que no domina el idioma. Y la tiene en cuenta en cada decisión de diseño, de texto y de código.
Dicho de otra forma. La accesibilidad se audita al final. El diseño inclusivo evita tener que rehacer media web después de la auditoría.
¿Es obligatorio que la web de tu empresa sea accesible?
Depende de quién seas y de lo que hagas en tu web. En España hay tres normas que se suman, y la última se aplica desde el 2 de enero de 2027.
Qué norma de accesibilidad afecta a tu web
| Norma | A quién obliga | Desde cuándo | Qué pide en la web |
|---|---|---|---|
| Real Decreto 1112/2018 | Webs y apps del sector público | 2018, con plazos que acabaron en 2021 | Cumplir la norma UNE-EN 301 549, que recoge las pautas WCAG 2.1 nivel AA, publicar una declaración de accesibilidad y ofrecer un canal de quejas |
| Ley 11/2023 | Empresas que ofrecen a consumidores comercio electrónico, banca, transporte, libros electrónicos o telecomunicaciones. Las microempresas que prestan servicios están exentas | 28 de junio de 2025, con transición hasta el 28 de junio de 2030 para productos que ya estaban en uso | Que la web, la app y el proceso de compra cumplan los requisitos de accesibilidad de la ley y que expliques en tus condiciones cómo los cumples |
| Real Decreto 707/2026 | Administraciones, prestadores de servicios de la sociedad de la información y empresas que ofrecen bienes y servicios al público | 2 de enero de 2027 | Que la información, los formularios, el consentimiento y el pago se entiendan. Como mínimo, en lenguaje sencillo |
Fuente · BOE, textos consolidados del Real Decreto 1112/2018, la Ley 11/2023 y el Real Decreto 707/2026, consultados el 17/10/2026. Es un resumen orientativo, no asesoramiento jurídico.
La novedad es la accesibilidad cognitiva. Hasta ahora casi todo giraba en torno a que la web funcionara con lector de pantalla o con teclado. Desde enero también cuenta que el contenido se entienda. Lo explicamos con detalle en qué cambia con el Real Decreto 707/2026.
Una web inclusiva no la usa solo quien tiene una discapacidad. La usa también quien tiene prisa, quien lee en un móvil pequeño o quien entra por primera vez en una tienda online.
¿Qué tiene que tener una web inclusiva?
Estas son las siete comprobaciones que hacemos en cada proyecto. Las cinco primeras corrigen la mayoría de los fallos que detecta el informe WebAIM. La séptima es la que pide la nueva norma de accesibilidad cognitiva.
1. Textos alternativos en las imágenes.
Un lector de pantalla lee el texto alternativo en lugar de la imagen. Si la imagen informa, el texto describe lo que se ve. Si es decorativa, se deja vacío para que no estorbe. De paso, ayuda a que Google entienda tus fotos.
2. Contraste suficiente.
Las pautas WCAG piden una relación de contraste de 4,5 a 1 para el texto normal y de 3 a 1 para el texto grande. Es el fallo más común de todos, y casi siempre nace en la paleta de colores de la marca.
3. Formularios con etiquetas y errores claros.
Cada campo lleva su etiqueta visible, no solo un texto de ejemplo que desaparece al escribir. Si algo falla, el mensaje dice qué falla y cómo arreglarlo.
4. Enlaces y botones que se entienden solos.
Nada de «pincha aquí» ni de iconos sin nombre. Un lector de pantalla puede leer la lista de enlaces de la página, y cada uno tiene que decir adónde lleva.
5. Navegación con teclado.
Todo lo que se hace con el ratón se tiene que poder hacer con el tabulador, y siempre tiene que verse dónde está el foco. Los menús desplegables y las ventanas emergentes son lo que más falla.
6. Vídeo con subtítulos y móvil cómodo.
Subtítulos revisados, no solo los automáticos, y transcripción si el vídeo explica algo importante. En el móvil, botones de al menos 24 por 24 píxeles y textos que se puedan ampliar sin que se rompa la página.
7. Textos que se entienden.
Frases cortas, palabras de uso común, un paso por pantalla y ninguna sigla sin explicar. Es la base de la accesibilidad cognitiva y, desde el 2 de enero de 2027, el mínimo que pide el Real Decreto 707/2026 para la información comercial y la contratación.
Los seis fallos de accesibilidad más comunes
| Fallo | Páginas de inicio afectadas | Cómo se corrige |
|---|---|---|
| Texto con poco contraste | 83,9 % | Ajustar los colores de texto y fondo en la plantilla |
| Imágenes sin texto alternativo | 53,1 % | Escribir el alt de cada imagen que informa |
| Campos de formulario sin etiqueta | 51 % | Añadir una etiqueta visible a cada campo |
| Enlaces vacíos | 46,3 % | Dar nombre a los enlaces que solo son un icono o una imagen |
| Botones vacíos | 30,6 % | Dar nombre a los botones de menú, buscador y carrito |
| Página sin idioma declarado | 13,5 % | Indicar el idioma en el código de la página |
Fuente · WebAIM, The WebAIM Million 2026. Análisis automático de las páginas de inicio del millón de webs más visitadas, datos de febrero de 2026.
¿Basta con instalar un botón de accesibilidad?
No. Los botones y barras de accesibilidad, que en el sector se llaman overlays, permiten cambiar el tamaño de letra o el contraste, y pueden ser una ayuda más. Pero se cargan encima de la web cuando ya está hecha y no corrigen el código que hay debajo. Si una imagen no tiene texto alternativo o un botón no tiene nombre, el lector de pantalla sigue sin poder leerlo.
Cientos de especialistas en accesibilidad, entre ellos autores de las propias pautas WCAG, firmaron la Overlay Fact Sheet para advertir de que estas herramientas no hacen que una web cumpla la normativa.
¿Cómo saber si tu web es accesible?
Empieza por tres pruebas que puedes hacer hoy. Pasa tu web por WAVE o por la auditoría de accesibilidad de Lighthouse en Chrome. Recórrela solo con el teclado, sin tocar el ratón. Y escucha una página con el lector de pantalla del móvil, VoiceOver en iPhone o TalkBack en Android.
Las herramientas automáticas detectan solo una parte de los problemas. Si una imagen tiene un alt que no describe nada o un texto no se entiende, solo lo ve una persona. Por eso la revisión manual es imprescindible.
4,38 millones de personas en España declaran alguna discapacidad o limitación, según el INE. A ellas se suman muchas personas mayores que leen peor la letra pequeña o se pierden en procesos largos. Una web que no se entiende las deja fuera.
¿Por dónde empezar si tu web ya está hecha?
No hace falta rehacerla. Lo eficaz es ir de lo que más se usa a lo que menos.
- Revisa las páginas que más se usan. La página de inicio, las fichas de servicio o de producto, el formulario de contacto y, si vendes online, el carrito y el pago.
- Corrige los fallos repetidos. Contraste, textos alternativos, etiquetas y enlaces vacíos se arreglan casi siempre en la plantilla, y el cambio llega a toda la web de una vez.
- Reescribe los textos clave en lenguaje sencillo. Condiciones de compra, devoluciones, aviso de cookies y mensajes de error.
- Explica cómo cumples. En el sector público la declaración de accesibilidad es obligatoria. En los servicios de la Ley 11/2023 tienes que contar en tus condiciones cómo cumple el servicio los requisitos. Aunque no te obligue ninguna, pon un contacto para que te avisen de cualquier problema.
- Incluye la accesibilidad en el mantenimiento. Cada plugin, cada página nueva y cada cambio de diseño puede romper algo. Lo revisamos dentro del mantenimiento web.
Las webs del sector público tienen además obligaciones concretas de accesibilidad, que resumimos en la guía de comunicación digital para organismos públicos.
Fuentes consultadas
- WebAIM, The WebAIM Million
- W3C, WCAG 2.2
- BOE, Real Decreto 1112/2018
- BOE, Ley 11/2023
- BOE, Real Decreto 707/2026
- INE, nota de prensa de la EDAD 2020
- Overlay Fact Sheet
Preguntas frecuentes sobre el diseño web inclusivo
¿Qué es el diseño web inclusivo?
Es diseñar una web pensando desde el principio en la diversidad de quien la va a usar, personas mayores, personas con discapacidad o con poca experiencia digital, para que todas puedan encontrar la información, entenderla y completar lo que han venido a hacer.
¿Es lo mismo diseño inclusivo que accesibilidad web?
No exactamente. La accesibilidad es el resultado que se mide con las pautas WCAG. El diseño inclusivo es la forma de trabajar que lleva a ese resultado y que además tiene en cuenta la comprensión, el contexto y la experiencia de uso.
¿Es obligatorio que mi web sea accesible?
Es obligatorio en el sector público por el Real Decreto 1112/2018 y, desde el 28 de junio de 2025, en servicios como el comercio electrónico o la banca por la Ley 11/2023, salvo para las microempresas que prestan servicios. Desde el 2 de enero de 2027 el Real Decreto 707/2026 añade requisitos de comprensión para la información comercial y la contratación.
¿Un plugin o un botón de accesibilidad hace que mi web cumpla la ley?
No. Esos botones cambian el aspecto de la página, pero no corrigen el código de fondo. Si faltan textos alternativos o etiquetas, siguen faltando.
¿Qué versión de las pautas WCAG hay que cumplir?
La normativa española remite a la norma UNE-EN 301 549, que recoge las WCAG 2.1 nivel AA. La versión vigente del W3C es la 2.2, y diseñar con ella te deja cubierto.
¿Cuánto cuesta hacer accesible una web que ya existe?
Depende del estado de la plantilla y del número de páginas. Lo habitual es auditar primero y corregir los fallos repetidos en la plantilla, que resuelven la mayor parte del problema sin rehacer la web.
¿Revisamos la accesibilidad de tu web?
Te decimos qué falla, qué es obligatorio en tu caso y qué supone corregirlo, sin rehacer la web si no hace falta. Hacemos diseño web en Asturias accesible desde el primer boceto y trabajamos con empresas de toda España.
José Luis Bahamonde
https://joseluisbahamonde.com/sobre-mi/Soy José Luis Bahamonde, cofundador y CEO de Agencia EGOS. Ingeniero de formación, dirigí durante más de veinte años proyectos industriales en el sector naval antes de dedicarme al marketing. Desde 2022 llevo EGOS junto a un equipo que trabaja con clínicas, industria y negocios locales de Asturias y de toda España.