Las ventajas del uso de hojas de estilos en desarrollo web están clarísimas pero hoy vamos a hablar de qué nos van a ofrecer para mejorar la accesibilidad de usuarios con discapacidad a un sitio web o a una tienda online.
Introducción
Veamos una serie de características principales de las hojas de estilos que resultan relevantes para hablar de accesibilidad web y hojas de estilos:
- Separación de la parte semántica de la parte estética
- Permiten definir la parte estética de uno o varios elementos web mediante un fichero llamado hoja de estilos. Si modificamos las propiedades de la hoja de estilos, todos los elementos cambiarán deacuerdo con su especificación sin tener que cambiarlos uno por uno
1. Definición estética independiente de la parte semántica
Es muy habitual utilizar determinados elementos de HTML para destacar estéticamente componentes de la web. Los elementos semánticos HTML sólo deben ser utilizados para marcar la parte semántica y nunca por la parte estética.
Si necesitamos que un texto tenga el mismo estilo que un elemento semántico html (por ejemplo una etiqueta <h1>), debemos definir un estilo que especifique dicho aspecto.
Veamos un ejemplo
Supongamos que queremos aplicar sobre la frase «Hola mundo» un estilo estético similar al producido en una etiqueta de tipo <h1>. Para ello vamos a crear un estilo llamado destacado que fijará un tamaño del texto mayor del normal, texto en negrita y interlineado mayor al del texto por defecto.
Definimos el estilo de la siguiente manera:
{
font-size:1.3em;
line-height:1.3em;
font-weight:bold;
}
Ahora vamos a ver cómo aplicamos dicho estilo:
De esta forma el usuario observará físicamente el estilo, pero sin información semántica (ser el encabezado principal que implica el elemento <h1>) ya que no debe tenerla.
Recordemos que los elementos de tipo <h1>, <h2>, <h3>, … Deben utilizarse para marcar la estructura del documento, entonces no tiene ningún sentido utilizarlos para que el texto aparezca en negrita o sea más grande.
2. Definición estética en ficheros css
Este es un punto muy importante ya que si utilizamos hojas de estilos para definir la parte estética de nuestros sitios web o tiendas online, permitiremos que un usuario con discapacidad pueda usar su propia hoja de estilos, seleccionando los colores, tamaños y fuentes que mejor se adapten a su discapacidad.
