Accesibilidad web y tiendas online: Hojas de estilos

WebProgramacion > Blog > Accesibilidad web y tiendas online: Hojas de estilos
Autor: Dámaso Velázquez Álvarez

¿Quieres aprender más en mi canal de YouTube?

Suscríbete y no te pierdas ningún vídeo.

Accesibilidad web y tiendas online (VI): Hojas de estilos
Accesibilidad web y tiendas online (VI): Hojas de estilos

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:

  1. Separación de la parte semántica de la parte estética
  2. 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:

.destacado
{
    font-size:1.3em;
    line-height:1.3em;
    font-weight:bold;
}

Ahora vamos a ver cómo aplicamos dicho estilo:

<span class="destacado">Hola mundo!</span>

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.

Deja tu opinión

la política de privacidad que declaro haber leído.

(*) Campos necesarios. El correo electrónico no será público.