Aquí en Qode, traemos belleza a WordPress. Ese es literalmente nuestro lema. Pero esto no significa que definamos anteponer el estilo a la sustancia. Diseñar para la accesibilidad es una consideración importante. Ya sea que su contenido esté dirigido específicamente a personas con discapacidades o no, pensar en visitantes con capacidades diferentes que, sin embargo, podrían apreciar lo que tiene para ofrecer, nunca puede ser algo malo. En este artículo, discutiremos varias cosas que puede hacer para aumentar la accesibilidad de su sitio web de WordPress. Pero antes de ir directo a los detalles, digamos algunas palabras sobre el diseño de accesibilidad en WordPress.
En general, la accesibilidad web significa que los diseñadores de sitios web toman medidas para garantizar que gente con discapacidades, ya sean cognitivos, visuales, auditivos, neurológicos u otros, puede usar el sitio web.
Específicamente, diseñar para la accesibilidad significa tener en cuenta a aquellos visitantes que tienen discapacidades que podrían impedirles disfrutar de todas las funciones de su sitio web, al menos, o incluso evitar que accedan a su contenido, en el caso más extremo. La esencia de esto es que diseño accesible significa ser UX avanzado para personas con capacidades diferentes.
Las mejores prácticas en diseño ahora incluyen varias técnicas que le permiten mejorar la accesibilidad y hacer que su sitio web de WordPress sea más fácil de usar para las personas que no pueden usarlo sin ayuda. Esto no significa que diseñar para la accesibilidad solo beneficiará a sus visitantes discapacitados. También puede beneficiar a las personas con discapacidades temporales, como aquellos que pueden haberse roto un brazo o perder temporalmente la visión debido a una cirugía ocular, personas que tienen una conexión muy lenta o personas que simplemente prefieren su texto en formato de audio.
Todo esto significa que el diseño accesible no está dirigido a una minoría discapacitada, sino que mejora la experiencia general del usuario, y un aumento potencial en la audiencia.
Puede probar la accesibilidad de sus páginas web utilizando uno de los Varias herramientas de evaluación de accesibilidad basadas en la web, tal como FAE, Achecker o OLA. De ellos, encontramos que WAVE es el más rápido y el más fácil de usar. Simplemente pegue la dirección de la página web en el campo de dirección y haga clic en el icono de flecha para obtener el informe.
Hemos elaborado un informe sobre un artículo de la edición internacional de The Guardian y podemos ver fácilmente qué áreas necesitan mejoras, ya que están etiquetadas con iconos. Para obtener una visión detallada del problema, simplemente haga clic en el icono y lea la información sobre herramientas. Así es como sabrá cómo resolver cada problema.
Los desarrolladores de WAVE también han proporcionado extensiones para Chrome y Firefox, que puede utilizar para devolver un informe de accesibilidad sin enviar ningún dato a los servidores WAVE, haciéndolo lo más seguro posible.
Los desarrolladores de WordPress han instituido estándares de accesibilidad para todo el código nuevo y un mejores prácticas manual para codificadores, con ejemplos de código. Pero no necesita saber cómo codificar para que su sitio web sea más accesible.
Encabezados
Por ejemplo, una buena estructura de encabezado es muy importante a las personas que utilizan software como lectores de pantalla. Hacer que el texto sea grande y en negrita no hará que el lector de pantalla comprenda que el texto es un encabezado. Utilizar una Título bloque en Gutenberg, un elemento de encabezado en Elementor, o etiquetas de encabezado como
en el editor clásico. El Encabezado 1 es el Encabezado de la página principal y no debe usarse para nada más.
La estructura interna del texto debe subdividirse utilizando los títulos 2 a 6, sin saltarse niveles. También debe evitar agregar funcionalidades adicionales a los títulos, como enlaces. Por el contrario, no debería utilizar títulos únicamente con fines estéticos. Para eso están el tamaño y el estilo de fuente. Una buena estructura de encabezado no solo ayudará a los usuarios con los lectores de pantalla, sino que también significará una mejor puntuación de SEO.
Enlaces
Al crear enlaces, debe asegúrese de que quede claro en el contexto qué es y qué no es un enlace. Si un enlace está rodeado de otro texto, las mejores prácticas significan que debe estar subrayado y en un color diferente.
Agregar atributos alternativos a las imágenes
Agregar atributos alt a las imágenes las hace «legibles» para el software lector de pantallay es muy fácil de hacer. Todo lo que necesita hacer es acceder a cualquier imagen en su biblioteca de medios.
En el menú del lado derecho, encontrará el cuadro de texto Alt. En pocas palabras, una descripción significativa de la imagen, que en nuestro caso es una fotografía de paisaje con un propósito puramente decorativo, y no requiere más que una simple descripción.
Una persona que utilice un lector de sitios web ahora tendrá la descripción textual de la imagen. Esta función de sus archivos multimedia es algo que no debe pasar por alto; puede afectar su puntaje de SEO. Si desea saber más, tenemos una guía completa en profundidad sobre el texto alternativo y los títulos de imágenes.
Algunas paletas de colores pueden causar problemas a los usuarios que padecen problemas de visión, daltonismo y afecciones similares. Generalmente hablando, cuanto más contraste, mejor, a pesar de que demasiado contraste puede causar problemas a las personas con ojos sensibles. Esto no solo se aplica al texto y el fondo, sino también a los elementos (como botones, iconos, menús y otros) y los efectos de desplazamiento. Para obtener más información sobre cómo cambiar los colores del texto en WordPress, consulte nuestra guía detallada.
La relación de contraste de luminosidad de fondo: primer plano recomendada es 4.5: 1 para texto normal o 3: 1 para texto grande. Existe una gran cantidad de herramientas que puede utilizar para verificar sus relaciones de contraste, como el Comprobador de contraste WebAIM. OLA, al ser una herramienta integral, también resaltará los problemas de contraste en el diseño de su sitio web.
Los formularios son una parte importante de la interacción web. Hay un par de cosas que puede hacer para que sean más accesibles.
Primeramente, un buen etiquetado es importante. Etiqueta todos tus campos de forma correcta y clara. En segundo lugar, usar texto de marcador de posición – ejemplos de texto que sus visitantes deben ingresar en formularios. Por ejemplo, si espera una URL, use algo como www.yourwebsite.com para un marcador de posición. Por fin, un conjunto completo de instrucciones sobre cómo completar un formulario podría ser de gran ayuda para las personas con discapacidad visual.
No es de extrañar que exista una serie de herramientas que puede utilizar para ayudar a solucionar algunos de los problemas comunes que tienen los sitios web de WordPress con la accesibilidad. El complemento que encontramos potencialmente más útil es Accesibilidad WP. Lo guiaremos a algunas de sus características importantes.
Una vez que instale y active el complemento, debe configurarlo. Navegar a Configuración de accesibilidad desde el Complementos instalados pantalla en su tablero.
Para que su sitio web sea más accesible para los lectores del sitio web, puede agregar skiplinks. Skiplinks hace que los lectores se centren en el contenido, en lugar de tener que leer primero todos los menús y los datos del encabezado. La configuración de skiplinks requiere un poco de conocimiento del código, por lo que no entraremos en detalles aquí. Proporciona a sus usuarios un botón que pueden usar para omitir el contenido innecesario e ir directamente al meollo del asunto. Solo necesita asignar un atributo de ID a donde desea que el enlace lleve a su visitante.
A continuación, están los Configuración de la barra de herramientas de accesibilidad. Si miras Agregar barra de herramientas de accesibilidad con ajuste de tamaño de fuente y alternancia de contraste, su usuario verá una barra de herramientas al costado de su pantalla.
Pueden usarlo para ver una versión de alto contraste de su sitio web …
… O para ampliar la fuente principal.
No entraremos en el meollo de la configuración de la barra de herramientas, pero hay varias opciones que es posible que desee probar antes de habilitarlas para sus visitantes.
A continuación, tienes el Otras configuraciones sección.
Puede recorrer cada uno de ellos individualmente y ver cuáles funcionan mejor para su sitio web. Por ejemplo, su sitio web puede estar usando un lenguaje de texto RTL (de derecha a izquierda); el complemento y el lector del sitio web deben saberlo. Es posible que desee que sus imágenes tengan descripciones más largas, y también hay una opción para eso.
Tres de estas casillas de verificación están marcadas de forma predeterminada: los enlaces no tienen ningún atributo de destino, el sitio web devuelve un error de búsqueda cuando el campo de búsqueda no contiene una cadena y el tabindex se elimina de los elementos enfocables.
A continuación, tienes el Eliminar atributos de título sección. Esto sirve para decirle al lector del sitio web que algunos elementos del diseño no son títulos. Le sugerimos que revise esto y elimine el atributo de título de lo que no lo necesite.
También dispone de una práctica herramienta de comprobación de contraste. Simplemente elija los colores que está usando o pegue sus códigos hexadecimales en los campos correspondientes y verifique si sus relaciones de contraste son las que necesita.
En conclusión
Como hemos mostrado, hay muchas cosas que puede hacer para que su sitio web sea más accesible. Evite la trampa de pensar en el diseño accesible como una mera acomodación a una minoría; de hecho, todo lo que está haciendo es atraer a una gama más amplia de visitantes, invirtiendo solo un poco más de tiempo y esfuerzo en potencialmente grandes ganancias. Sin mencionar que algunas de estas técnicas pueden mejorar significativamente su puntaje de SEO. ¿Por qué no querrías aprovechar eso?
Apoya nuestro trabajo ❤️
Si te ha gustado este artículo, considera dejar una propina para ayudarnos a seguir publicando contenido de calidad.
