La lista definitiva de las mejores herramientas y consejos para crear sitios web accesibles con WordPress.

Lea las pautas de accesibilidad web para crear un diseño web accesible. Hay tantos CMS gratuitos disponibles para crear sitios web y blogs de forma rápida y sencilla, pero crear sitios web accesibles puede ser difícil y complicado. No olvide utilizar las herramientas de verificación de accesibilidad web para probar sus sitios web.

En este artículo, compartiré algunas de las mejores prácticas, técnicas y complementos para crear sitios web fáciles de usar y accesibles con WordPress.

Alrededor del 15% de la población mundial, o aproximadamente mil millones de personas, viven con discapacidades. La Organización Mundial de la Salud estima que mil millones de personas tienen una discapacidad y el 80% vive en países en desarrollo.
Las personas con discapacidad pueden participar igualmente en la sociedad y hacer contribuciones sustanciales a la economía si las herramientas de Internet apropiadas están disponibles. InternetSociedad

¿Qué significa sitios web accesibles?

Para las personas con discapacidad, la accesibilidad significa poder utilizar un sitio web o una aplicación móvil con la misma eficacia que una persona sin discapacidad.

Importancia de la Accesibilidad Web

Esto significa utilizar principios de diseño inclusivos, mejores prácticas de codificación recomendadas y herramientas para crear sitios web, productos, aplicaciones y servicios utilizables por una sección más amplia de la población.

En algunos casos, esto no es posible, y se pueden recurrir a tecnologías de asistencia para llenar el vacío. Si es así, las tecnologías convencionales deberían permitir la conexión de software o hardware del dispositivo de asistencia sin problemas, en términos de interoperabilidad y portabilidad de datos.

En palabras sencillas, los Sitios Web Accesibles pueden ser utilizados por personas con discapacidad sin ningún problema. Las personas sordas pueden leer la transcripción de audios y videos y las personas pueden navegar a diferentes secciones de su sitio web a través del teclado (sin usar el mouse) y las personas daltónicas también pueden ver su sitio web.

Accesibilidad Web para personas con Discapacidad

Creación de sitios web accesibles: mejores prácticas y complementos de WordPress

Para crear un sitio web, necesita un CMS y para alojar su sitio web en Internet, necesita un proveedor de alojamiento web confiable.

1. Elija un proveedor de alojamiento web rápido y confiable

Los planes de alojamiento compartido también son muy populares y asequibles. Si no tienes un gran presupuesto y quieres empezar poco a poco. regístrese en un proveedor de alojamiento confiable y asequible como WestHost.com.

Si vas a montar una web o blog empresarial. No dude en gastar algunos dólares extra. Regístrese para obtener un proveedor de alojamiento de WordPress administrado y más confiable.

FlyWheel ofrece excelentes servicios de administración y alojamiento de WordPress. Creado desde cero para diseñadores y agencias. El plan básico comienza desde $ 15 / mes solamente.

2. Elija un CMS Accesible

Crear sitios web desde cero o crear su propio CMS es costoso y lleva mucho tiempo. Elija un sistema de administración de contenido excelente, potente y confiable como WordPress.

Los desarrolladores de WordPress se toman muy en serio la accesibilidad web. El equipo de accesibilidad de WordPress tiene un blog oficial de accesibilidad de WordPress.

Hay tantos complementos y temas de WordPress gratuitos y premium que también están disponibles para crear sitios web accesibles de forma rápida y sencilla. Los temas de WordPress predeterminados están preparados para la accesibilidad y puede leer la documentación para crear sus propios temas de WordPress accesibles.

WordPress no es solo una simple herramienta de blogs, puede usar este poderoso CMS para crear más de 35 tipos de sitios web y blogs.

Directrices de accesibilidad web para diseñadores La gran accesibilidad web comienza en el diseño.

El Diseño es una de las partes más importantes de cualquier sitio web. No olvides seguir estas mejores prácticas. si va a utilizar WordPress, también puede instalar temas preparados para accesibilidad.

1 Planifique la estructura de encabezado con anticipación: asegúrese de que todo el contenido y el diseño encajen en una estructura de encabezado lógica.

2 Considere el orden de lectura : El orden de lectura debe ser el mismo que el orden visual.

3 Proporcione un buen contraste : tenga especial cuidado con los tonos claros de gris, naranja y amarillo.

4 Use True Text siempre que sea posible : evite las imágenes y use texto. El texto verdadero se amplía mejor, se carga más rápido y es más fácil de traducir. Usa CSS para agregar estilo visual.

5 Tenga cuidado con el uso de MAYÚSCULAS : Las mayúsculas pueden ser difíciles de leer y los lectores de pantalla pueden leerlas incorrectamente.

6 Use un tamaño de fuente adecuado : el tamaño de la fuente puede variar según la fuente elegida, 10 puntos generalmente era un mínimo. Para garantizar la legibilidad, el tamaño de fuente de su sitio web debe ser, como mínimo, el tamaño predeterminado del navegador de 16 píxeles (100 %).

Video: Perspectivas de accesibilidad web: Texto personalizable

7 Recuerde la longitud de la línea : no la haga demasiado larga ni demasiado corta

8 Asegúrese de que los enlaces sean reconocibles : diferencie los enlaces en el cuerpo de la página con subrayados o algo que no sea solo color.

Mire el siguiente video para obtener más información sobre las perspectivas de accesibilidad web: enlaces, botones y controles grandes.

9 Indicadores de enfoque de enlace de diseño : asegúrese de que los usuarios del teclado puedan identificar visualmente los enlaces cuando navegan con un teclado.

10 Diseñe un enlace para "Saltar al contenido principal" : en la parte superior de la página debe haber un enlace accesible desde el teclado para que los usuarios salten la navegación.

11 Asegúrese de que el texto del enlace tenga sentido por sí solo : evite "Haga clic aquí" u otro texto de enlace ambiguo, como "Más" o "Continuar".

12 Use la animación, el video y el audio con cuidado : Proporcione un botón de reproducción/pausa. Evite el contenido intermitente o estroboscópico que podría causar convulsiones. Proporcione subtítulos y transcripciones para todos sus videos y contenido de audio.

13 No transmita contenido solo con color : los usuarios a menudo no pueden distinguir o pueden anular los colores de la página.

14 Diseñe controles de formulario accesibles : Asegúrese de que los controles de formulario tengan etiquetas descriptivas, instrucciones y mensajes de validación/error.

15 menús de navegación receptivos : asegúrese de que sus menús de navegación sean totalmente receptivos y compatibles con dispositivos móviles. Coloque los elementos del menú de navegación de forma lógica y coherente. Hágalos accesibles a través del teclado.

16 Texto alternativo para enlaces e imágenes : optimice siempre sus imágenes para la web. Use complementos de optimización de imágenes de WordPress o servicios en línea como tinypng para comprimir sus imágenes y reducir el tamaño de la imagen.

Te ayudará a que tu sitio cargue más rápido. Proporcione texto alternativo para todas las imágenes y enlaces y nombre sus imágenes correctamente.

17 Haga que el sitio web sea receptivo : asegúrese de que los usuarios puedan acceder a su sitio web a través de dispositivos móviles y que puedan leer todo su contenido fácilmente. Haga que su sitio web responda con consultas de medios CSS3 o use un complemento de WordPress para que su sitio web responda.

Serie de videos sobre perspectivas de accesibilidad web

La Iniciativa de Accesibilidad Web del W3C (WAI) ha publicado 11 videos sobre diseño web accesible. Esta es una lista de reproducción para que todos los diseñadores web y blogueros aprendan a crear sitios web y blogs accesibles y crear una mejor experiencia de usuario.

En esta lista de reproducción de YouTube, puede obtener información sobre los siguientes temas.

1. Subtítulos de video
2. Colores con buen contraste
3. Enlaces, botones y controles grandes
4. Texto personalizable
5. Compatibilidad de teclado
6. Disposición y diseño claros
   7 Notificaciones y Comentarios
7. Texto a voz
8. Contenido comprensible
9. Reconocimiento de voz
10. Compilación de 10 Temas/Videos

Creación de sitios web accesibles: complementos y temas de WordPress

Hay muchos complementos y temas gratuitos disponibles, lo que lo ayuda a hacer que sus sitios web de WordPress y el contenido de su blog sean más accesibles.

Temas de WordPress preparados para la accesibilidad:

Todos los temas predeterminados de WordPress de los desarrolladores de WordPress están preparados para la accesibilidad. También puede encontrar una gran lista de temas gratuitos listos para la accesibilidad en el directorio de temas de WordPress.

Comprobador de accesibilidad web Complementos de WordPress

1. WP Accessibility es uno de los complementos gratuitos y actualizados más populares que ayuda con una variedad de problemas comunes de accesibilidad en los temas de WordPress.

Puede deshabilitar todas las funciones de acuerdo con las necesidades de su tema activo. Para usuarios avanzados, todas las funciones basadas en la modificación de hojas de estilo se pueden personalizar utilizando sus propios estilos personalizados colocando la hoja de estilo adecuada en su directorio de temas.

2. Patrones de temas de accesibilidad para WordPress : una colección de patrones gratuitos está disponible en Github para crear temas de WordPress listos para la accesibilidad.

Los siguientes patrones están disponibles para su descarga gratuita.

• Formulario de comentarios con JS Aria para incluir la etiqueta en la respuesta de ARIA
• Dropdown Menus es un patrón gratuito para acceder a los menús desplegables de su tema de WordPress.
• Saltar enlace de Génesis
• Teclado de menú Flecha de navegación: Lea este artículo para aprender cómo agregar flechas a los menús de navegación.
• Leer más enlaces: Lea cómo personalizar el enlace Leer más y Mostrar extractos de publicaciones de WordPress.
• Responsive Menu es un patrón A para agregar a sus temas de WordPress.
• Omitir enlace

Los patrones de temas de accesibilidad para WordPress lo ayudan a crear temas de WordPress listos para la accesibilidad. El código no pretende ser un tema completo, pero cada patrón en los subdirectorios puede ayudarlo a que su tema sea más accesible.

3. Theme-a11y-Tester : un entorno para probar temas de WordPress para los requisitos de accesibilidad.

A11y-Theme-Unit-Test : esta es una versión de la prueba de unidad de tema de WordPress ajustada para pruebas de accesibilidad más eficientes.

4. El complemento de menú receptivo es un complemento de menú receptivo popular, gratuito y altamente personalizable para WordPress, con más de 120 opciones personalizables.

5. Contact Form 7: Accessible Defaults es un complemento gratuito para reemplazar el formulario Contact Form 7 predeterminado con un equivalente accesible y proporciona un conjunto de formularios básicos seleccionables.

6. Los campos de formulario de WCAG 2.0 para Gravity Forms pueden modificar los campos de formulario y mejorar la validación para que los formularios cumplan con los requisitos de accesibilidad de WCAG 2.0.

7. Biblioteca de videos accesibles es un complemento gratuito de WordPress para administrar videos, incluidos subtítulos, transcripciones y subtítulos para cada video.

Herramientas del Comprobador de Accesibilidad Web y Extensiones del Navegador

Aquí hay algunas pruebas de accesibilidad gratuitas para Chrome

1. Herramientas para desarrolladores de accesibilidad

2. A-Tester: herramienta de accesibilidad web WCAG 2.0

3. Herramienta de evaluación WAVE

4. hacha

5. cromovox

Más recursos

Aquí hay algunos recursos excelentes para obtener más información sobre cómo crear sitios web accesibles.

Visite el blog de accesibilidad de WordPress y el manual de accesibilidad de WordPress para obtener más información sobre WordPress y la accesibilidad.

También he escrito un artículo en el blog de Pagely Cómo crear sitios web de WordPress accesibles

Daltonismo y diseño web es un gran artículo en usability.gov