Errores comunes de accesibilidad en sitios web

Las grandes empresas están apostando por ofrecer sitios Web accesibles a todas las personas, independientemente de sus condiciones físicas, sensoriales, cognitivas o tecnológicas.

A la hora de diseñar y desarrollar un sitio Web debemos tener en cuenta una serie de principios y modelos marcados por el World Wide Consortium (W3C) en las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1.

Cada pauta nos indica las condiciones que debe cumplir el contenido de un sitio Web para que sea accesible por personas con diversidad funcional.

Se ha observado en diferentes análisis de accesibilidad de sitios Web un conjunto de errores que se repiten con relativa asiduidad tales como:

• Imágenes con información relevante para el usuario sin una correcta alternativa textual (alt). Se debe prestar atención a la descripción de esta alternativa textual para que los usuarios de asistentes técnicos conozcan qué representan las imágenes.
• Imágenes decorativas no marcadas como tal, deben tener la alternativa textual vacía (alt=””), utilizar el atributo WAI-ARIA aria-hidden=”true” o ser embebidas en el HTML a través del CSS.
• Los medios “tempodependientes” no proporcionan alternativas como subtítulos, audiodescripciones o
• En los formularios, las etiquetas <label> no son asociadas a su correspondiente elemento <input> mediante los atributos “for” e “id”, respectivamente y de manera explícita, es decir, colocando la etiqueta <label> sin englobar al <input>. La posición en la que se coloca la etiqueta <label> también es importante. Por ejemplo, en los “checkbox” o “radio button” la etiqueta <label> se coloca a continuación. Si esta asociación no se realiza correctamente, cuando el foco del teclado se posiciona en un campo de entrada, los asistentes técnicos no leerán la descripción de la etiqueta <label> al usuario.
• Los <inputs> sin una etiqueta visible asociada suelen no tener ninguna descripción. Para ello, se debe utilizar el atributo WAI-ARIA aria-label. Si no se hace así, los usuarios de asistentes técnicos no sabrán qué dato introducir en cada campo de entrada.
• El color se usa como único medio visual para transmitir la información. Por ejemplo, al indicar solamente con el color que hay un enlace dentro de un párrafo, personas con daltonismo o baja visión podrían tener problemas para identificar el enlace.
• El color de los textos no tiene un contraste mínimo de al menos 4,5:1 respecto al color del fondo.
• El tamaño de los textos se encuentra en medidas absolutas (px o pt), impidiendo así al usuario poder aumentar el tamaño del texto.
• Se emplean imágenes de texto como enlaces o botones. Los asistentes técnicos no pueden interpretar el texto que se encuentra en las imágenes.
• Todo el contenido del sitio Web no es accesible a través del teclado o el foco del teclado no es visible. En ocasiones, al utilizar una hoja de estilos denominada reset.css o similar para mejorar la consistencia de visualización en los diferentes navegadores, el contorneado del foco del teclado desaparece al tener la propiedad “outline” definida como “outline:none or 0;”.
• Los carruseles o sliders no pueden ser parados o pausados.
• Se utiliza el atributo “tabindex” modificando el orden coherente y significativo del foco del teclado.
• Los enlaces no tienen una descripción que identifique el propósito del elemento o es demasiada ambigua, provocando confusión en el usuario al navegar por la página a través de un asistente técnico.
• El contenido no se encuentra estructurado en encabezados siguiendo una jerarquía lineal y coherente con descripciones adecuadas. Por lo menos, cada página de un sitio Web debe tener un encabezado principal o H1 diferente que la identifique. Lo mismo ocurre con el título de la página (<title>). En muchos sitios Web todas las páginas suelen tener la misma descripción. Estructurando la página en encabezados se evita que haya grandes bloques de contenido sin un mecanismo para poder ser saltados con un asistente técnico.
• No se indica el idioma del sitio Web mediante el atributo “lang” o los cambios de idioma.
• No se informa al usuario de errores en la introducción de datos de entrada, como indicar el formato admitido en el campo de entrada o asociar el error a su correspondiente campo de entrada mediante el atributo WAI-ARIA aria-describedby.
• En ocasiones se desea ocultar información visiblemente, pero no para los usuarios de asistentes técnicos. Para ello se utilizan los atributos “display:none;” o “position:absolute, left:-9999px, top:-9999px;”. Es preferible utilizar las siguientes propiedades de CSS:

.hidden {

      border: 0;

      clip: rect(0 0 0 0);

      height: 1px;

      margin: -1px;

      overflow: hidden;

      padding: 0;

      position: absolute;

      width: 1px;

    }

• Los cambios de contenido que se producen automáticamente no son anunciados al usuario mediante los atributos WAI-ARIA correspondientes.
• Se utilizan etiquetas de HTML y atributos o roles WAI-ARIA de forma equivocada, es decir, con una funcionalidad diferente a la que han sido establecidos.

Por lo tanto, si revisamos en nuestro sitio Web estos deslices, seguramente logremos reducir en gran medida el número de errores de accesibilidad existentes, mejorando así la experiencia de usuario al navegar por el mismo.

Delia Castaño

Equipo Experiencia de Usuario MTP

Ver más historias