Conocimiento Para Potenciar Tu Sitio Web

10 Formas para volver tu página web sea accesible

10 Formas para volver tu página web sea accesible thumbnail

Cada propietario de un sitio web quiere atraer la mayor cantidad de visitantes posible. Sin embargo, pocos toman los pasos necesarios para garantizar que su sitio pueda ser utilizado por todos. Hay millones de usuarios que confían en que los sitios sean accesibles, y si no te tomas el tiempo para comprender sus necesidades, no será tenido en cuenta.

Afortunadamente, la accesibilidad no es difícil de implementar. Solo necesitas comprender los problemas subyacentes que pueden hacer que un sitio sea difícil o imposible de usar por ciertas personas. Una vez que lo hagas, puedes tomar medidas para evitar esos errores y hacer que tu sitio sea acogedor para todos los visitantes.

En este artículo, veremos qué implica realmente la accesibilidad del sitio web y por qué es tan importante. También describiremos las pautas de accesibilidad más importantes y le mostraremos cómo implementarlas en tu sitio. ¡Manos a la obra!!

Una breve introducción a la accesibilidad web 


Idealmente, todos deberían poder usar cualquier sitio web en Internet. No debería importar si tienen una condición que afecta sus capacidades o qué hardware y software necesitan usar. Este es el principio principal detrás del concepto de accesibilidad web

El hecho es que millones de usuarios de Internet tienen necesidades especiales y discapacidades que pueden dificultarles o incluso imposibilitar el uso de ciertos tipos de sitios web. Al diseñar tu sitio con estos desafíos en mente, puedes asegurarte de que sea bienvenido para la mayor cantidad de usuarios posible.

Si bien hay muchas discapacidades y condiciones que pueden afectar la forma en que las personas usan los sitios web, echemos un vistazo a algunas de las categorías más comunes de impedimentos:

Para solucionar estos problemas, muchas personas utilizan tecnologías de asistencia para navegar por Internet. Esto incluye lectores de pantalla que vocalizan el texto en cada página, software de reconocimiento de voz que convierte la voz en texto, terminales Braille e incluso teclados alternativos que se adaptan a necesidades especiales.

Como tal, es posible para casi cualquier persona navegar por la web. Además, puedes mejorar significativamente sus experiencias al diseñar tu sitio teniendo en cuenta la accesibilidad.

Cómo hacer tu sitio accesible

Con actualizaciones automáticas y fuertes defensas de seguridad, DreamPress quita la administración del servidor de tus manos para que puedas concentrarte en lo que realmente importa: la accesibilidad de tu sitio.

Por qué debe ser prioridad que tu sitio web sea accesible

Como puedes imaginar, los beneficios para el usuario de hacer que tu sitio sea accesible son enormes. Esto es algo importante que hacer simplemente desde una perspectiva humanista, ya que garantiza que no excluyas a las personas con discapacidad.

Por supuesto, mejorar la accesibilidad en tu sitio también le brinda muchos beneficios. De manera crucial, inmediatamente expande tu audiencia potencial. Las matemáticas deberían ser evidentes aquí. Si más usuarios pueden usar tu sitio, acabas de aumentar tu base de usuarios potenciales de manera exponencial. Esto, podrías ponerlo un paso por delante de los competidores que pueden no haber tomado los mismos pasos hacia la accesibilidad.

Al pensar en términos de accesibilidad, también puedes beneficiar a todos tus visitantes, no solo a aquellos que se ajustan a las categorías que enumeramos anteriormente. Muchas de las consideraciones involucradas para hacer que tu sitio sea más accesible también mejorará tu diseño general y usabilidad. Además, hará que tu sitio sea más flexible y esté “preparado para el futuro”en el camino.

Finalmente, es importante tener en cuenta que muchos países tienen leyes sobre accesibilidad web y de software. Como tal, se le puede exigir legalmente que coincida con los estándares de accesibilidad específicos. 

Afortunadamente, no estás solo. El proyecto de Iniciativa de Accesibilidad Web ha estado trabajando desde 1997 para ayudar a mejorar la accesibilidad en línea. Asegúrete de consultar las Pautas de accesibilidad al contenido web, también conocidas como WCAG, en su sitio. Estas pautas describen específicamente los pasos que puedes seguir para hacer que tu sitio sea más fácil de usar.

Del mismo modo, WordPress tiene su propio equipo Make WordPress Accessible que se centra específicamente en la plataforma. También hay innumerables otros proyectos impulsados ​​por la comunidad, como A11Y,  que proporcionan orientación y recursos para ayudarlo a crear sitios web altamente accesibles.

10 formas de hacer que tu sitio web sea accesible

Ahora veremos algunas formas en que puedes hacer que tu sitio web sea más accesible de inmediato.

Primero, debemos mencionar que una de las cosas más importantes que debes hacer es elegir el Sistema de gestión de contenido (CMS) adecuado para ejecutar tu sitio.

Cuando se trata de accesibilidad, pocos CMS pueden superar a WordPress. Como tal, haremos referencia a una serie de soluciones específicas para la plataforma WordPress  a lo largo de esta guía (aunque puedes encontrar herramientas de accesibilidad para casi cualquier CMS).

1. Asegúrate de que tu sitio sea compatible con el teclado

Este paso también es el más importante. En pocas palabras: para que un sitio web sea accesible, debe funcionar sin el uso de un mouse. Esto se debe a que muchas tecnologías de asistencia dependen de la navegación solo con teclado. Como tal, debe ser posible utilizar todas las funciones principales de tu sitio a través de un teclado y nada más. Esto incluye acceder a todas las páginas, enlaces, contenido, etc.

La forma más común de navegar usando un teclado es con la tecla Tab. Esto saltará entre las áreas de una página que puede tener “enfoque de teclado” (keyboard focus), que incluye enlaces, botones y formularios. Por lo tanto, tu objetivo debe ser garantizar que se pueda acceder a todo el contenido web y la navegación mediante Tab.

Esto es fácil de probar – solo tienes que utilizar tu propio sitio sin un mouse… Si encuentras que no puedes acceder a ciertos elementos o que la navegación es difícil, puedes identificar esos problemas y abordarlos. Para ayudarte con esto, WebAIM proporciona una guía práctica para el diseño de accesibilidad del teclado.

¿Qué es accesibilidad web?

Regularmente informamos sobre diversidad, accesibilidad y representación en la industria tecnológica. Suscríbete a nuestro boletín mensual para que no te pierdas ningún artículo.

2. Asegúrate de que todo el contenido sea fácilmente accesible

Además de hacer que tu sitio sea compatible con el teclado, también debes asegurarte de que todo el contenido de la página sea realmente accesible. Si bien esto generalmente no es un problema, puede ser un problema cuando una página contiene contenido dinámico

En resumen, el contenido es dinámico si puede cambiar sin necesidad de refrescar la página. Esto puede convertirse en un problema si el sitio no informa a las herramientas de asistencia sobre el cambio. Por ejemplo, muchos lectores de pantalla solo “leerán” el sitio tal como aparece cuando se carga por primera vez. Como tal, debe ser consciente cuando algo cambia o el usuario perderá el nuevo contenido.

Una forma de hacerlo es mediante el uso de puntos de referencia ARIA. Estas son etiquetas que agrega al contenido para definirlo claramente en la página. Puedes etiquetar el contenido dinámico como una “región en vivo”, que permite a los lectores de pantalla y dispositivos similares comprender el contenido a medida que cambia.

ARIA también es útil para hacer que la navegación sea más sencilla, ya que permite a los usuarios saltar directamente a contenido específico. De esta manera, no tendrán que pasar por cada elemento del menú solo para acceder a tu contenido principal y pueden pasar fácilmente por otras secciones con enlaces pesados. Se puede lograr el mismo efecto utilizando enlaces de salto a página principal, que son enlaces invisibles que permiten a los usuarios omitir menús. Sin embargo, ARIA tiende a ser más flexible y eficiente.

El manual Hacer que WordPress sea accesible contiene una sección sobre los puntos de referencia de ARIA que quizás deseas consultar. También vale la pena señalar que todos los temas de WordPress con la etiqueta de accesibilidad, tendrán puntos de referencia ARIA agregados de forma predeterminada.

3. Añadir texto alternativo a todas las imágenes

Al agregar imágenes a WordPress, probablemente hayas notado este campo.

Aquí, puedes ingresar el texto alternativo para una imagen. Este texto actúa como un reemplazo para la imagen si no llega a cargar.

Sin embargo, los lectores de pantalla también acceden al texto alternativo (a veces denominado atributos alternativos, descripciones alternativas o etiquetas alternativas) para “leer” la imagen. Por lo tanto, puedes usar este campo para describir una imagen, dando contexto a los usuarios que de otro modo la perderían.

De forma adicional, el texto alternativo también puede ayudarte a mejorar el SEO de tu sitio, dando a los motores de búsqueda más información para rastrear. Solo asegúrate de escribir resúmenes descriptivos de cada imagen e intenta incluir tus palabras clave siempre que tengas sentido.

4. Elige tus colores con cuidado

A menudo hablamos de daltonismo como si fuera un problema en blanco y negro sin juego de palabras. Sin embargo, es más amplio, ya que diferentes personas perciben los colores de maneras únicas (¿recuerdas The Dress?) Como tal, debes asegurarse de que los colores que seleccione en tu sitio contrasten bien para garantizar que todos puedan distinguir entre varios elementos en la página.

El problema más apremiante es asegurarse de que el texto se destaque en el fondo. Idealmente, debes establecer un color oscuro contra uno claro, asegurándote de que no se desvanezcan entre sí.

Supongamos que deseas utilizar un esquema de color azul. Deseas evitar crear una paleta donde los tonos sean demasiado similares en matiz y saturación, como este:

Esto es muy difícil de leer. En cambio, un contraste de color más claro funciona mucho mejor.

También querrás evitar chocar los colores que podrían causar fatiga visual. Echa un vistazo a esta portada del álbum que te provocará dolor de cabeza si no nos crees.

Hay muchas herramientas en línea que puedes usar para buscar y probar combinaciones de colores. WebAIM tiene uno, y también nos gusta Contrast Checker porque te da una puntuación en tiempo real. La última herramienta también te permite cambiar a monocromo para tener una idea aproximada de cuán efectiva es una combinación determinada.

5. Usa encabezados para estructurar tu contenido correctamente

Otra tarea clave para hacer que tu sitio sea accesible es estructurar tu contenido mediante el uso de encabezados con cuidado. Hacer esto hará que tu contenido sea mucho más fácil de entender y digerir, y mejorará el flujo.

Además, los encabezados claros también ayudan a los lectores de pantalla a interpretar tus páginas. Esto hace que sea mucho más fácil proporcionar navegación en la página. También es fácil de hacer, ya que solo necesitas asegurarte de usar los niveles de encabezado correctos en tu contenido.

Por ejemplo, solo debes usar un H1 por página, generalmente como el título de la página. Esto puede ser seguido por subtítulos que comienzan con H2, que luego pueden anidarse más con H3, seguido de H4. Estos siempre deben usarse en orden, por lo que debes evitar usar un H4 directamente después de un H2 (y así sucesivamente).

6. Diseña tus formularios para accesibilidad

Los formularios son una adición útil a la mayoría de los sitios, pero deben diseñarse con cuidado. Lo más importante es asegurarte de que cada campo esté claramente etiquetado. También debes apuntar a colocar las etiquetas adyacentes a los campos respectivos. Si bien un usuario vidente puede hacer coincidir fácilmente una etiqueta con el campo u opción correspondiente, esto puede no ser obvio para alguien que usa un lector de pantalla.

También debes intentar proporcionar instrucciones e información de una manera clara que el usuario pueda entender fácilmente. Para crear formularios accesibles en WordPress, puedes usar una herramienta como el generador de formularios de Caldera. Este es un plugin específicamente enfocado en la accesibilidad, lo que hará que tu trabajo sea mucho más fácil.

7. No uses tablas para nada excepto para tabular datos.

Cuando se trata de mostrar datos, las tablas son útiles. Facilitan mucho a todos los usuarios, incluidos aquellos que utilizan tecnología de asistencia, analizar una gran cantidad de datos. Sin embargo, para obtener el máximo beneficio, querrás mantener tus tablas tan simples como puedas.

Además, es mejor evitar el uso de tablas para otra cosa que no sean datos tabulares. Por ejemplo, nunca debes usar una tabla para diseños, listas o cualquier otra cosa. Esto puede ser confuso para los lectores de pantalla y dispositivos similares.

Si necesitas crear tablas más complejas, puedes seguir esta guía desde W3. Te muestra cómo codificar.

8. Habilita texto redimensionable que no dañe tu sitio

La mayoría de los dispositivos y navegadores permitirán a los usuarios cambiar el tamaño del texto, lo que puede ser útil para las personas con discapacidad visual. Sin embargo, si no creas tu sitio para admitir esta función, cambiar el tamaño del texto podría dañar tu diseño o dificultar la interacción con tu sitio.

Una buena práctica es evitar las unidades absolutas, como especificar el tamaño del texto con píxeles. En su lugar, usa tamaños relativos, que permiten que el texto se escale dependiendo de otro contenido y tamaño de pantalla.

Tampoco debes desactivar la escalabilidad del usuario, ya que esto dificultará que los usuarios cambien el tamaño del texto.

Para asegurarte de que tu sitio cumpla con estos criterios, prueba a fondo los tamaños de fuente aumentando el nivel de zoom en tu propio navegador. Si observas que el contenido se vuelve difícil de leer o navegar, puedes consultar esta guía de WebAIM que analiza el tamaño de fuente.

9. Evita multimedia y la navegación automática

La reproducción automática de archivos multimedia ha sido una pesadilla para los usuarios de Internet desde los días de MySpace. Tan molesto que puede ser que la música o los videos comienzan cuando se carga una página, este es un problema aún mayor en términos de accesibilidad.

Por ejemplo, descubrir cómo apagar los medios puede ser difícil cuando se usa un lector de pantalla, mientras que otros usuarios simplemente pueden confundirse o incluso asustarse por el ruido repentino. Por lo tanto, debes evitar incluir elementos que comiencen sin que el usuario los solicite primero.

También es mejor evitar la navegación automática, como carruseles y controles deslizantes. Esto puede ser increíblemente frustrante si el espectador necesita más tiempo para absorber toda la información antes de pasar a la siguiente diapositiva o sección.

10. Crear contenido con accesibilidad en mente

Finalmente, llegamos al núcleo de tu sitio: su contenido. Si bien el diseño de tu sitio para la accesibilidad es muy importante, debes tener en cuenta las mismas consideraciones al crear contenido.

Esto significa prestar atención a cosas relativamente menores, como escribir siempre acrónimos por completo, a puntos más importantes, como asegurarse de dar a todos tus enlaces nombres descriptivos únicos y texto de anclaje.

Si has leído todo este tutorial, ya tendrás una idea clara de los posibles problemas que pueden causar problemas a ciertos usuarios. Ten en cuenta que, tal como su sitio debe ser utilizado por cualquier persona, su contenido debe ser accesible y legible sin importar quién lo acceda.

La accesibilidad al contenido web es importante

Asegurarte de que tu sitio sea acogedor para la mayor cantidad de personas posible debería ser una prioridad. No hay razón para excluir a nadie, especialmente porque es relativamente fácil evitar hacerlo. Tus usuarios no solo te lo agradecerán, sino que también verás beneficios en forma de aumento del tráfico y las conversiones.

Al tomarte el tiempo para comprender las posibles fallas en tu diseño y contenido, puedes asegurarte de que tu sitio esté optimizado para la accesibilidad hoy.

DreamPress, nuestra solución de alojamiento administrado por WordPress. Con actualizaciones automáticas y fuertes características de seguridad. DreamPress te quita el peso de administrar el servidor para que puedas concentrarte en lo que realmente importa: crear un sitio que todos puedan usar (y disfrutar). Obtén más información sobre las opciones de planes disponibles hoy.

Avatar

Sobre el Autor: