Garantizar la accesibilidad con pruebas automatizadas

En el mundo del desarrollo de software una funcionalidad que hoy funciona puede dejar de hacerlo mañana después de una modificación aparentemente inocente. Para evitar este problema se crean las pruebas automatizadas para mantener la funcionalidad y la forma de utilizar una interfaz de usuario.

La accesibilidad debería formar parte de esas pruebas para garantizar que todos los usuarios pueden acceder a la funcionalidad.

Sin embargo, todavía es frecuente tratarla como una actividad posterior al desarrollo. Primero se construye la interfaz, después se comprueba si funciona y, en algún momento, alguien ejecuta una herramienta de accesibilidad o realiza una auditoría. El problema de este planteamiento es que convierte la accesibilidad en una fotografía puntual cuando debería ser una propiedad del software que intentamos conservar durante toda su vida.

La automatización de las pruebas puede ayudar a garantizar y mantener esa accesibilidad.

Como explica Marcy Sutton en Writing Automated Tests for Accessibility, las pruebas automáticas no pueden descubrir todos los problemas de accesibilidad. Tampoco sustituyen las pruebas manuales ni las realizadas con personas con discapacidad. Su utilidad está en otro lugar: permiten comprobar de manera sistemática aquello que una máquina sí puede verificar y, sobre todo, detectar regresiones antes de que lleguen a producción.

La accesibilidad también puede sufrir regresiones

Una regresión aparece cuando una modificación introduce un problema en algo que anteriormente funcionaba.

Si una función debe devolver un determinado resultado para una entrada concreta, podemos escribir una prueba que establezca ese comportamiento. Cada vez que alguien modifique el código, la prueba volverá a ejecutarse.

Con la accesibilidad sucede exactamente lo mismo. Un botón puede tener hoy un nombre accesible y perderlo durante una refactorización. Un diálogo puede devolver correctamente el foco al elemento que lo abrió hasta que alguien modifica su implementación. Un componente de pestañas puede responder a las flechas del teclado y dejar de hacerlo después de actualizar una dependencia.

La interfaz puede parecer idéntica. Para una persona que utiliza el ratón puede incluso continuar funcionando con normalidad. Pero para otros usuarios el cambio puede haber roto una parte esencial de la aplicación.

Las pruebas automatizadas permiten convertir algunos de esos requisitos de accesibilidad en condiciones verificables. En lugar de confiar únicamente en que nadie elimine accidentalmente un comportamiento accesible, podemos hacer que el propio proyecto compruebe su existencia.

Automatizar no significa automatizarlo todo

La accesibilidad no puede reducirse a obtener un informe sin errores de una herramienta automática.

Una máquina puede comprobar determinadas propiedades del código y del documento. Puede encontrar ciertos usos incorrectos de ARIA, detectar algunos problemas de contraste, analizar etiquetas o identificar errores en la estructura HTML. También podemos escribir nuestras propias pruebas para comprobar el comportamiento de componentes concretos.

Pero existen preguntas mucho más difíciles.

¿Tiene sentido el orden de lectura? ¿Es comprensible el texto alternativo de una imagen dentro de su contexto? ¿Resulta sencillo completar una tarea utilizando un lector de pantalla? ¿Es predecible la gestión del foco? ¿Puede una persona comprender un mensaje de error y recuperarse de él?

No todas estas cuestiones pueden resolverse observando el DOM y aplicando un conjunto de reglas.

La automatización, por tanto, no debería entenderse como un sustituto de las pruebas de accesibilidad realizadas por personas. Es una capa adicional dentro de una estrategia más amplia.

Su ventaja consiste precisamente en encargarse de las comprobaciones repetibles para que el tiempo humano pueda dedicarse a aquello que exige interpretación, experiencia y contexto.

Probar resultados en lugar de implementaciones

Una buena prueba automatizada debería sobrevivir, dentro de lo razonable, a los cambios internos del software.
Las pruebas deberían concentrarse en el resultado esperado y no en los detalles de implementación.

Supongamos que tenemos un componente que muestra un diálogo. Desde el punto de vista de quien utiliza la interfaz, lo importante no es qué funciones internas se ejecutan ni qué variables cambian de valor. Lo que importa es que el diálogo pueda abrirse con el teclado, que el foco termine donde corresponde, que pueda cerrarse y que, al hacerlo, el usuario pueda continuar desde una posición coherente.

Una prueba demasiado vinculada a la implementación puede romperse cada vez que refactorizamos el componente, aunque su comportamiento siga siendo correcto. Cuando esto ocurre con frecuencia, las pruebas empiezan a percibirse como un obstáculo. Finalmente alguien las desactiva o las elimina.

Una prueba centrada en el comportamiento expresa algo diferente: mientras esta funcionalidad exista, esta propiedad debe seguir cumpliéndose.

En accesibilidad, esa diferencia es particularmente valiosa porque transforma ciertos requisitos en parte del contrato del componente.

El teclado como parte de las pruebas

El teclado es una de las herramientas más sencillas para comenzar a evaluar la accesibilidad de una interfaz.

Podemos recorrer una página utilizando la tecla Tab, comprobar si alcanzamos los controles interactivos, observar si el foco resulta visible y verificar si podemos realizar una tarea sin recurrir al ratón.

Una parte de ese comportamiento también puede incorporarse a las pruebas automatizadas.

Un diálogo puede tener una prueba que compruebe que Escape permite cerrarlo. Un menú puede verificar el funcionamiento de las teclas de dirección. Un componente de pestañas puede comprobar que el foco se desplaza de acuerdo con el patrón de interacción previsto.

Esto resulta especialmente interesante porque la accesibilidad deja de estar asociada únicamente al marcado HTML.

Un componente puede utilizar atributos ARIA aparentemente correctos y seguir siendo inaccesible si su comportamiento con el teclado es incorrecto. La accesibilidad de una interfaz dinámica depende tanto de la información que exponemos como de las interacciones que permitimos realizar.

Las pruebas de integración son especialmente adecuadas para muchas de estas comprobaciones, ya que el foco y la interacción suelen atravesar los límites de un único componente.

Pruebas unitarias y pruebas de integración

No todas las pruebas de accesibilidad tienen que ejecutarse al mismo nivel.

Una prueba unitaria puede comprobar una pieza aislada del sistema. Por ejemplo, que determinada propiedad proporcionada a un componente termine convirtiéndose en el nombre accesible de un botón.

Este tipo de prueba es rápida y permite verificar problemas concretos.

Las pruebas de integración permiten observar un escenario más amplio. Podemos cargar una interfaz, simular una interacción con el teclado y comprobar qué elemento recibe el foco después de una determinada acción.

Las pruebas de extremo a extremo llevan esta idea todavía más lejos, reproduciendo recorridos próximos a los de una persona que utiliza la aplicación.

No existe un único nivel correcto para probar la accesibilidad. La elección depende de aquello que queremos garantizar.

Si nos interesa comprobar que una API transmite correctamente determinada información de accesibilidad, una prueba unitaria puede ser suficiente. Si queremos saber qué sucede con el foco después de abrir y cerrar varios componentes, necesitaremos observar una porción mayor de la aplicación.

Incorporar motores de accesibilidad

Además de escribir pruebas específicas para nuestros componentes, podemos incorporar motores especializados en detectar automáticamente problemas de accesibilidad.

Uno de los más conocidos es axe-core, desarrollado por Deque. Puede integrarse con distintos entornos de pruebas para analizar un componente, una página o un estado determinado de la aplicación.

La idea es sencilla. La prueba presenta una interfaz al motor de accesibilidad, ejecuta el análisis y comprueba los resultados obtenidos. Si aparecen determinadas infracciones, la prueba puede fallar.

Esto permite trasladar algunas comprobaciones al mismo lugar en el que ya verificamos el resto del software.

En lugar de esperar a una auditoría posterior, una modificación que introduzca ciertos errores puede provocar un fallo durante la integración continua. El problema aparece entonces mucho más cerca del momento en que fue introducido.

Esta proximidad tiene una ventaja práctica considerable. Corregir un error cuando todavía estamos trabajando en el componente suele ser más sencillo que descubrirlo semanas después, cuando el código ya se encuentra integrado con otras partes del sistema.

Probar los estados, no solamente las páginas

Las aplicaciones web modernas cambian constantemente de estado. Un menú cerrado no contiene necesariamente los mismos elementos visibles que un menú abierto. Un diálogo puede no existir en el DOM hasta que alguien pulsa un botón. Un formulario puede mostrar mensajes adicionales después de una validación. Un acordeón oculta información hasta que se expande.

Todo esto plantea un problema para las herramientas automáticas: solo pueden analizar aquello que existe en el estado que les presentamos.
Ejecutar un análisis de accesibilidad inmediatamente después de cargar una página puede dejar fuera una parte considerable de la interfaz.

Por esta razón las pruebas automáticas deberían recorrer los estados significativos.

Podemos analizar la página inicialmente, abrir después un diálogo y volver a analizarla. Podemos desplegar un menú, provocar los errores de un formulario o mostrar contenido que inicialmente estaba oculto.

La unidad de accesibilidad que nos interesa comprobar no siempre es la página. En una aplicación dinámica, muchas veces es el estado de la interfaz.

Accesibilidad dentro de la integración continua

Cuando estas pruebas forman parte de la ejecución habitual del proyecto, la accesibilidad entra también en el proceso de integración continua.

Una auditoría periódica nos dice qué problemas existen en un momento determinado. Una prueba automática puede impedir que ciertos problemas conocidos vuelvan a introducirse.

La diferencia es parecida a la que existe entre inspeccionar periódicamente si una puerta permanece cerrada e instalar un mecanismo que avise cada vez que alguien la deja abierta.

La segunda opción tampoco garantiza que el edificio sea seguro. Pero convierte una condición concreta en algo que se vigila continuamente.

Con la accesibilidad podemos hacer lo mismo. No podremos automatizar toda la experiencia de una persona, pero sí establecer determinadas condiciones que el software no debería incumplir.

El peligro de confiar demasiado en el resultado

Existe una consecuencia incómoda al automatizar la accesibilidad que consiste en que podemos empezar a confiar demasiado en aquello que hemos automatizado.

Una batería de pruebas sin errores no demuestra que un producto sea accesible. Más bien demuestra que ha superado las comprobaciones que hemos decidido ejecutar.

Las herramientas automáticas trabajan con reglas que pueden evaluarse mediante software. La experiencia de una persona utilizando una interfaz es considerablemente más compleja. Un sitio puede superar todas las comprobaciones automáticas y continuar presentando obstáculos importantes. Por esta razón las pruebas manuales siguen siendo necesarias.

Utilizar únicamente el teclado, probar con lectores de pantalla, comprobar diferentes niveles de ampliación, observar el comportamiento en dispositivos móviles y estudiar la experiencia con distintas tecnologías de apoyo permiten encontrar problemas que difícilmente aparecerán en una comprobación automática.

Además de todo esto deberíamos probar con personas.

Se puede comprobar técnicamente que un componente sigue un patrón accesible y descubrir después que resulta confuso durante una tarea real. Cumplimiento técnico y usabilidad están relacionados, pero no son equivalentes.

Automatizar para reservar tiempo para las personas

El objetivo final de automatizar las pruebas de accesibilidad no debería ser eliminar la intervención humana, sino utilizarla mejor.

Hay comprobaciones que una máquina puede repetir cientos de veces con un coste muy pequeño. No tiene demasiado sentido pedir a una persona que las realice manualmente en cada modificación si podemos convertirlas en pruebas fiables.

Ese tiempo puede dedicarse a cuestiones que necesitan criterio humano.

La automatización también proporciona una memoria que los equipos de desarrollo no siempre tienen. Las personas cambian de proyecto, los componentes evolucionan y las decisiones tomadas meses atrás pueden olvidarse. Una prueba permanece junto al código recordando que determinado comportamiento no es accidental.

Si alguien implementó correctamente la gestión del foco de un diálogo, una prueba puede conservar esa decisión mucho después de que se haya olvidado la conversación que la originó.

La accesibilidad como propiedad del software

Cuando escribimos una prueba para una característica de accesibilidad estamos diciendo que ese comportamiento forma parte del producto.
No es una mejora opcional que comprobaremos al final. No es una característica externa al código. Es una condición que esperamos que siga siendo cierta después de cada modificación.

La automatización no puede decirnos que una aplicación es accesible. Tampoco puede sustituir a una persona utilizando un lector de pantalla, navegando con el teclado o intentando completar una tarea real.

Lo que si puede hacer es impedir que olvidemos automáticamente algunas de las cosas que ya habíamos aprendido a hacer bien.

Una estrategia madura de accesibilidad combina esas capas. Automatiza aquello que puede expresarse mediante reglas y comportamientos verificables, utiliza pruebas manuales para explorar lo que necesita interpretación y recurre a personas con discapacidad para conocer la experiencia que ningún conjunto de aserciones puede reproducir.

Las pruebas automatizadas no son el destino de la accesibilidad. Son una forma de evitar que, mientras avanzamos, deshagamos parte del camino recorrido.

ColorSym: un estándar abierto para identificar colores de forma accesible

Dentro de las barreras de accesibilidad más comunes que aparecen en las diversas páginas web e interfaces digitales está la de la dependencia exclusiva del color para transmitir información.

Cuando un gráfico distingue categorías únicamente mediante colores, cuando un tablero de juego identifica sus piezas por el color o cuando una interfaz utiliza el rojo y el verde como única referencia visual, una parte importante de la población encuentra dificultades para interpretar esa información.

ColorSym nace precisamente para resolver este problema.

El problema de depender únicamente del color

Se estima que alrededor del 5 % de la población mundial presenta algún tipo de deficiencia en la visión del color. Esto supone aproximadamente 300 millones de personas. En el caso de los hombres, la proporción ronda uno de cada doce. En las mujeres es menos frecuente, aproximadamente una de cada doscientas.

Aunque las Pautas de Accesibilidad para el Contenido Web (WCAG) llevan años indicando que el color no debe ser el único medio para transmitir información, en la práctica sigue siendo una situación muy habitual. Formularios que marcan errores únicamente en rojo, mapas con leyendas exclusivamente cromáticas, diagramas, interfaces o productos físicos continúan utilizando el color como único identificador.

La solución habitual consiste en añadir texto, iconos o patrones, pero no existe un sistema universal que permita representar los colores de forma consistente.

Qué es ColorSym

ColorSym es un proyecto de código abierto que propone un sistema de símbolos para representar colores de forma que las personas con ceguera al color puedan distinguir entre esos elementos en los que el color es necesario para entender su significado.

Cada color dispone de un símbolo propio que puede acompañar al color visual. De esta forma, una persona que no pueda distinguir correctamente determinados colores sigue siendo capaz de identificarlos mediante el símbolo asociado.

Este proyecto no pretende sustituir al color, sino complementarlo. Esta aproximación resulta especialmente interesante porque puede utilizarse tanto en soportes digitales como impresos sin modificar la apariencia general del diseño.

Un sistema basado en reglas simples

Uno de los aspectos más interesantes de ColorSym es que no asigna símbolos arbitrarios.

El sistema parte de tres símbolos básicos correspondientes a los colores primarios. A partir de ellos se generan el resto de colores mediante combinaciones visuales de los símbolos originales.

Por ejemplo, el símbolo del naranja combina los elementos que representan al rojo y al amarillo. El verde combina los correspondientes al amarillo y al azul. El mismo principio se aplica al resto de colores compuestos.

Este enfoque hace que el sistema resulte mucho más fácil de aprender que un conjunto de iconos independientes.

Además, los símbolos han sido diseñados para ser reconocibles independientemente de su orientación, una característica especialmente útil en aplicaciones donde los elementos pueden rotarse, como ocurre en juegos de mesa o determinadas interfaces.

Un proyecto pensado para ser reutilizado

ColorSym se distribuye como proyecto abierto. Los símbolos pueden utilizarse tanto en proyectos comerciales como personales, y además se ofrece una tipografía específica que permite escribir los símbolos directamente desde el teclado.

Incluso las combinaciones de colores funcionan mediante ligaduras tipográficas: al escribir los identificadores de dos colores primarios, la fuente genera automáticamente el símbolo correspondiente al color resultante.

El proyecto también anima a crear nuevas variantes tipográficas manteniendo el mismo sistema de símbolos, favoreciendo así su adopción en distintos contextos gráficos.

Aunque el proyecto nació en el ámbito de los juegos de mesa, su utilidad va mucho más allá. Puede incorporarse en aplicaciones móviles y de escritorio para complementar estados codificados mediante colores, en gráficos y visualizaciones de datos, en señalización, en material educativo, en envases de productos o incluso en sistemas de clasificación documental. En todos estos casos el objetivo es el mismo: evitar que el significado dependa exclusivamente de la percepción del color.

Este planteamiento coincide con una de las recomendaciones fundamentales de las WCAG, que establecen que la información nunca debería comunicarse únicamente mediante diferencias cromáticas.

A11yConf 2026 abre su convocatoria de propuestas para charlas y talleres sobre accesibilidad digital

La organización de A11yConf 2026 ha abierto el plazo para presentar propuestas de participación en la próxima edición de la conferencia, que se celebrará el sábado 28 de noviembre de 2026 en Zaragoza.

La convocatoria está dirigida a personas interesadas en compartir conocimientos, proyectos, iniciativas y experiencias relacionadas con la accesibilidad digital. Las propuestas podrán enviarse hasta las 23:59 del 16 de agosto de 2026 mediante el formulario disponible en la web oficial de A11yConf 2026.

Charlas y talleres sobre accesibilidad digital

El programa de la conferencia se distribuirá en dos espacios simultáneos dedicados a charlas y un tercer espacio destinado a talleres.

Las charlas tendrán una duración aproximada de 45 minutos. Los talleres podrán presentarse en dos modalidades: un formato breve de alrededor de 60 minutos y otro más extenso de aproximadamente 90 minutos.

La organización busca propuestas técnicas relacionadas con el diseño, la programación y el uso de la tecnología, así como contenidos centrados en otras áreas vinculadas con la accesibilidad digital.

También se valorarán iniciativas, proyectos y experiencias que contribuyan a sensibilizar sobre la importancia de la accesibilidad y a promover la creación de productos, servicios y entornos digitales que puedan ser utilizados por el mayor número posible de personas.

Una convocatoria abierta a nuevos perfiles

No es necesario contar con experiencia previa como ponente para participar en la convocatoria. A11yConf 2026 dispone de un programa de mentoría destinado a quienes necesiten apoyo para desarrollar su idea, estructurar la propuesta o preparar la presentación.

Las personas interesadas en recibir este acompañamiento podrán indicarlo en el formulario de participación. La iniciativa pretende facilitar la incorporación de nuevas voces y ampliar la diversidad de experiencias y conocimientos presentes en la conferencia.

Las propuestas seleccionadas deberán presentarse presencialmente durante el evento. La organización cubrirá los gastos de desplazamiento y alojamiento de las personas elegidas para participar como ponentes.

Introducción a Javascript

Cuando abrimos una página web en el navegador, éste interpreta el código HTML para entender qué contenido hay y qué significa cada parte. Después aplica el CSS para definir el aspecto visual de ese contenido. Pero una página web moderna no solo necesita estructura y presentación: en muchos casos también necesita comportamiento, lógica e interacción. Ahí es donde entra JavaScript.

JavaScript es el lenguaje que permite que una página web responda a acciones del usuario, modifique contenidos, valide formularios, cargue información sin recargar toda la página o cambie el estado de distintos elementos de la interfaz. Es, por tanto, la parte de la Web que aporta funcionalidad y dinamismo.

Qué es JavaScript

JavaScript es un lenguaje de programación. A diferencia de HTML y CSS, que no son lenguajes de programación, Javascript sí puede ejecutar comandos y funciones de lógica. Esto no implica que Javascript no tenga que relacionarse con HTML o CSS. Con HTML describimos el contenido y su estructura. Con CSS definimos la presentación visual. Con JavaScript programamos el comportamiento de la página.

Dónde se puede usar Javascript

Aunque mucha gente identifica JavaScript solo con el navegador, el lenguaje también se puede utilizar fuera de la Web en otros entornos como scripts en la Terminal de Linux o MacOçS, como lenguaje de programación para servidores con NodeJS o para programar servicios para la Nube.

El estándar del lenguaje se denomina ECMAScript, y JavaScript es su implementación más conocida en la actualidad.

Ejemplo básico en JavaScript

A continuación tenemos un ejemplo de una página HTML con un botón y un pequeño fragmento de JavaScript:

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Mi primera página con JavaScript</title>
</head>
<body>
<h1>Mi primera página con JavaScript</h1>
<p id="mensaje">Todavía no ha pasado nada.</p>
<button id="boton">Pulsa aquí</button>

<script>
document.getElementById("boton").addEventListener("click", function () {
document.getElementById("mensaje").textContent = "Has pulsado el botón.";
});
</script>
</body>
</html>

Si guardamos ese contenido en un fichero con extensión .html y lo abrimos con el navegador, veremos una página con un botón. Al pulsarlo, el texto del párrafo cambiará.

Ese cambio no lo hace HTML ni lo hace CSS. Lo hace JavaScript.

Qué está ocurriendo en el ejemplo

Aunque a primera vista pueda parecer mucho código, en realidad están pasando pocas cosas.

Primero tenemos este párrafo:

<p id="mensaje">Todavía no ha pasado nada.</p>

Ese párrafo tiene un atributo id con el valor mensaje. Ese identificador nos permite localizar el elemento desde JavaScript.

Después tenemos este botón:

<button id="boton">Pulsa aquí</button>

También tiene un id, en este caso boton.

Y por último aparece el bloque script:

<script>
document.getElementById("boton").addEventListener("click", function () {
document.getElementById("mensaje").textContent = "Has pulsado el botón.";
});
</script>

Ese bloque contiene código JavaScript que el navegador ejecuta. La instrucción busca el botón, escucha el evento de pulsación (click) y, cuando ese evento ocurre, modifica el texto del párrafo.

La etiqueta <script>

La forma más habitual de incluir JavaScript en una página HTML es mediante la etiqueta <script>.

Puede escribirse directamente dentro del propio documento HTML:

<script>
console.log("Hola desde JavaScript");
</script>

O bien enlazarse desde un fichero externo:

<script src="app.js"></script>

En la práctica, cuando el código crece, lo normal es utilizar un fichero independiente. Esto facilita el mantenimiento, permite reutilizar código y evita mezclar demasiadas responsabilidades en el HTML.

JavaScript y el DOM

Cuando JavaScript trabaja con una página HTML, normalmente no “ve” el fichero como texto plano, sino como una estructura interna que el navegador ha construido en memoria.

A esa representación se la suele llamar DOM (Document Object Model).

Utilizando el DOM, JavaScript puede realizar diversas funciones como buscar y manipular elementos de la página, añadir y eliminar elementos, reaccionar a eventos provocados por el usuario o por el navegador…

JavaScript no sustituye a HTML

Una idea importante al empezar es que JavaScript no debería utilizarse para suplir una mala estructura HTML.

Primero conviene tener un documento HTML bien organizado y semántico. Después CSS se ocupa de la presentación. Y finalmente JavaScript añade comportamiento.

Si se invierte ese orden, es fácil terminar con páginas difíciles de mantener, menos accesibles y más frágiles.

En artículos anteriores indicamos que HTML describe contenido y CSS describe presentación. Siguiendo esa idea de separar contenido, diseño y funcionalidad, Javascript debe añadir funcionalidad sin romper la semántica del documento. Esta separación de responsabilidades hace que la página sea más clara, con un mejor mantenimiento y más robusta.

JavaScript no debe ser intrusivo ni imprescindible

Aunque JavaScript aporta mucha potencia a una página web, conviene usarlo con cierta prudencia.

Una mala práctica bastante común consiste en construir páginas que dependen completamente de JavaScript para funcionar, incluso en tareas básicas como mostrar contenido, seguir enlaces o enviar un formulario. Cuando esto ocurre, la página se vuelve dependiente de Javascript y, en muchos casos, menos accesible.

Lo apropiado es que HTML proporcione una base sólida por sí mismo. Es decir, que la estructura del documento, los enlaces, los textos y la información principal existan ya en el marcado. Después, JavaScript puede enriquecer esa base con comportamiento adicional: validar datos en el navegador, mostrar u ocultar partes de la interfaz, actualizar contenidos o responder a acciones del usuario.

Con esto se mantiene la idea de que JavaScript debería mejorar la experiencia, no convertirse en un obstáculo.

También conviene evitar un uso intrusivo del lenguaje. Por ejemplo, no es buena idea abrir ventanas inesperadas, cambiar el foco sin necesidad, alterar el contenido de manera brusca sin avisar o interceptar comportamientos normales del navegador si no hay un motivo claro. Todas esas prácticas pueden desorientar a muchas personas usuarias y hacer que la navegación resulte confusa.

Introducción a CSS

Cuando abrimos una página web en el navegador, éste interpreta el código HTML para entender qué contenido hay y qué significa cada parte (títulos, párrafos, enlaces, formularios, etc.).

Además de estructura y semántica, una página necesita presentacióny estilo visual (tipografías, tamaños, colores, márgenes, alineación, distribución en columnas, etc).

En los artículos sobre HTML se ha hablado de contenido, semántica y estructura pero nunca hablamos de aspecto visual o diseño. Esto se debe a que HTML, en las versiones más modernas y responsables con la accesibilidad, ha cedido toda la responsabilidad de definir el aspecto visual del contenido a la parte CSS de una página web.

Qué es CSS

CSS son las siglas de Cascading Style Sheets (Hojas de estilo en cascada).

Al igual que ocurre con HTML, CSS no es un lenguaje de programación. No ejecuta lógica como lo haría JavaScript; en su lugar, define reglas de estilo que el navegador aplica sobre los elementos HTML para controlar cómo se muestran en la pantalla.

La idea fundamental es separar responsabilidades entre las distintas partes de una página web. El código HTML describe el contenido y su estructura. El código CSS describe el aspecto visual y parte del comportamiento de presentación (por ejemplo, el diseño adaptable o ciertas animaciones). Por último, el código Javascript describe la funcionalidad y el dinamismo de la página.

Ejemplo básico en CSS

Un ejemplo típico es tener un fichero HTML y, aparte, un fichero CSS enlazado. Por ejemplo, un HTML clásico es:

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Mi primera página con CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Mi primera página</h1>
<p>Este es un párrafo con información.</p>
<a href="https://programaraciegas.net">Visitar el blog</a>
</body>
</html>

Y el contenido del fichero styles.css podría ser:

body {
font-family: system-ui, sans-serif;
line-height: 1.5;
}

h1 {
font-size: 2rem;
}

a {
text-decoration: underline;
}

Si guardamos ambos ficheros en la misma carpeta y abrimos el HTML en el navegador, veremos que el contenido es el mismo, pero con el aspecto definido por las reglas CSS.

Por qué estilos en cascada

El término cascading (en cascada) tiene una razón por la forma de aplicarse los estilos en un contenido. Cuando varias reglas podrían aplicarse al mismo elemento, CSS define un sistema para resolver conflictos (origen, orden, especificidad, importancia). 

Partes de una regla CSS

La unidad básica de CSS es la regla (a veces llamada ruleset). Una regla se compone de:

• Un selector, que indica a qué elementos se aplica.
• Un bloque de declaraciones, que indica qué propiedades se aplican y con qué valores.

Veamos un ejemplo simple:

p {
font-size: 1rem;
margin-bottom: 1rem;
}

En este caso:
• p es el selector: selecciona todos los párrafos.
• Dentro de { … } hay declaraciones.
• Cada declaración es un par propiedad: valor; como font-size: 1rem;.

Cómo se aplica CSS a una página web

Hay tres formas habituales de aplicar CSS:

Hoja de estilo externa

Es la forma más común y la recomendada por accesibilidad. Se enlaza desde el <head> de la página:

<link rel="stylesheet" href="styles.css">

Entre las ventajas encontramos la separación del diseño del contenido y permite reutilizar estilos en muchas páginas.

Estilos internos

Se escriben dentro de un bloque <style> en el <head>:

<style>
p { line-height: 1.6; }
</style>

Esto es útil para ejemplos o páginas muy pequeñas, pero no es reutilizable para otras páginas.

Estilos en línea

Se escriben directamente en el atributo style de un elemento del <body>: dentro de la estructura de contenidos de la página.

<p style="line-height: 1.6;">Texto</p>

Aunque este estilo se aplica al contenido, es la opción menos recomendable porque mezcla contenido y presentación y complica el mantenimiento de la página y su estructura.

Los selectores CSS

El selector es la condición que decide qué elementos reciben una regla. 
Los más utilizados son:

Selector por etiqueta

Afecta a todos los elementos de ese tipo:

p { ... }
h1 { ... }

Selector por clase

Afecta a elementos que tengan class=»…»:

.destacado { font-weight: bold; }

Y en HTML:

<p class="destacado">Texto importante</p>

Selector por id

Afecta a un único elemento con id=»…»:

#cabecera { ... }

En HTML:

<header id="cabecera">...</header>

En la práctica, para estilos suele preferirse clases antes que abusar de id, porque son más reutilizables en otros contenidos o componentes.

La cascada: qué pasa cuando hay conflicto

Es habitual que varias reglas intenten aplicar estilos al mismo elemento. CSS resuelve esto con la aplicación en cascada: el navegador decide qué declaración gana según el origen y el orden, y si hace falta entra en juego la especificidad del selector. 

Un ejemplo típico que nos podemos encontrar es:

p { color: black; }
.destacado { color: blue; }

Si un párrafo tiene class=»destacado», el color será azul porque .destacado es más específico que p.

La cascada es una de las razones por las que, al empezar con CSS, a veces parece que no se aplique correctamente a algunos contenidos. normalmente sí funciona, pero otra regla está ganando en prevalencia de la cascada.

Accesibilidad y CSS

CSS puede mejorar mucho la experiencia de navegación y la accesibilidad presente en la página web o romperla con facilidad. Un mal CSS es responsable de estas barreras de accesibilidad:

  • Contraste de color insuficiente entre texto y fondo. 
  • Eliminar el foco del teclado por estética. Evita hacer outline: none; sin ofrecer una alternativa visible.
  • No respetar preferencias del usuario, como reducir animaciones con prefers-reduced-motion. 
  • Uso de tipografía ilegible o no adaptable a las necesidades del usuario.

Accesibilidad en los videos de la administración y las empresas gracias a la IA

La accesibilidad audiovisual ha dejado de ser un proyecto excepcional reservado a grandes presupuestos y tiempos infinitos. La combinación de automatización, producción en la nube y flujos de trabajo estandarizados está cambiando la economía de los subtítulos, las transcripciones y las audiodescripciones, reduciendo de forma drástica el coste económico por minuto y, sobre todo, el tiempo necesario para hacer que un video o presentación multimedia sea completamente accesible.
En este nuevo contexto, la excusa de que no es asumible desde el punto de vista económico pierde fuerza, porque el mercado ya ofrece modelos operativos diseñados precisamente para industrializar la accesibilidad sin sacrificar la calidad.

Este cambio viene de la mano de la Inteligencia Artificial (IA) y las nuevas oportunidades de automatización que ofrece a empresas y profesionales.

Este cambio no es únicamente tecnológico, es también regulatorio y reputacional. El Acta Europea de Accesibilidad establece estándares obligatorios para garantizar la accesibilidad de productos y servicios y traslada a empresas privadas y entidades públicas una responsabilidad más clara en la eliminación de barreras.
Según las WCAG para que un contenido multimedia sea accesible debe incorporar, como mínimo, audiodescripciones, subtítulos y transcripciones, y hacerlo de forma consistente en volumen y en el tiempo.

El problema, hasta hace poco, era que hacer accesible un vídeo implicaba un esfuerzo grande en tareas especializadas que van mucho más allá de poner subtítulos. En audiodescripción se requiere detectar silencios y duraciones, escribir un guion específico, rehacer locuciones cuando procede, seleccionar tomas válidas y montar el resultado final. En subtitulado de tipo closed captions es necesario identificar personajes, transcribir diálogos y locuciones, describir músicas y sonidos relevantes y controlar métricas como caracteres por línea y caracteres por segundo para asegurar legibilidad y sincronización. Además, la accesibilidad moderna tiende a incorporar transcripciones navegables, capítulos y artefactos en diferentes formatos listos para publicación en múltiples plataformas. Cuando todo esto se aborda artesanalmente, cada minuto adicional de video arrastra el mismo esfuerzo y el mismo coste provocando que el proceso de hacer accesible un contenido multimedia fuese económicamente más caro.

La automatización para la accesibilidad

La automatización orientada a accesibilidad marca un punto de inflexión en las oportunidades de negocio y de la situación legal sobre el concepto de adaptaciones razonables para la accesibilidad. Una producción multimedia se puede convertir en un contenido accesible generando variantes accesibles de forma automatizada, supervisada y autónoma, sin exigir conocimientos de edición de vídeo al equipo que produce el contenido. Esto permite producir en masa en la nube, obtener distintos archivos y formatos, y resolver de forma práctica un problema frecuente.

Automatización con calidad

Pero la automatización no elimina la exigencia de calidad. En accesibilidad, la calidad no es un lujo, es un requisito funcional. Un subtítulo mal segmentado o una audiodescripción imprecisa no sólo incumple criterios, también compromete la comprensión y la experiencia de usuario. Por eso resulta especialmente relevante el modelo de compañías como LViS Vally, que combinan automatización con una metodología de revisión humana en dos fases para garantizar que los elementos accesibles sean precisos, claros, estén sincronizados y sean plenamente comprensibles para cualquier persona. Ese componente humano, incorporado como control de calidad estructural y no como corrección ocasional, es el puente entre la eficiencia de la producción automática y la fiabilidad que requieren contenidos institucionales, educativos, formativos o corporativos.

La excusa del coste económico ya no es válida. Empresas como LViS Vally ofrecen tarifas individuales de 40 euros por hacer accesible un minuto de contenido de video. Esos precios debían ser multiplicados por 20 o por 100 hace un par de años.

Nuevas oportunidades de negocio en la accesibilidad gracias a la IA

Desde la perspectiva de negocio, la discusión también ha cambiado. La accesibilidad ya no compite sólo por presupuesto, compite por el riesgo y la oportunidad. El incumplimiento puede traducirse en sanciones, reclamaciones o deterioro reputacional, mientras que la accesibilidad bien ejecutada mejora la transparencia, amplía la participación y refuerza la percepción de modernidad y responsabilidad social. Además, la reutilización del contenido y la mejora en difusión y posicionamiento son efectos colaterales habituales cuando se dispone de transcripciones, textos y metadatos reutilizables. En otras palabras, la accesibilidad no es únicamente coste, es también una inversión que amplifica el valor del contenido y su alcance.

Gracias a las nuevas oportunidades que nos ofrece la Inteligencia artificial el ecosistema actual reduce el coste de oportunidad de hacer accesibles los contenidos multimedia y debilita la narrativa de que no hay presupuesto como justificación estructural. Con obligaciones normativas más próximas, con expectativas sociales crecientes y con soluciones que combinan automatización y control humano de calidad, la accesibilidad audiovisual se está convirtiendo en una práctica estándar. La pregunta relevante ya no es si una organización puede permitirse hacer accesible su contenido, sino si puede permitirse no hacerlo cuando existen vías rápidas, escalables y económicamente racionales para cumplir y, al mismo tiempo, ampliar el impacto de su comunicación.