Estilos Accesibilidad Digital

Ir a contenido Ir a Estudios, Gobernanza y organización
Logo UA
Realizar búsqueda
Menú
Otros sitios
Logo Accesibilidad Digital   Accesibilidad Digital
Accesibilidad Digital

Estilos

  • Introducción
  • Texto
  • Enlaces
  • Listas
  • Vualà

 

 

 

Introducción

Esta página es una plantilla donde se encuentran diferentes tipos de objetos de HTML como listas, párrafos, tablas, etc. Con ella, se demuestra la accesibilidad del contenido.

También se abordan varios fallos de los estilos actuales que dificulta o entorpecen la accesibilidad de los contnidos de esta última plantilla de Vaulà.

Texto

El tamaño debe definirse siempre con unidades de medida relativas como em. Si utilizamos pt o px, los elementos no se verán igual en pantallas con diferentes configuraciones, como en las pantallas con resolución retina u usuarios con dificultades de lectura que modifican los estilos para adaptarlos a sus necesidades.

Esta plantilla especifica el tamaño del texto dentro de la clase .contenido con 1.2em o lo equivalente a 14pt. El texto se formatea alineado a la izquierda por defecto y con un interlineado de 1.5em, mientras que la separación entre párrafos es de 1em por arriba y otro 1em por abajo.

Enlaces

A los enlaces dentro del contenido, como Real Decreto de Accesibilidad, se les ha puesto el text-decoration: underline, debido a que la diferencia de color es muy sutil y cuesta mucho percatarse de que es un enlace.

Listas

En las listas, como en los párrafos, se ha cambiado el interlineado y el margen entre los elementos de una lista.

Listas de viñetas

Este es un ejeplo de lista de viñetas normal que se introduce en Vualà:

  • Elemento 1
  • Elemento 2
  • Elemento 3
Listas ordenadas

Esta es una lista de ejemplo ordenada que introduce por defecto Vualà:

  1. Elemento 1
  2. Elemento 2
  3. Elemento 3

Vualà

Columnas

Cuando se inserta la plantilla de Vualá, dos columnas, derecha como ésta página, ocurren dos cosas:

  1. Al div superior se le pone la clase columnas que le añade un margen a la derecha que en móviles hace que el contenido pierda mucho espacio y tengamos un buen huco en blanco sin uso. En escritorio no se nota, pero en móviles no debería introducir ese margen.
    1. Se distribuyen las columnas con las clases col-sm-3 y col-sm-9. Y la segunda es demasiado grande y hace que se incremente el número de carácteres por línea.
      1. Las normas de accesibilidad asconsejan que los bloques de contenido no tengan más de 80 carácteres de promedio por línea. Ya que dificulta la comprensión del texto.
      2. En este caso, con el tamaño definido en esta hoja de estilo, para cumplir ese ratio habría que poner col-sm-7 y no pasar de ahí.

Y entonces, ¿cómo reorganizar el espacio? No es fácil, una opción sería "empujar" la primera columna a la derecha con la clase col-sm-offset-1 para que no de la sensación de que queda mucho espacio a la drecha desaprovechado.

Espaciado

Se ha añadido espaciado además del interlineado y espacio entre párrafos y listas. Más espacio entre apartados y subapartados y un margen inferior.

En algunas páginas los apartados y subapatados se marcan con una clase con ese nombre y le da otro estilo (con una línea horizontal debajo), pero al menos en mi plantilla los crea como h4 y h5 sin clase.

Esto evitará que los usuarios pongan párrafos en blanco artificiales para simular espaciado.