Normas sobre Accesibilidad

En esta página se indican las cuestiones sobre accesibilidad que se deben en tener en cuenta de forma obligatoria para páginas web. También existe una página para normas de accesibilidad relacionadas con ficheros pdf, odt y doc.

Todo lo que se indica en esta página parte de la base de que se está usando un gestor de contenidos. Esto implica que no se consideran, por ejemplo, problemas derivados de la generación manual del documento en HTML.

Algunas cuestiones básicas:

  • No se deben introducir saltos de línea con el propósito de crear separaciones visuales en el contenido. Un error habitual de los gestores de contenido en relación a esta práctica es la generación automática de párrafos vacíos para conseguir tal efecto y por lo tanto debe evitarse.

  • Debe primar la estructura de la información y el uso de textos alternativos a los distintos elementos frente al aspecto visual de la página.

  • Tampoco se deben realizar cambios de tipo o de tamaño de letra o cambios de color del texto. De igual forma, tampoco se deben usar espacios o tabulaciones, etc.

  • Cuando se vaya a pegar texto desde otro documento se debe pegar primero en un editor o block de notas para eliminar el formato y posteriormente pegarlo en el editor de la página web.

  • No se deben usar ni tachados ni subrayados. Tampoco se debe marcar con negrita un elemento que ya tiene está destacado de otra forma, por ejemplo como un encabezado.

  • No se permite la justificación a izquierda y derecha en una página web debido a que se crean "ríos" que dificultan su lectura. Se debe justificar solo a la izquierda.

  • Se debe evitar el uso de letras mayúsculas salvo en aquellos casos que su uso sea imprescindible.

  • Se debe poder acceder a todos los contenidos usando el teclado de una forma lógica, es decir, sin ir dando saltos por el contenido de la página web.

  • La estructura global del sitio web debe seguir una estructura jerárquica clara que permita moverse por esa a través del menú y de la "miga de pan". Tanto la miga de pan como un mapa web permiten facilitar la navegación y son obligatorios.

Hay que evitar el uso de páginas muy cortas, siempre que sea posible se deben unir en una única página.

Para separar las distintas secciones de una página se deben usar cabeceras. Además tendremos apartados y párrafos. Estos elementos constituyen la estructura de la página que es usada para navegar por los usuarios invidentes y con otras discapacidades. De este modo, pueden acceder de forma más sencilla a la información que necesitan sin tener que esperar a que les lean la página completa. Por esta razón los encabezados de página se consideran elementos básicos en la navegación de un sitio web.
La estructura de una página se define a través de elementos de encabezado o título, con diferentes niveles de profundidad, permitiendo acceder rápidamente a las diferentes secciones de ésta. Estos deben verificar los siguientes aspectos:

  • La presencia de encabezados para todas las secciones que lo precisen.

  • No se deben usar encabezados por razones estéticas. Es decir, sin que tengan realmente una función de encabezado.

  • La jerarquía de encabezados debe ser correcta, es decir, no podemos usar un encabezado de nivel 3 sin tener encabezados de nivel 2. El encabezado de nivel 1 se reserva para el titulo de la página y los gestores de contenidos puede que no lo den como opción al indicar un contenido.

  • Todos los elementos de encabezado deben tener texto y englobar contenido.

  • Se deben usar únicamente letras minúsculas salvo que se escriban nombres propios u otros términos que deban usar mayúsculas.

En resumen, se deben incluir los encabezados necesarios en cada página que identifiquen las diferentes secciones que lo componen. Estos encabezados deben seguir una estructura jerárquica, según el nivel de profundidad sin que se produzcan saltos en los niveles identificados y sin incluir encabezados vacíos.

Los usuarios invidentes y con otras discapacidades se ayudan en la navegación de herramientas que les permiten mostrar un listado de todos los enlaces de una página. Por lo tanto, la descripción del enlace debe ser lo suficientemente buena para comprender su utilidad fuera del contexto. Por ejemplo no se pueden usar textos para los enlaces como “pinche aquí”, "pulse aquí" “más”, etc.

Excepcionalmente, cuando el texto del enlace no es descriptivo por sí mismo, al menos debe serlo mediante su contexto más inmediato. Se entiende por contexto inmediato aquellos elementos que un lector de pantalla puede obtener a partir del enlace como el texto de la frase, el párrafo, la celda de tabla o el elemento de lista que contiene al enlace, o bien el encabezado de la sección en la que se encuentra.

Por lo tanto, cuando un editor final de contenidos introduce un enlace se debe tener en cuenta que:

  • El texto del enlace debe ser descriptivo de su destino. Las direcciones web no son suficientemente descriptivas y pueden ser muy largas, por lo que se debe utilizar un texto que describa el destino del enlace fuera del contexto o mediante su contexto más inmediato.

  • Si el enlace está formado por una imagen, ésta debe poseer un texto alternativo que describa adecuadamente la funcionalidad del enlace en conjunción con el texto del enlace (si existe).

  • Si se desea indicar información adicional al texto del enlace y relacionada con él, ésta se debe incluir en el campo título de las propiedades del enlace junto con el propio texto del enlace, es decir, en el título se incluiría el texto del enlace propiamente dicho, y la información adicional.

  • Si el enlace se incluye para descargar un fichero se debe indicar en el título cual es el formato

Por otro lado, se ha de evitar la apertura de enlaces en nuevas ventanas del navegador dados los problemas que ello puede originar:

  • El usuario puede desorientarse, al no darse cuenta de lo que ha ocurrido.

  • La nueva ventana tendrá anulada la funcionalidad del botón "atrás".

  • El rendimiento del sistema puede verse reducido.

  • Puede confundir al usuario, en caso de que no entienda que la nueva ventana es realmente una ventana del mismo navegador que estaba usando.

  • El usuario se puede sentir confuso, puesto que los navegadores modernos bloquean en ocasiones la apertura de nuevas ventanas, lo que le puede hacer pensar que el enlace no funciona.

En caso de que dicha apertura resulte completamente necesaria, se recomienda informar de la misma. Concretamente, para las Administraciones Públicas, se considera como necesaria la apertura de una nueva ventana en los siguientes casos:

  • Enlaces a sitios web externos.

  • Enlaces a archivos adjuntos.

Desde las WCAG 2.0 la obligatoriedad de avisar de la apertura de nuevas ventanas o pestañas del navegador pasa a ser un requisito de AAA. Aunque sigue siendo una buena práctica y es muy recomendable su uso ya que mejora tanto la accesibilidad como la usabilidad de la página. En principio es suficiente con avisar por medio del título del enlace. Para ello habría que incluir dentro de las propiedades del enlace, en el campo de “título”, textos como “se abre en ventana nueva”.

Toda imagen incluida en una página web, ya sea informativa, funcional, textual, decorativa o compleja, debe proporcionar un texto alternativo que aporte la misma información o función que la imagen. El texto alternativo es la información proporcionada por los navegadores en caso de no mostrarse la imagen. Por ejemplo, los navegadores gráficos que tengan las imágenes desactivadas o no puedan mostrarlas, y los navegadores de texto, usarán el texto alternativo en su lugar. Por otra parte, los lectores de pantalla leerán en voz alta el texto alternativo de las imágenes.

Es recomendable proporcionar siempre un titulo a las imágenes.

A la hora de insertar una imagen mediante un gestor de contenidos, entre las propiedades de la misma debe existir un campo para introducir su texto alternativo.
Toda imagen, cuyo contenido muestre información necesaria para comprender el contenido de la página, debe tener definido su texto alternativo. Este texto alternativo deberá ser:

  • Una descripción del contenido de la imagen.

  • No demasiado largo.

  • Preferentemente sin abreviaturas.

En ocasiones, el editor final necesita introducir imágenes complejas a través de las cuales se transmite mucha información (gráficas, diagramas, mapas, etc), y que por lo tanto no puede ser descrita en pocas palabras. En estos casos, además de ofrecer una alternativa textual que identifique brevemente el tipo de información transmitida por la imagen, se debe proporcionar una descripción
detallada en una página aparte o en la misma página en la que se encuentra la imagen.
La descripción detallada se podrá incluir de diferentes formas:

  • Si el gestor de contenidos proporciona un campo para tal fin entonces se deberá incluir en dicho campo la URL (dirección web) de la descripción larga de la imagen. Es decir, la descripción no se debe incluir directamente en el campo, sino que la descripción se proporcionará en otra ubicación (por ejemplo, otra página) y en dicho campo se indicará la dirección web de la ubicación de dicha descripción.

  • Si el gestor de contenidos no proporciona ningún campo para indicar la descripción larga entonces dicha descripción se ha de proporcionar cerca de la imagen, por ejemplo a continuación de la misma. Además, en la alternativa textual corta se ha de indicar la ubicación de la descripción larga. Por ejemplo: “Texto de la alternativa corta (descripción detallada a continuación)”.

Las imágenes incluidas deben poseer un contraste suficiente entre los colores de fondo y primer plano. Es necesario asegurar un contraste suficiente tanto en el texto mostrado en las imágenes como en aquellos contenidos gráficos cuya información visual es necesaria para su identificación o comprensión como pueden ser los iconos, diagramas, gráficas, infografías, etc.

Por último, aquellas imágenes que simplemente sean decorativas deberán tener un texto alternativo consistente en un espacio en blanco. Igualmente, cuando la imagen es decorativa no se debe proporcionar ningún título a la imagen. Si el gestor de contenidos incluye la opción de asignar un título éste se deberá dejar en blanco.

Al igual que sucedía con las imágenes es recomendable que los ficheros que se suban tengan un peso lo más reducido posible, de modo que se facilite su descarga al usuario final.
Igualmente los formatos de documento utilizados deberán ser estándares abiertos y de forma complementaria estándares de uso generalizado. Por lo tanto se pueden usar formatos como odt, pdf, xml, csv, etc.
Si se trata de un fichero cuyo formato posee características propias de accesibilidad, como los ficheros PDF, éste debe cumplir con las pautas de accesibilidad para dicho formato y ser directamente accesible. Se puede consultar la página para normas de accesibilidad relacionadas con ficheros pdf, odt y doc.

Los ficheros adjuntos que se puedan descargar deberán disponer de un texto de enlace descriptivo del fichero que se vincula. Este texto descriptivo será normalmente el nombre o contenido principal del fichero adjunto y debe ser comprensible fuera de contexto o dentro de su contexto más inmediato.
El acceso a determinados ficheros adjuntos provoca la aparición de un plugin en el navegador o de una herramienta propia de escritorio para el manejo de ese documento, como en el caso de los ficheros PDF. Dichas interfaces son distintas a los navegadores y si se abren en la ventana actual se puede tener la sensación de haber perdido la página Web. Incluso es frecuente cerrar dicha interfaz,
pensando que se está fuera del navegador, lo que provoca la pérdida total del hilo de navegación. Por esta razón, en estos casos se recomienda que los ficheros adjuntos se abran en nueva ventana avisando convenientemente de este hecho. Puede consultarse la sección “Inclusión de enlaces” para obtener detalles de cómo hacer la advertencia de apertura en nueva ventana.

Además de un texto descriptivo del fichero, se debe incluir en el título del enlace una indicación sobre el formato del mismo junto con el texto replicado del enlace (por ejemplo: “Accesibilidad en gestores de contenidos (Fichero PDF)”. Siempre que sea posible, es recomendable añadir información complementaria que informe sobre el tamaño del fichero adjunto de forma que
los usuarios puedan decidir si desean descargar el archivo o no en base a su peso y tiempo de descarga.

Igualmente es recomendable que los enlaces a ficheros adjuntos sean diferenciables visualmente del resto.

Por último, sería recomendable proporcionar la información más relevante del fichero, o un resumen del mismo, en formato (X)HTML, de modo que los usuarios puedan acceder a la información principal sin necesidad de descargarse el fichero.

Las listas permiten identificar grupos de elementos que tienen alguna relación entre sí, lo que ayuda a comprender la estructura de las páginas o de los contenidos. Los usuarios invidentes cuentan con herramientas que les permiten navegar por el contenido de las listas de una forma estructurada y más cómoda.
Los lectores de pantalla pueden reconocer una lista e informar a los usuarios de su presencia y del número de elementos que la componen. Si no se identifican las listas los usuarios de lectores de pantalla no reconocerán dónde empieza, no sabrán los elementos que la componen, ni sabrán dónde termina.


Se distinguen tres tipos de lista:

  • Lista no ordenada: conjunto de elementos relacionados entre sí para los que no se indica un orden o secuencia determinados.

  • Lista ordenada: conjunto de elementos relacionados que se muestran siguiendo un orden determinado.

  • Lista de definición: conjunto de elementos que están formados por términos y definiciones.

En ocasiones se utilizan listados complejos en los que se desea reflejar una determinada jerarquía, resultando necesaria la inclusión de listas completas en los elementos de otra lista. Este tipo de listas se denominan listas anidadas y pueden contener cualquier tipo de lista en su interior. En este aspecto, una limitación frecuentemente existente en los gestores de contenidos es que no existe la posibilidad de anidar (mediante las funcionalidades de sangrado) listas de diferentes tipos (numeradas y no numeradas). Esto reduce el valor semántico del listado, pudiendo provocar dificultades de interpretación a determinados usuarios, por ejemplo, aquellos que hacen uso de lectores de pantalla.

Se deberá verificar manualmente que:

  • Toda enumeración de elementos se encuentra identificada como lista.

  • Las listas (y sus correspondientes listas anidadas) tienen una estructura correcta.

  • No se simulan listas mediante medios distintos a las propias funcionalidades ofrecidas por los gestores de contenidos para el marcado de listas (por ejemplo, párrafos iniciados con guiones, imágenes para simular viñetas de listas, asteriscos o números).

  • No se emplean listas con fines únicamente de presentación, por ejemplo, para dar sangría al texto.

  • Todas las listas tienen uno o más elementos de lista.

Cuando se usen dos niveles habitualmente hay que pulsar el tabulador para meter el segundo nivel dentro del primero, por ejemplo:

  • Evaluación ordinaria:
    • Parte teórica: 60%
    • Parte práctica: 40%
  • Evaluación extraordinaria:
    • Un examen teórico-práctico: 100%

Pulsando la tecla "Intro" o "Mayúsculas-Tabulador" se pasa al nivel anterior.

En una página web, las tablas sirven para mostrar información tabulada y no para dotar de presentación a los contenidos, por lo que no se deben usar tablas para maquetar. Así, las tablas de datos estructuran la información en filas y columnas describiendo una relación entre cada celda de datos con otras celdas en su misma fila y/o columna.
Uno de los requisitos principales de una tabla de datos es que cada celda de encabezado se identifique como tal. De esa forma se consigue:

  • Que los lectores de pantalla puedan asociar las celdas de datos con sus
    correspondientes encabezados.

  • Que se indique visualmente los encabezados en navegadores gráficos.

En caso de que en una tabla de datos se proporcione un título y un resumen entonces el contenido de ambos debe ser diferente y complementario y por tanto no estar duplicado.

No se permiten en ningún caso tablas con el único fin de mejorar el aspecto visual. Como por ejemplo el uso de tablas con una única columna.

En ningún caso se deben usar para producir efectos visuales, como efectos de sangrado en un párrafo de texto.

Si deseas conocer más sobre la gestión y mantenimiento de la accesibilidad, puedes consultar las siguientes guías en las que se detallan diferentes tareas a abordar por distintos perfiles implicados en la accesibilidad de los sitios web: