Profundidad en la accesibilidad de WordPress

Así que ha leído la publicación de Eric Karkovack sobre la accesibilidad de WordPress y ahora desea hacer los sitios futuros en los que está trabajando. ¡Eso es genial! El proyecto de WordPress está dedicado a la accesibilidad en el núcleo. Los estándares de codificación de accesibilidad se comprometen que: todos los códigos nuevos o actualizados lanzados en WordPress deben cumplir con las reglas WCAG 2.0 a nivel AA. Qué accesible es un sitio de WordPress depende de tres factores:
Tema
complementos
Contenido
Los diseñadores, desarrolladores y propietarios de sitios influyen en cuán accesible es el producto final. Los desarrolladores tienen un papel muy importante que desempeñar en la mezcla de accesibilidad. El código inaccesible suele ser invisible para el usuario ordinario. Es posible que sus fallas no se descubran hasta que alguien se queje de que puede ver o hacer algo en el sitio.
¿Qué pueden hacer los desarrolladores de WordPress para que los sitios que construyan más accesibles? El mejor enfoque es desarrollarse teniendo en cuenta la accesibilidad desde el principio. El remedio para los problemas de accesibilidad después de lanzar un sitio siempre es más tiempo y más caro (pero a veces es posible que no tenga otra opción). 1. Elija un tema preparado para la accesibilidad utilizando un tema preparado para la accesibilidad es una buena base para un sitio asequible. Un tema etiquetado para la accesibilidad ha pasado la revisión del tema WordPress.org y tiene una serie de funciones accesibles adicionales.
Todos los valores predeterminados de WordPress.org están listos para la accesibilidad, incluido el recientemente lanzado y apreciaron los veinte veinte. Solo hay una pequeña cantidad de otros temas disponibles que tienen la etiqueta del tema lista para acceder a WordPress.org. Algunos más están disponibles comercialmente, como algunos de los temas para el marco de Genesis para niños. Alternativamente, puede construir su propio tema. Hay una excelente guía del equipo Accesible para hacer WordPress sobre cómo hacer un tema hecho listo. 2. Elija complementos que estén codificados para producir contenido accesible La mayoría de nosotros buscamos un complemento para cualquier funcionalidad que no esté en WordPress Core. Desafortunadamente, no hay equivalente listo para la accesibilidad para los complementos. Por lo tanto, encontrar a aquellos que no introducen problemas de accesibilidad a menudo es un caso de prueba y error. No confíe en complementos que remedian la accesibilidad para remediar todos los problemas. Como Eric señaló en su publicación, el complemento de accesibilidad WP puede abordar algunos problemas de accesibilidad, pero no es una panacea. Lo mismo es cierto para muchos otros complementos de accesibilidad en wordpress.org.
Si desarrolla complementos que crean contenido frontal, ¿por qué no hacer que algunos accesibles? Esto traerá beneficios tanto a sus proyectos como a otros. 3. Educar a los clientes para que agregue contenido de una manera accesible que pueda construir un sitio web perfectamente accesible y podría pasar todas sus pruebas. Luego, déelo a un cliente y, unas semanas después, observe que la accesibilidad falla …

Como un sitio web en sí, la accesibilidad es un esfuerzo continuo. Para obtener los mejores resultados, debe trabajar en conjunto con su cliente, aprender buenas prácticas de accesibilidad y destacar los beneficios de mantener un sitio asequible. Ganar con W3C WCAG es el cuerpo de estandarización para la World Wide Web y publica las Guías de accesibilidad (WCAG), actualmente en iteración 2.1. Las pautas siguen 4 principios: perceptible
Operable
Comprensible
Robusto
Cada guía tiene un nivel de prioridad: A (debe hacerse), AA (debería hacer) y AAA (puede hacer).
WCAG 2.1 AA se considera el estándar pragmático y el que aspiran la mayoría de las empresas y organizaciones. Para una presentación general de WCAG 2.1, ver:
Cómo conocer a WCAG (referencia rápida)
Lista de verificación de WCAG 2 de WebAim
Para los principiantes, las pautas pueden parecer abrumadoras. He destacado a continuación algunos de los más importantes, junto con quienes ayuda, cómo vincular con los requisitos anteriores para revisar el tema listo para la accesibilidad. Además, enumeré algunos pasos para una mejor accesibilidad que los desarrolladores y creadores pueden tomar. 1. Descripción de imágenes, iconos, etc. Lo que esto significa que el contenido de pintura debe tener una alternativa de texto que lo describe en palabras, a menos que sea decorativo (no agrega un significado adicional).
Guía WCAG 1.1.1: Contenido sin texto (Nivel A) que ayuda a estos usuarios inútiles y deficiencias de visión. Lo que los desarrolladores pueden hacer los requisitos del tema listos para una accesibilidad específica: incluya imágenes decorativas en temas o complementos a través de CSS diecisiete insertar las imágenes en el panel de la página de inicio como imágenes de fondo, para que no necesiten texto alternativo. Las imágenes presentadas en Los temas tienen atributos alternativos con el texto apropiado, este podría ser un atributo diferente alt = “” Si la imagen está allí por razones estéticas. Especificaciones para iconos y fuentes para iconos cuando se usan iconos o fuentes de iconos, incluya texto alternativo para indicar la importancia del icono Si el icono se usa sin el texto que lo acompaña. Si un icono tiene un texto explicativo, oculte el icono de los lectores de la pantalla. Recibe puntos de bonificación para el uso de SVG en detrimento de las fuentes de iconos.
En el tema de veinte veinte, el texto del menú y el icono de tres puntos están empacados en un botón de interruptor. Debido a que hay texto visible, el icono no necesita una descripción de texto.
El código es: menú Otros atributos notables SVG aquí son: rol =” img “: le dice a un lector de pantalla que este es un gráfico

Aria-hidden = “verdadero”: dígale a un lector de pantalla que ignore este elemento
El menú de enlace social en veinte veinte también usa iconos SVG.

Aquí está el código para un elemento de menú de Facebook:
Facebook
Esta vez, el nombre del icono es colocado en el span a con el texto para el lector del aula. Este texto no es visible y se lee solo para los lectores de pantalla. Lo que el contenido puede hacer agregue texto alternativo para cada imagen que se carga en el sitio, a menos que la imagen sea puramente decorativa. Existe un enlace a un árbol de decisión alternativo en el editor, que es muy útil si no está seguro cuando usa un texto alternativo o no. 2. La jerarquía de información que significa que el contenido en la página debe fluir en un orden significativo. Los títulos y etiquetas deben ser descriptivos. Cono de cono cono cono 1.3.1: información y relaciones (nivel a) 2.4.6 títulos y etiquetas (nivel AA) que ayuda a todos, pero especialmente a los usuarios invisibles y con impedimentos visuales, porque pueden navegar por página a través de títulos en -Un lector de pantalla.
El texto hecho para ver que un título no tiene importancia semántica para un lector de pantalla, por lo que no se puede usar de la misma manera. Lo que los desarrolladores pueden hacer si construye su propio tema preparado para la accesibilidad, agregue el área para indicar las diferentes regiones de una página. Los usuarios del lector de pantalla pueden usarlos para saltar en el área que desean. Hay más información sobre cómo usar los puntos de referencia en este ejemplo del área o puede estudiar el código de un tema como veinte diecinueve. El Suplemento de referencia de Firefox muestra los puntos de referencia sobre este tema. Además, siga la guía de Rian Rietveld para marcar los títulos sobre un tema. ¿Qué pueden hacer los autores: usar títulos, no solo más grandes o texto! Use los títulos de nivel correctos en el contenido de la publicación. El título de la publicación siempre será un título 1. Los títulos posteriores deben seguir en orden, sin omitir niveles. Si usa el editor de bloques, puede usar el botón de estructura de contenido para verificar la secuencia de títulos que usa mientras escribe una publicación.
3. Color y contraste lo que esto significa si el contraste de color entre el primer plano y el fondo en una página web es demasiado bajo, algunas personas no podrán leer las palabras en la página. Además, tenga cuidado de usar el color como el único medio para distinguir la información. Lo que parece ser un enlace a una persona puede no ser visible para otra persona. Es por eso que se recomienda subrayar las conexiones y es uno de los requisitos para crear un tema preparado para la accesibilidad. Cono Cono Cono Cone Confecciones 1.4.1 Uso del color (Nivel A) 1.4.3 Contraste (mínimo) (Nivel AA) 1.4.11 Contraste sin texto (AA) que ayuda esto con impedimentos visuales o daltonismo, también usuarios a la luz solar brillante. Lo que puede desarrollar los desarrolladores implementaron combinaciones de colores accesibles al crear un esquema de color para un sitio web, asegúrese de que los colores del primer plano y el fondo cumplan con el nivel de contraste mínimo. Esta es una relación de contraste de 4.5: 1 para el texto estándar y 3: 1 para el texto grande. Si un sitio web ya ha definido los colores de la marca, es posible que pueda negociar con el diseñador para usar un color de problema como color de acento. Alternativamente, puede aceptar cerrar o abrir ligeramente un color para alcanzar el contraste mínimo. Puede usar un instrumento como los colores accesibles que calculen la relación de contraste entre dos colores. Si la combinación de colores no pasa, sugerirá colores alternativos compatibles.
Use iconos y color para indicar estados como el éxito y el fracaso, esto probablemente sea más relevante para los complementos en los que se requiere el usuario. Un ejemplo es el tratamiento de los errores de forma ninja. Marcan los campos obligatorios que están incompletos para referirse con un borde rojo, el ícono del signo de exclamación y un mensaje de error: implementar el subrayado de los enlaces en el contenido del cuerpo, no se deben enfatizar todos los enlaces sobre un tema. La convención es que las colecciones de elementos en la lista en una barra de navegación o barra lateral se consideran enlaces.

Sin embargo, con el contenido de publicación y página, es otra historia. En la captura de pantalla demostrativa del tema a continuación, el color del enlace #000000 es tan similar al color del texto #757575 que es difícil decir cuáles son los enlaces. Solo cuando pasas el mouse sobre ellos o te concentras en ellos es claro.
Observe cuánta diferencia hace cuando se subrayan los enlaces:
Cambiar el color del enlace ayudaría a aclarar los enlaces en este caso. Subrayar el enlace es obligatorio para aprobar la verificación del tema listo para la accesibilidad: Subline es el único método aceptado para indicar enlaces en el contenido. El texto, en cursiva o diferenciado por colores es ambiguo y no pasará. Lo que el contenido del contenido puede hacer seguimiento al agregar contenido en el que el significado se indica exclusivamente. Mira este diagrama circular, como lo ve a alguien con una vista normal:

Con la Protanopía, una forma de daltonismo, es más difícil distinguir algunos de los segmentos:

La solución es cuando se hace el diagrama, etiquete cada segmento con el nombre y el valor. 4. La accesibilidad del teclado, lo que significa que todas las funcionalidades en la página deben ser accesibles por teclado. El orden de enfoque debe ser lógico y debe haber un indicador de enfoque visible en la página para mostrar dónde se encuentra un teclado a la vez. Cono Cono Cono Cono Cone Cone Cubre 2.1.1 Cadro (Nivel A) 2.4.3 Orden de enfoque (Nivel A) 2.4.7 Enfoque visible (AA) que ayuda a este no puede usar un mouse, generalmente personas con discapacidades motoras que afectan la captura. Las personas que usan un lector de pantalla para leer la página se basan en los atajos de teclado, por lo que esto también los beneficia. Los usuarios del teclado del espectador generalmente usan la tecla Tab para navegar en una página e Ingrese la tecla para activar los botones o enlaces. Además, los botones pueden ser activados por la barra espacial. Lo que los desarrolladores pueden hacer los siguientes son todos los requisitos para un tema listo para la accesibilidad. Los menús desplegables accesibles desde el teclado Asegúrese de que en el tema seleccione los elementos de los menús desplegables se pueden ver y seleccionar por teclado. Si un menú desplegable solo se puede usar con el mouse y no hay navegación secundaria o mapa del sitio, acaba de excluir a algunos de sus visitantes. Si navega por el sitio web de Hodge Bank con el teclado, verá que puede acceder perfectamente a todos los elementos en el menú desplegable.

Los enlaces omiten estos son enlaces especiales que solo son visibles cuando se enfocan en usar el teclado. Se benefician de los usuarios del teclado del espectador, lo que les permite evitar los menús de navegación en cada página. (Los usuarios de lectores de pantalla tienen otras formas de llegar rápidamente). El sitio web de la Universidad de la Ciudad de Nueva York tiene un enlace de ignorancia en la parte superior izquierda de la pantalla cuando accede, guarde al usuario para navegar a través del menú de cincuenta enlaces. (¡Aunque creo que el contraste del enlace Ignore podría ser mejor!) El teclado visible se centra en enlaces, botones y elementos de la forma takoyaki del papá puede tener una comida muy deliciosa, pero es difícil ver qué elemento de menú se selecciona aquí. No hay contorno a su alrededor y hay un cambio sutil de opacidad.

Usar un complemento de navegador que agrega un contorno alrededor del elemento enfocado actual, es mucho más claro.

¡Este no es el peor ejemplo que he visto a algunos sitios web que no tienen un estilo de enfoque en absoluto! Este problema generalmente proviene de un reinicio de CSS, que generalmente incluye esta regla de estilo :: Focus {Buteline: 0; } El contorno suele ser una línea punteada que rodea los enlaces, los botones y las entradas de forma cuando se usa la pestaña para navegar. Eliminarlo detiene los navegadores para mostrar contornos de sus propias formas extrañas. La intención es que los desarrolladores definan sus propios estilos de enfoque. Pero muchas veces no. Sin estilos de enfoque claros, es como enviar a alguien a comprar en una tienda sin letreros ni estantes. Por supuesto, pueden tener suerte y recaudar algunos artículos que querían, pero es más probable que se rinda e vayan a otro lado. A menudo puede usar el mismo estilo de enfoque que el estilo flotante. Para los botones, el estilo flotante a menudo es el reverso del estado desigual. Implemente un orden de enfoque lógico Si el orden de enfoque no coincide con el orden visual en la página, puede confundir o desorientarse a los usuarios. Aquí está el sitio web de UNICEF UK: el orden de los primeros enlaces en la página se ve así:

logo

Nuestro trabajo

Ayúdanos

Tienda

Contacto

Búsqueda

Donar a unicef

Pero el orden de la pestaña es en realidad este:

logo
Donar a unicef
Invisible (acceda a la página con resultados de búsqueda)
Invisible (debería cerrar el cuadro de búsqueda pero no hacer nada si no es visible)
Nuestro trabajo
Ayúdanos
Tienda
Contacto
Búsqueda
Esto sucede porque el enlace de donación se codifica antes de la navegación en HTML, y flota directamente con CSS. Entiendo por qué el equipo web quería destacar primero la donación, pero no es una buena práctica. Lo que puede hacer que el contenido puede tener cuidado al usar complementos que generan ventanas emergentes o cajas de caja de luz. Algunas de ellos abren ventanas modales que solo pueden rechazarse si usa un mouse. 5. El comportamiento de la conexión que significa los enlaces es entendido por todos y hacer clic en uno no conduce a un comportamiento inesperado. Cono cono wcag girand 2.4.4 Propósito del enlace (en contexto) (nivel A) 2.4.9 Propósito del enlace (solo enlace) (AAA) 3.2.5 Modificación a pedido (nivel AAA) que ayuda esto con las impedimentos visuales son Basado en la descripción correcta de los enlaces. Si el texto del enlace no está claro, las personas no los visitarán. Abrir los enlaces en nuevas pestañas sin previo aviso puede confundir a los usuarios mayores o a aquellos con deficiencias cognitivas, porque no pueden usar el botón Atrás para regresar. Así que no hagas eso si es posible. Lo que los desarrolladores pueden hacer el tema Aeonblog siguen las recomendaciones del tema listos para la accesibilidad. Inserte el título de la publicación en un intervalo del enlace de continuación con el texto del lector de pantalla. Esto no cambia nada visual, pero agrega un contexto adicional para los usuarios de lectores de pantalla.
Aquí está la parte relevante del código, desde el archivo plantplate-parts/content.php de aeonblog: <link "href =" “> <? Php echo es_html ($ read_more); ? ? "O" más ", que no tiene significado fuera del contexto. No establezca enlaces para abrir en una nueva pestaña a menos que advierta al usuario al respecto en el texto del enlace. Si un enlace abre un archivo como un PDF, incluya en el texto del enlace. Es aún mejor si menciona el tamaño del archivo, porque un usuario puede no querer descargar un archivo si es grande. 6. Asistencia de entrada Lo que esto significa en cualquier tipo de entrada del usuario, asegúrese de que los usuarios conozcan los nombres y la función de los controles.
Las etiquetas para los controles se asocian correctamente.
Se dan mensajes de error apropiados que permiten a los usuarios corregir sus errores.
Cono Cono Cone Courage 3.3.2 Identificación de errores (Nivel A) 3.3.2 Etiquetas o instrucciones (Nivel A) 4.1.2 Nombre, rol, valor (nivel A) que ayuda a esto aporta beneficio a todos. Los grupos que en su mayoría se ayudan son personas con pérdida de visión y personas con problemas cognitivos, por ejemplo, pérdida de memoria a corto plazo. ¿Qué pueden usar los desarrolladores para usar elementos HTML semánticos nativos, en detrimento de elementos personalizados que no reinventan la rueda? Use el elemento para los botones y el para los enlaces (no y por favor). Los elementos nativos tienen comportamientos predecibles. Los elementos personalizados requieren más codificación para que actúen de la misma manera. Este es un requisito del tema listo para la accesibilidad. Use etiquetas visibles en formularios En este formulario de comentarios, se utilizan sustitutos, no etiquetas. El problema con los sustituyentes es que, tan pronto como alguien introduzca el texto en la forma de la forma, el sustituto desaparece, por lo que el visitante puede olvidar qué información debía completar. El código es:

Comparar con la forma de comentario del tema de los veinte veinte, que está preparado para la accesibilidad: