Saltar al contenido

Accesibilidad en WordPress – 8 consejos de implementación

4 mayo, 2019
Accesibilidad en WordPress

¿Su sitio web de WordPress está libre de barreras? Buena pregunta, que pienses ahora. ¿Qué significa eso, accesibilidad? ¿Cómo puedo identificar y eliminar posibles barreras a mi presencia en línea? ¿Qué herramientas están disponibles? Las respuestas a todas estas preguntas e información mucho más valiosa se pueden encontrar en este artículo.

La accesibilidad en el contexto de las ofertas web significa que pueden utilizarse para los fines previstos, independientemente del software y el hardware utilizados, así como de las restricciones físicas. La palabra «accesibilidad» se utiliza a menudo como una alternativa cuando se trata del diseño sin barreras de las presencias en línea.

La mejor accesibilidad posible de un sitio web es uno de los criterios menos prominentes pero todavía muy importantes del diseño web moderno. El objetivo declarado no es excluir a ningún grupo específico de personas -como los ciegos o las personas con discapacidad auditiva- de la utilización de un servicio en línea y facilitar la indexación para los motores de búsqueda.

Pautas generales para un diseño web sin barreras

El World Wide Web Consortium, W3C para abreviar y responsable de la estandarización de técnicas en Internet, ha formulado las «Guidelines for Accessible Web Content (WCAG) 2.0», que se basan en cuatro principios fundamentales: Perceptibilidad, operatividad, comprensibilidad y robustez.

Un total de doce directrices orientan sobre aspectos importantes como la integración de alternativas textuales para el contenido visual, el uso de fuertes contrastes de color para mejorar la legibilidad o la accesibilidad de la página web a través del teclado. Un buen resumen de WCAG 2.0 se puede encontrar en el sitio web.

La Herramienta de Evaluación de Accesibilidad Web es ideal para obtener una visión general de su estado actual de accesibilidad – simplemente ingrese la URL y espere la evaluación. Este es un maravilloso punto de partida para su compromiso con el diseño sin barreras de su sitio web.

8 Consejos para implementar la accesibilidad en WordPress

En este punto, nos gustaría proporcionar asistencia concreta y presentar ocho valiosos consejos que le permitirán acercar un poco más su sitio web a la accesibilidad. A continuación, también discutiremos brevemente varias herramientas que pueden ayudarle en esta tarea.

1. etiquetar imágenes con etiquetas alt

La etiqueta Alt se utiliza para añadir una descripción textual a una imagen. Esto puede ser capturado por los llamados lectores de pantalla. Los lectores de pantalla leen en voz alta aplicaciones de software para los discapacitados visuales. Si falta la etiqueta antigua, los discapacitados visuales no pueden captar el contenido de una imagen. WordPress ofrece un campo de entrada especial para la etiqueta alt.

Introducir texto alternativo para las imágenes

2. Contenido de la estructura con etiquetas H

Un código HTML limpio, bien estructurado jerárquicamente, ya es importante cuando se selecciona el tema de WordPress. También deberías acostumbrarte a usar etiquetas H al crear tu propio contenido – de la misma manera en todo el sitio.

Esto significa que los títulos de las páginas siempre tienen la etiqueta H1, los subtítulos la etiqueta H2 y los subtítulos la etiqueta H3. Esto facilita a los lectores de pantalla y otros asistentes técnicos, así como a los rastreadores web de los motores de búsqueda, el procesamiento y la visualización de su contenido de una manera jerárquicamente correcta.

3. usar fuentes más grandes

Las personas sin discapacidad visual no suelen tener problemas para leer textos en tamaños de letra de once, doce o trece puntos. Sin embargo, aquellos que ya no pueden ver tan bien alcanzarán rápidamente sus límites aquí. El tamaño de fuente ideal para leer en pantalla es de 16 puntos, que es la configuración predeterminada en la mayoría de los navegadores.

4. utilice contrastes de color fuertes

Una fuente gris sobre fondo blanco no es fácilmente reconocible para muchos, por nombrar sólo un ejemplo de combinaciones de color subóptimas. Los fuertes contrastes entre la fuente y el fondo tienen un efecto positivo en la legibilidad de los textos en línea. Con una herramienta de Lea Verou puede determinar la relación de contraste ideal.

5. utilizar enlaces descriptivos

Los enlaces que no describen adónde va el viaje después del clic dificultan especialmente al grupo de usuarios que utiliza lectores de pantalla. Pero incluso los visitantes del sitio web sin discapacidades visuales están satisfechos con las claras designaciones de las referencias cruzadas. Por lo tanto,»Haga clic aquí» es una mala elección para el título de un enlace.

6. formular retroalimentación

Los desarrolladores a menudo confían exclusivamente en el color para obtener información sobre el comportamiento de los visitantes del sitio web, por ejemplo, cuando utilizan el formulario de contacto. Ejemplo: Si no se rellena un campo obligatorio, recibirá un borde rojo. Pero si eres daltónico, no puedes hacer mucho con él. Estos mensajes de error deben formularse siempre de forma adicional.

7. formatear palabras en mayúsculas con CSS

Si trabaja con palabras en mayúsculas en sus textos, por ejemplo en los encabezados o en el menú, y quiere que los lectores de pantalla las reconozcan como palabras completas, el comando CSS «text-transform: uppercase;» es la solución. Si escribe WORD directamente en letras grandes, el lector de pantalla lee las letras W, O, R y T en voz alta.

8. formularios de etiquetado con etiquetas

Lógicamente, los campos de entrada de un formulario de contacto deben ser descritos – después de todo, el usuario debe saber dónde introducir qué datos. Es importante no colocar la descripción como marcador de posición en el campo, pero fuera de él, de lo contrario no podrá ser leída por los asistentes técnicos.

Además de la asignación de etiquetas para los campos de entrada, la descripción del botón al final de su formulario de contacto es importante. Debe expresar exactamente la acción que se lleva a cabo pulsando el botón – como «Enviar» u «Pedir». Además, tiene sentido marcar los campos obligatorios, por ejemplo, con un asterisco.

9. ajuste de los puntos de enfoque

Hay personas que no pueden manejar un ratón debido a la espasticidad, por ejemplo, y que controlan las aplicaciones web exclusivamente mediante el teclado. Para indicarles dónde se encuentran en este momento, los campos de entrada seleccionados – si los hay – deben ser resaltados visualmente. Esta función a menudo ya está preestablecida en los navegadores.

Ajuste de los anclajes visuales para el control a través del teclado

Herramientas para la implementación y verificación de la accesibilidad

Como se mencionó anteriormente, al seleccionar el tema de WordPress, debe asegurarse de que ha sido desarrollado teniendo en cuenta la accesibilidad y que proporciona un código compatible con W3C. También hay muchos plug-ins que hacen que su tema actual sea más accesible.

WP Accessibility de Joe Dolson, por ejemplo, se comercializa como EL plug-in para implementar la accesibilidad. Por ejemplo, ofrece la posibilidad de adaptar el código de un tema para los asistentes técnicos, como los lectores de pantalla. Con el Access Monitor, Dolson también proporciona un plug-in para comprobar la accesibilidad.

El Accessibility Widget de Lorna Timbah permite a los visitantes de su sitio web cambiar el tamaño de la fuente. Formulario de contacto 7: Accessible Defaults proporciona una configuración básica sin barreras para sus formularios de contacto y la herramienta de Lea Verou antes mencionada ayuda a determinar la relación de contraste ideal entre la fuente y el fondo.

Como puede ver, el campo del diseño web sin barreras es complejo y hay muchos otros consejos y herramientas que no se han discutido en este artículo. Nuestra selección, sin embargo, le ofrece una visión general inicial y puntos de partida concretos para empezar. Estamos muy contentos de sus experiencias con este tema en los comentarios!

NEGOCIO VIVO – Empresa Marketing digital en malaga Empresa pagina web malaga Community manager malaga

Llámanos