Cómo incorporar la accesibilidad web en su sitio de WordPress

Publicado: 2020-02-15

WordPress es la plataforma de creación de sitios web más popular. Según W3techs, el 35,7 % de todos los sitios web utilizan WordPress, lo que lo eleva a un asombroso 62,5 % de la cuota de mercado de los sistemas de gestión de contenido (CMS) a nivel mundial.

Sin embargo, al crear un sitio web de WP, la accesibilidad web es probablemente lo último que tiene en mente.

Sin embargo, los Estándares de codificación de accesibilidad de WordPress establecen que “ Todo código nuevo o actualizado publicado en WordPress debe cumplir con las Pautas de accesibilidad de contenido web 2.0 en el nivel AA. ”

En otras palabras, la accesibilidad es un factor crítico si tiene un sitio web de WP.

Afortunadamente, hacer que su sitio web de WP sea accesible no es imposible. Pero, antes de discutir cómo hacerlo, entendamos qué constituye la accesibilidad web.

A. Los cuatro pilares de la accesibilidad web

El World Wide Web Consortium (W3C), que desarrolla estándares internacionales para la web, ya ha propuesto los siguientes cuatro principios de accesibilidad web:

Perceptible: debe presentar toda la información y los elementos de su sitio web de manera que todos puedan percibirlos.
Operable: Todos sus elementos navegables e interactivos deben ser operables por diferentes usuarios.
Comprensible: todo el mundo debería poder entender la información y la interfaz de usuario de su sitio web.
Robusto: varios tipos de tecnologías de asistencia y los usuarios deberían poder leer el contenido de su sitio web.

B. Prácticas recomendadas de accesibilidad web de WordPress

Teniendo en cuenta los principios anteriores, puede seguir los siguientes pasos para que su sitio de WordPress sea accesible para personas con discapacidad:

Mejorar la accesibilidad del texto

Todos, incluidos los discapacitados visuales, deberían poder leer el texto de su sitio web. Si bien puede usar fuentes de tamaño grande de forma predeterminada, proporcionar texto de tamaño variable aumentará aún más la legibilidad. Los usuarios con problemas de visión pueden aumentar el tamaño de la fuente según su conveniencia usando esta función.

Además, asegúrese de agregar alternativas de texto, como etiquetas Alt, siempre que sea necesario. WP Accessibility es uno de los complementos de accesibilidad de WordPress que puede ayudarlo a agregar texto de tamaño variable, contraste de color, agregar títulos de publicaciones para leer más enlaces y proporcionar texto alternativo adecuado.

Parte delantera y trasera estructurada

Cada una de sus páginas web debe tener un front-end y un back-end bien estructurados. No solo aumenta la legibilidad general de su contenido, sino que también facilita que las herramientas de asistencia transmitan el mensaje a los usuarios discapacitados. Puede usar elementos HTML como etiquetas de encabezado semántico y metadescripciones para mejorar el back-end.

Asegúrese de usar listas con viñetas, párrafos cortos y contenido bien organizado y directo que ayude a mejorar la interfaz. También debe usar titulares y títulos apropiados para definir varias subsecciones de contenido. Evite el uso de animaciones llamativas y GIF, ya que no son fáciles de acceder.

Además, agregue Omitir enlaces para facilitar la navegación de contenido para los usuarios de lectores de pantalla. Esta característica de accesibilidad simple permite a los usuarios saltar de una sección del contenido a la otra sin tener que pasar por material innecesario.

Navegación con teclado para una mejor interacción

También debe asegurarse de que su sitio web sea navegable con el teclado. Debe incluir enlaces y menús, especialmente menús desplegables. Todos los usuarios deberían poder acceder a elementos como enlaces, menús, botones y formularios usando Tab (hacia adelante) y Shift+Tab (hacia atrás).

También debe usar un indicador de enfoque visible, que muestre a los usuarios deshabilitados dónde se encuentran en una página web. Los temas de WordPress a menudo pueden restablecer el estilo de enfoque predeterminado. Asegúrate de usar un tema de WordPress que no restablezca esta función. El tema de accesibilidad Divi puede ayudarlo a configurar una navegación amigable con el teclado con menús desplegables accesibles y esquemas visuales para elementos enfocables.

Agregar puntos de referencia de ARIA

ARIA significa Aplicaciones de Internet Enriquecidas Accesibles. Con una función de punto de referencia de ARIA, puede definir diferentes regiones de una página web, lo que permite a los usuarios de tecnología de asistencia navegar por su sitio web con facilidad.

Los roles de referencia de ARIA más comunes incluyen un banner, principal, complementario, información de contenido, búsqueda y navegación.

Banner: define el encabezado del sitio, como el logotipo, el nombre de la empresa o el título del sitio web.
Principal: Define el contenido principal de la página web.
Complementario: Detecta contenido de apoyo que es una parte esencial del contenido principal.
Información de contenido: proporciona información sobre los documentos principales, como notas al pie, derechos de autor y declaraciones de privacidad.
Buscar: indica el formulario de búsqueda de su sitio.
Navegación: marca los elementos de navegación de una página web.

La mejor ventaja de usar puntos de referencia ARIA es que pueden funcionar con elementos HTML5 ya semánticos. Como resultado, puede usarlos con elementos HTML5 en temas de WordPress existentes.

Elementos interactivos: contraste de color

Para elementos interactivos como CTA y formularios, siempre use colores de alto contraste como fondo de texto. Mientras que el nivel AA de WCAG 2.0 requiere una relación de contraste de al menos 4:5:1 para texto normal y 3:1 para texto grande, el nivel AAA requiere una relación de contraste de al menos 7:1 para texto normal y 4:5: 1 para texto grande.

Por lo general, el texto negro sobre fondo blanco ofrece el mejor contraste de color. También puede utilizar texto negro sobre fondo amarillo y viceversa. Sin embargo, evite combinaciones como texto verde sobre fondo rojo o texto rojo sobre fondo verde.

Palabras de despedida

La accesibilidad del sitio web también se extiende a otros elementos interactivos, como multimedia, en su sitio web. Asegúrese de que ninguno de los elementos multimedia, como video, audio, controles deslizantes o carruseles, tenga la opción de reproducción automática predeterminada, ya que es una barrera importante para los usuarios discapacitados. En cambio, todo el contenido multimedia debe comenzar a reproducirse solo después de la interacción del usuario.

Además de las transcripciones de video, las descripciones de audio y los subtítulos, asegúrese de usar reproductores multimedia accesibles. Puede usar un complemento como Able Player, que le permite agregar videos y audios incluidos en un reproductor multimedia accesible en cualquier página de su sitio de WordPress.

Hacer que su sitio web de WordPress sea accesible requerirá que cambie su diseño y flujo de desarrollo y se puede hacer a través de un proceso manual con un asesor. Las soluciones automáticas de accesibilidad web requieren una pequeña inversión de tiempo y recursos y traerán numerosos beneficios, incluida una imagen de marca positiva, un alcance de mercado más amplio, una mejor clasificación de búsqueda y, por no mencionar, un aumento de las ventas.

Si aún tiene dudas sobre cómo hacer que su sitio de WordPress sea accesible, no dude en dejar sus consultas en los comentarios.