Conocimiento Para Potenciar Tu Sitio Web

Cómo mejorar la accesibilidad de tu blog de WordPress (Y por qué importa)

Cómo mejorar la accesibilidad de tu blog de WordPress (Y por qué importa) thumbnail

Puede que hayas escuchado sobre accesibilidad web, pero entender e implementar las pautas puede parecer fuera de tu alcance. Encontrar los recursos para ayudarte a encargarte de problemas de accesibilidad también puede ser una barrera para tus proyectos web.  

Afortunadamente, WordPress ha hecho algunos avances al proveer herramientas para ayudar a hacer los sitios web más accesibles. Adicionalmente, hay muchos recursos disponibles en línea que puede ayudar a guiarte. Hacer tu sitio WordPress accesible no es solo una buena práctica de diseño, sino que también asegura que todos tienen acceso por igual al contenido web y aplicaciones. 

En este artículo, echaremos un vistazo a lo que significa la accesibilidad en línea. También hablaremos sobre algunas nuevas adiciones de WordPress que hacen el diseño accesible más fácil. Hay mucho por cubrir, ¡así que comencemos!

Crea Un Sitio Para Todos

Nos aseguramos de que tu sitio sea rápido y seguro para que te puedas enfocar en las cosas importantes.

Qué es la accesibilidad web y por qué importa

En este contexto, “Accesibilidad” quiere decir diseñar sitios web y aplicaciones web de cierta forma que no limite a nadie a usarlas. Esto quiere decir que cualquier visitante, sin importar su discapacidad, debería poder acceder y usar tu sitio. 

Esto es importante cuando consideramos el hecho de que uno de cuatro adultos en los Estados Unidos tiene una discapacidad de algún tipo. En otras palabras, si no estás construyendo pensando en accesibilidad, hasta un cuarto de los visitantes de tu sitio puede luchar para acceder a tu contenido. 

Afortunadamente, hay un conjunto de reglas que puedes usar para revisar tu diseño web y funcionalidad. Las normas W3C delinean varios niveles de accesibilidad. Esto incluye un umbral mínimo que es considerado como aceptable. Por supuesto, también querrás tener estas leyes y regulaciones en cuenta, ya que la accesibilidad es un tema legal también. 

Construir pensando en accesibilidad no es tan diferente de seguir el estándar de las mejores prácticas para diseño y optimización. De hecho, muchos de los principios y técnicas son las mismas. En términos particulares, esto quiere decir que un diseño accesible no está fuera de nuestro alcance — especialmente si estás usando WordPress. 

Explorando las características de accesibilidad de los editores en bloque

WordPress se ha esforzado por mejorar la accesibilidad web en la base de código en constante evolución de su Sistema de Administración de Contenido (CMS). De hecho,  se han instituido estándares para cumplir con un estándar mínimo de accesibilidad en todo el código actualizado o nuevo que sea lanzado. 

Adicionalmente, los desarrolladores de WordPress han creado un manual de accesibilidad que describe cómo los programadores deberían crear productos para el CMS. Por ejemplo, todo el código de WordPress debe cumplir con las Guías de Accesibilidad de Contenido Web (WCAG) 2.0 en el nivel AA. Este es considerado el estándar mundial y también es usado por sitios web del gobierno y servicios públicos. 

Si echas un vistazo al Editor en Bloque, en particular, hay un par de opciones útiles incluidas que ayudan a crear contenido accesible. Por ejemplo, simplemente hacer tu fuente de letra más grande y en negrita no le dice a un lector que esta representa el encabezado de una sección. El Editor en Bloque hace más fácil usar una marca apropiada para el encabezado al proveer un bloque de Heading o de encabezado. 

Esto quiere decir que tu contenido automáticamente será estructurado usando los encabezados apropiados. Esto no solo ayuda a los lectores de tu pantalla a navegar tu contenido apropiadamente, sino que también provee mejor información a los motores de búsqueda.

El Editor en Bloque también incluye una característica incorporada de Tabla de Contenidos o Table of Content, la cual te permite revisar rápidamente tus encabezados para que te asegures de que tu contenido sigue un orden lógico de jerarquía.

Por supuesto, estas no son las únicas opciones para diseñar contenido accesible. Ya que resulta, que WordPress ofrece muchas maneras de asegurar que todos los visitantes puedan acceder y apreciar tu contenido. 

Sé increíble en el internet

Suscríbete a nuestro boletín mensual para trucos y consejos sobre como construir tu sitio web soñado.

5 Formas de hacer tu blog de WordPress más accesible

Como mencionamos anteriormente, cumplir con los estándares de accesibilidad puede beneficiar en general tu diseño web y tus esfuerzos de optimización de motores de búsqueda (SEO). Además, te ayuda a hacer crecer tu audiencia y cumplir con regulaciones críticas. Con eso en mente, aquí hay cinco formas fáciles de mejorar la accesibilidad de tu sitio. 

1. Añade etiquetas alt (Alt tags) a las imágenes

Añadir “alt tags” a tus imágenes es una de las formas más fáciles de hacer algo de tu contenido accesible. Una etiqueta alt le permite al software lector de pantalla, “leer” la imagen a la que está conectado y decirle al usuario que es y cómo se ajusta al contexto de la página. 

Fácilmente puedes añadir un texto alternativo a tus imágenes en WordPress. Una vez que añades una imagen a tu publicación o página, ingresa una frase corta u oración describiéndola en el campo de texto Alt Text al lado derecho del editor. 

Bajo este campo, también puedes hacer clic para ver pautas útiles de imágenes alternativas

2. Usa paletas de colores accesibles

Otro estándar de accesibilidad WCAG involucra las paletas de colores que uses. Algunas paletas de color pueden causar problemas para los visitantes daltónicos, mala vista y problemas similares. En términos generales, querrás usar colores con mucho contraste, para que tu texto se pueda ver fácilmente. 

Para ayudarte a comenzar, WordPress tiene un recurso útil en su Web Developer Handbook sobre el uso apropiado del color. Adicionalmente, cuando estás trabajando en WordPress y decides cambiar el color de algunas partes de tu texto, recibirás una notificación en la parte derecha del menú de edición si el color de tu elección puede llegar a crear problemas. 

Seguir estos estándares simples para la elección de color quiere decir que los usuarios de tu sitio web deberían poder leer tu texto más fácilmente, sin importar cuáles sean sus discapacidades visuales. 

3. Organiza los encabezados jerárquicamente

Como mencioné anteriormente, el Editor en Bloque hace más fácil el uso de encabezados apropiados y etiquetas de títulos. Cuando quieras usar un nuevo nivel de encabezado, puedes seleccionar el bloque Heading del menú Block.

Tendrás varios niveles de encabezados de los cuales escoger. Sin embargo, puede que notes que H1 no está listado en las opciones de bloque. Esto es porque es mejor no usar H1 en tus publicaciones o contenido de página, ya que tiende a confundir a los lectores de pantalla. Los H1s deberían ser reservados para el título principal de cada publicación, mientras que puedes usar los H2s y menores para estructurar el resto del contenido. 

4. Asegúrate de que tus formularios sean accesibles

Los formularios son un elemento bastante usado en muchos sitios web. Ellos pueden crear interactividad y ayudar a los dueños de negocios a recolectar información sobre sus clientes. Sin embargo, también pueden presentar un reto para alguien que esté usando tecnología de asistencia. 

Afortunadamente, puedes crear formularios que tienen más accesibilidad incorporada. Una opción es usar un plugin como Formidable Forms.

Esta herramienta ofrece un constructor de formularios con cumplimiento WCAG 2.0 como una característica clave

Por ejemplo, etiquetar los campos de tu formulario le ayuda a los usuarios a navegarlos con y sin tecnología de asistencia. Otra práctica común de los diseñadores de formularios es usar marcadores de posición — texto que aparece en los campos de los formularios como un ejemplo. Ambos son útiles para la accesibilidad, ya que las etiquetas le dicen a los usuarios que deben llenar mientras que los marcadores de posición explican cómo deben llenarlos. 

También es inteligente incluir instrucciones claras para ayudar a los usuarios a llenar los formularios. Muchos usuarios web tienen lo que llamamos discapacidades “invisibles”. Esto quiere decir que no usan tecnología de asistencia tales como lectores de pantalla. En vez, pueden tener discapacidades cognitivas, con las cuales puede ayudar proveer instrucciones claras y otras prácticas de accesibilidad de formularios. 

5. Haz tu sitio amigable con el teclado

Para que un sitio web de WordPress sea genuinamente accesible para cualquiera, tiene que ser diseñado para ser navegado con solo un teclado. Esto asegurará que los usuarios ciegos y de poca visión, así como cualquiera que pueda necesitar un teclado alternativo o un emulador de teclado, podrá usar tu sitio web. 

Típicamente, la navegación de teclado en un sitio web involucra usar la tecla Tab. Esto permite al usuario saltar de un punto de contenido enlazado a otro. Estas áreas tienen indicadores de enfoque programados, los cuales pueden ser activados con el teclado. Un usuario vidente podrá ver un cambio visual (tal como el contorno, borde o color de fondo) cuando el teclado se activa en un área específica. 

Puedes ver esta característica activa en el siguiente ejemplo, donde la “accesibilidad web” tiene un indicador visual alrededor de él, lo que significa que el usuario ha navegado al sitio con el teclado. 

Plugins tales como WP Accessibility pueden ayudarte a desarrollar un mejor enfoque de teclado para tu sitio web WordPress, entre otras mejoras, 

En términos de navegación en la pantalla, un lector de pantalla podrá descifrar el contenido de tu sitio basado en su código fuente. Por lo tanto, tu código debe estar escrito pensando en una navegación lógica de página. Hay mucho que entender sobre el diseño de un sitio amigable con el teclado. Afortunadamente, ¡hay muchos recursos disponibles para guiarte!

Empodera a todos los usuarios de WordPress

Navegar en el mundo de los estándares de accesibilidad puede ser confuso. Afortunadamente, WordPress ofrece recursos que puedes usar para probar tu sitio web por problemas de accesibilidad y luego hacer las mejoras necesarias. 

Asegúrate de tener las herramientas correctas, ya que te puede ayudar a construir contenido más inclusivo. Aquí en DreamHost, creemos en la apertura y disponibilidad de recursos para todos. Además, ¡ofrecemos el mejor soporte para sitios web accesibles en nuestros planes Shared hosting de bajo costo!

Sobre el Autor:

Ellice nos llega de la Casa DreamHost, la primera de su nombre, Guardiana del contenido de todas las cosas, protectora de la marca y gobernante de los reinos sociales. tl;dr — Ellice es la Gerente de Marketing de Contenido en DreamHost y supervisa todos los esfuerzos de contenido y redes sociales.