Una silueta negra de un ser humano corre hacia una forma humana multicolor en una pantalla.

La importancia de la accesibilidad de los sitios web

Cuando mucha gente oye la palabra accesibilidad, piensa en el texto "alt" y poco más. Lo cierto es que, a la hora de crear un sitio web, la accesibilidad debe tenerse en cuenta en cada paso del proceso. Según la OMS (en 2023) se calcula que 1.300 millones de personas tienen alguna discapacidad, lo que equivale a 1 de cada 6 personas. Esto significa que 1 de cada 6 personas que visitan su sitio web tiene el potencial de necesitar cambios de accesibilidad para poder leer o entender su sitio. 

Aviso importante:

A partir del 28 de junio entrará en vigor la Ley Europea de Accesibilidad, lo que significa que la mayoría de los sitios web (especialmente los de venta de bienes o servicios) deberán ser legalmente compatibles con las normas de accesibilidad basadas en el nivel AA de las WCAG 2.1. Para más información, visite Acceso nivelado. 

Los niveles de accesibilidad (WCAG)

WCAG son las siglas en inglés de Pautas de Accesibilidad al Contenido en la Web. Desarrolladas por el Consorcio World Wide Web para hacer más accesibles los contenidos digitales a las personas con discapacidad. 

  1. A (Básico) - Requisitos mínimos (por ejemplo, texto alternativo, navegación por teclado).
  2. AA (Estándar) - Recomendado para la mayoría de los sitios web (por ejemplo, contraste de colores, navegación clara).
  3. AAA (Mejorado) - El nivel más alto, pero no siempre práctico (por ejemplo, lenguaje de signos, múltiples opciones de navegación).

¿Por qué es importante la accesibilidad?

Imagina que ves una página web y no puedes leerla porque los colores son una mezcla horrible y las palabras tienen un aspecto extraño. Imagínese ahora que cada vez que visita una web tiene los mismos problemas, lo que dificultaría seriamente su capacidad para utilizar Internet. El daltonismo afecta aproximadamente a 1 de cada 12 hombres (8%) y a 1 de cada 200 mujeres. Además, en Gran Bretaña alrededor del 10% de la población padece dislexia.

Asegurarse de que su marca y su sitio web tienen colores muy contrastados significa que será mucho más fácil de leer para una parte razonable de los visitantes de su sitio. 

En lo que respecta al tipo y tamaño de letra, no existen directrices claras sobre accesibilidad. Sin embargo, como regla general, 16px o más para el cuerpo del texto es un buen punto de partida. Intente evitar los tipos de letra más sofisticados, como los de tipo script, por ejemplo Pacífico o Langosta (ejemplo siguiente) o cursiva ya que pueden ser más difíciles de leer. 

Fuentes del Pacífico y langosta

En el caso de discapacidades como la dislexia, también puede ayudar a optimizar su sitio escribiendo en voz activa en lugar de pasiva y manteniendo las frases concisas. Si puede evitarlo, evite también los párrafos interminables y la palabrería innecesaria. Utilice un texto oscuro sobre un fondo que no sea blanco, y divida el texto regularmente utilizando H2 y H3 para que los usuarios puedan ver lo que contiene el texto sin tener que leerlo entero. En el caso de los daltónicos, evite los colores verdes, rosas y rojos, ya que son los que más dificultades suelen plantear.

LEA  Cómo la optimización para motores de búsqueda y el diseño de sitios web se combinan para lograr el máximo impacto

La importancia del Alt Text

Muchos vendedores son conscientes del texto ALT (texto alternativo) desde una perspectiva SEO, y pueden utilizar el espacio para meter palabras clave para aumentar la capacidad de rastreo de la página para los robots de los motores de búsqueda. Sin embargo, no muchos tienen en cuenta que el texto alternativo está ahí para que los lectores de sitios web y de pantalla puedan leerlo y dar contexto a la página. Esto permite a las personas con velocidades de Internet lentas y a las que tienen dificultades para interpretar imágenes entender el contenido de la imagen, lo que aumenta la accesibilidad del sitio web. 

 

Mejores prácticas de Alt Text. 

La mejor forma de optimizar el texto alternativo para la accesibilidad (pero también para el SEO) es escribir una descripción clara de la imagen e incorporar la palabra clave de forma natural. Para las imágenes decorativas que no necesitan palabras clave en el texto alternativo, no las dejes en blanco. En su lugar, proporcione un "Atributo Nulo" para que los lectores de pantalla sepan que deben omitir la imagen.

Ejemplo de atributo nulo:
<img src="”insertimagetitlehere.jpg”" alt="&quot;&quot;">

 

Siempre que sea posible, es recomendable escribir un texto alternativo para las imágenes importantes. Por ejemplo, tu palabra clave es "Macbook", así que quieres escribirla en el texto alternativo, pero también necesitas que el texto alternativo tenga sentido. Tampoco debe escribir texto superfluo, su texto alternativo no debe explicar que se trata de una imagen (por ejemplo, la foto contiene la imagen contiene).

 

El texto alternativo de esta imagen debería ser: "Persona con jersey amarillo y pulseras doradas, sentada en un escritorio tecleando en Macbook"

 

Mujer con jersey amarillo teclea en un portátil sentada en un escritorio

Aplicaciones y complementos: 

Fuente dislexia abierta

Algunas personas disléxicas utilizan la extensión Disléxico abierto para cambiar la fuente de su navegador por otra diseñada específicamente para personas disléxicas. Si comprueba la compatibilidad de su sitio web con esta extensión y lo construye teniendo esto en cuenta, podrá asegurarse de que su sitio web sea lo más accesible posible para los disléxicos. 

un ejemplo de la fuente de accesibilidad del sitio web 'open dyslexic

Colourblindly y Colourcontrast.CC.

Daltónico es otra extensión de Chrome, pero esta vez simula el aspecto que puede tener su sitio web para las personas con diferentes tipos de daltonismo. Al hacer clic en los tipos de daltonismo, puede ver cómo se ve su sitio web en tiempo real. Junto con Contraste de color.cc es la combinación perfecta para asegurarse de que su sitio web y marca sea lo más accesible posible. 

LEA  Errores clásicos del sitio web que hay que evitar

una imagen de la página de inicio del sitio web del comprobador de contraste de color: texto negro sobre fondo amarillo

 

una imagen de la interfaz de la aplicación para daltónicos

 

 

Texto alt AI:

Si te cuesta escribir el texto alternativo, existen herramientas de IA que pueden ayudarte. Alttext.AI "lee" la imagen y genera un pie de foto apropiado. Asegúrate de comprobarlo dos veces y no olvides añadir tu palabra clave (lo mejor posible) por motivos de SEO. 

 

Otras formas de garantizar la accesibilidad del sitio web.

  • Haz que los elementos interactivos sean fáciles de detectar - Esto incluye asegurarse de que los enlaces sean de otro color y estén subrayados, y que los botones destaquen fácilmente sobre el fondo. Utilice herramientas como Colourcontrast.cc para comprobar la accesibilidad de los colores y asegurarse de que son compatibles. Evite combinaciones de colores como gris y amarillo o rosa y rojo.

 

  • Asegúrese de que su sitio es accesible mediante teclado - Algunas discapacidades, como la distrofia muscular, pueden dificultar el uso del ratón o los trackpads, por lo que los usuarios dependen de la navegación por teclado. Asegurarse de que se puede navegar por su sitio web con el teclado u otros dispositivos de accesibilidad es una consideración importante a la hora de desarrollar su sitio web. Utilizar el tabulador debería llevarte a cada elemento enfocable de la página web.
    • Los elementos que deben ser enfocables incluyen (pero no se limitan a): Llamada a la acción Botones, Resúmenes y controles de audio y vídeo.

 

  • Diseño para uso móvil - A algunas personas les resulta difícil utilizar un ordenador portátil, por lo que recurren a móviles o dispositivos con pantalla táctil, como iPads, para navegar por los sitios web. Asegurarse de que su sitio web tiene un diseño adaptable y está optimizado para móviles es una buena forma de hacerlo más accesible. Sobre todo teniendo en cuenta que aproximadamente 9 de cada 10 personas acceden a Internet a través de algún tipo de dispositivo móvil. 

 

  • Texto de anclaje descriptivo. También conocido como texto de enlace, el texto de anclaje es un texto en el que se puede hacer clic y que enlaza con otro lugar (normalmente otro sitio o página). Asegurarse de que es descriptivo y claro proporciona contexto a los usuarios, sobre todo a los que utilizan lectores de pantalla o tienen una velocidad de Internet lenta y no pueden hacer clic en el enlace. 

Avanzar y optimizar

Ahora tienes todas las herramientas y la información para ver lo importante que es realmente la accesibilidad de un sitio web. cuando diseñar su sitio webAdemás, si tiene en cuenta cómo pueden interactuar todos los usuarios con su sitio web, aumentará la capacidad de rastreo del sitio, aumentará la duración de la sesión y disminuirá el tiempo de rebote. Cuando se trata de accesibilidad, la perfección es casi imposible. Sin embargo, esto no significa que sea aceptable admitir la derrota ante el primer obstáculo. Optimice su sitio lo mejor posible, tenga en cuenta todo lo anterior y manténgase al día de las nuevas formas de optimizar su sitio para la accesibilidad.