Hola a todos, mi nombre es Graham Armfield de
Coolfields Consulting y mi presentación
se llama "¿Cómo puedo saber si mi WordPress
¿el sitio web es accesible?
Es una presentación que he hecho varias veces
antes, pero lo he actualizado recientemente para que
va a conseguir la nueva versión.
Antes de empezar, un poco sobre mí. Soy un Web
Consultor de accesibilidad y su significado
es que mi trabajo diario es trabajar con organizaciones
para ayudarles a mejorar la accesibilidad de
sus ofertas digitales, ya sean sitios web
o aplicaciones. Hago pruebas de accesibilidad, y trabajo
con los diseñadores y desarrolladores para mejorar la
situación. También dirijo muchos cursos de formación,
con otra empresa, para desarrolladores web.
En realidad soy un desarrollador web y he construido
muchos sitios web accesibles que utilizan WordPress sobre
los años. Así que aquí vamos, eso es un poco sobre
a mí.
Antes de empezar con el material principal
Voy a hablar un poco de por qué la accesibilidad
es importante. Estoy seguro de que la mayoría de ustedes entenderá
esto de todos modos, pero en realidad el objetivo, con sitios web
es hacerlos lo más accesibles posible.
Porque si tienes un sitio web que está vendiendo
productos o servicios, es importante que
puede vender al mayor número de personas posible.
Y algo así como el 20 o 25% de la población
pueden tener diferentes necesidades de acceso cuando se trata de
a los sitios web. Esto puede ser causado por condiciones
como ceguera o mala visión, daltonismo,
dislexia, TDAH, autismo, sordera, personas que
son duros de oído o personas que son como
mis padres, que se están haciendo viejos.
Y es importante que mientras se tiene una
un sitio web accesible es genial, aunque sea pequeño
las mejoras pueden marcar la diferencia para todos.
Esta fotografía de aquí - te preguntarás por qué
Te lo estoy mostrando - es la colina que sube desde
el extremo norte del Puente del Milenio
en Londres, que lleva a la Catedral de San Pablo
que puedes ver en la distancia.
Y es efectivamente una larga colina, y es
una escalera la mayor parte del camino. Pero cuando
lo construyeron pusieron esta rampa que puedes ver
allí también. Y estoy seguro de que la gente
quien diseñó esto se imaginó que eso
ser utilizado por personas que utilizan sillas de ruedas,
o personas que también usan buggies.
Pero, de hecho, si te paras aquí, como lo hice en
este día bastante húmedo hace un par de años,
puedes ver que en realidad la mayoría de la gente que
subir esta colina, o bajar esta colina, se
utilizar realmente la rampa en lugar de utilizar
las escaleras. E ilustra lo accesible
funciones que puede añadir a sus sitios web
puede realmente ayudar a todos, en lugar de la
personas a las que iban dirigidas.
Así que, lo que voy a cubrir.
Estoy familiarizado, he estado en la accesibilidad para
desde hace unos 20 años. Estoy familiarizado con el
Directrices de Accesibilidad al Contenido en la Web - conocidas
como WCAG para abreviar. Actualmente estamos en la versión 2.1
y estos son un buen recurso para la web
accesibilidad. Pero hay mucho material
allí, y si no estás familiarizado con el
territorio pueden ser bastante difíciles de interpretar.
Vale la pena echarle un vistazo, pero ya sabes
pueden ser un poco impenetrables realmente.
¿Qué le parece si tiene una simple lista de comprobación de "sí" y "no"?
Cosas que podrías comprobar fácilmente en tu
propio sitio web con algunas herramientas gratuitas? Y eso es
de lo que trata esta presentación.
En la media hora que tengo disponible
sin embargo, sólo puedo cubrir algunas accesibilidades comunes
problemas. Tengo tiempo para cubrir todo,
así que he sacado algunos comunes, y algunos significativos
problemas de accesibilidad que he encontrado en los sitios web
a lo largo de los años. Pero si puede responder a todas
las preguntas con éxito, entonces su sitio web
va a ser mucho más accesible que
muchos sitios web que existen.
Así que empecemos.
Las primeras cuestiones de las que voy a hablar
sobre tienen que ver con la interacción con el teclado.
Este es un aspecto muy importante de la accesibilidad
porque algunas personas no pueden usar un ratón o un trackpad
o comandos táctiles, tal vez porque han
tiene algún tipo de impedimento motor con su
miembros superiores. Así que podrían tener que
dependen de los teclados para utilizar realmente sus máquinas,
incluyendo la navegación por sitios web.
Además, las personas que utilizan lectores de pantalla, y que
son típicamente personas ciegas, pero no exclusivamente
ciegos, si estoy usando un lector de pantalla
en una máquina de escritorio o portátil, entonces estoy
también va a utilizar pulsaciones de teclas para realmente
emitir comandos al lector de pantalla todo el
tiempo. Por eso es importante que consigas el teclado
accesibilidad a la derecha.
Así que el primer par de preguntas, y como dice
allí, tienes que contestar que sí a las dos cosas.
¿Puedo ver fácilmente dónde está el foco del teclado?
Y la segunda, ¿puedo acceder fácilmente a todos los
partes del sitio utilizando sólo el teclado.
Este es sobre la navegación entre su
páginas.
Pero el primero - puedo ver fácilmente donde
¿el enfoque del teclado es? Si soy un vidente del teclado
usuario voy a usar mucho el tabulador,
para desplazarse dentro de una página, a los enlaces y
botones dentro de la página que me permiten
visitar otro lugar, o hacer algún tipo de funcionalidad.
Es muy importante que pueda ver fácilmente
donde se encuentra actualmente el foco del teclado. En muchos
sitios web que no es el caso.
El segundo. Sí, he mencionado que se trata de
la navegación. Quiero poder acceder a todos los
partes del sitio si soy un usuario del teclado.
Y lamentablemente en muchos sitios web, la navegación
no siempre atiende a los usuarios del teclado. Así que
vamos a ver un par de ejemplos
de estos ahora.
Así que gov.uk es un sitio muy famoso en el Reino Unido.
Una gran cantidad de información sobre cosas que hacer
con el gobierno y los impuestos, y los permisos de conducir,
pasaportes, etc, etc. Una de las grandes cosas
es que tiene un muy buen enfoque del teclado
indicación. Así que aquí he llegado a la cima de la
página, y he tabulado un poco y estoy
ahora en este enlace aquí - el que tiene
un fondo amarillo.
Toda la indicación de enfoque en este sitio es muy
obvio, que los usuarios de teclados videntes
realmente agradecerles. Bien, ese es un ejemplo
de una indicación de enfoque muy buena.
Aquí hay otro sitio web, y es una empresa
con el que trabajo mucho: Inclusión Hassell.
Hay un buen y claro enfoque del teclado en todas partes
en este sitio. Además, la navegación es totalmente
accesible también. Tengo estos submenús
que salen de aquí, indicados con las flechas
aquí, y estos son totalmente accesibles con el teclado
también. Para que los usuarios del teclado puedan llegar a todas partes
en el sitio.
Un sitio web que no lo hace bien... Es
no es un sitio de WordPress, pero aquí
el sitio de los cines Odeon. Si paso por encima de esto
enlace aquí - What's On, I get this panel that
sale, y tiene una función de búsqueda y
un montón de enlaces que me llevan a las distintas películas
y lo que tienes y todo. Eso es genial,
por lo que puedo moverme por el sitio con bastante facilidad.
Sin embargo, si en lugar de eso, hago un tabulador hacia ese enlace, me
no llegan a ver ese panel, y por eso no he
tiene acceso a la facilidad de búsqueda allí, y
estos diversos enlaces y lo que tienes. DE ACUERDO,
por lo que no es una buena experiencia para el teclado
usuarios.
Siguiente par de preguntas. ¿La pestaña del teclado
¿tiene sentido el orden? y ¿puedo acceder fácilmente a
¿toda la funcionalidad sólo con el teclado?
El primero de ellos, el orden de las pestañas del teclado.
El navegador establece el orden de las pestañas al cargar
la página, e idealmente debería seguir el
el orden del contenido. Y si tienes el orden de las pestañas
saltando de un lado a otro de la página puede llegar a ser realmente
confuso para la gente. Una vez más
se puede probar esto usando la tecla de tabulación.
La segunda, la cuarta pregunta, ¿puede
Accedo fácilmente a todas las funciones con el teclado
¿sólo? Esto no se refiere a la navegación,
se trata de la interactividad en sus páginas.
Y son cosas como ventanas modales, etc.
Veamos ahora un ejemplo de ello. Este
es un sitio de WordPress que utiliza un plugin de lightbox.
Y si no estás familiarizado con lo que
es que tengo estas pequeñas versiones de las imágenes
aquí. Si hago clic en la imagen, o pestaña a la misma,
pulsar la tecla enter me muestra realmente un
versión de tamaño completo de la imagen así,
en una superposición sobre la página subyacente.
El problema aquí con este plugin en particular
es que el foco del teclado se queda realmente en el
página de abajo. Así que ahora los usuarios del teclado van a
de luchar para llegar a estos botones en el
inferior, que me muestran el anterior y el siguiente
imagen en la serie, o cerrar la imagen completamente.
Sólo que no puedo llegar allí si soy un usuario de teclado,
por lo que es un verdadero problema.
También en el sitio web de Jetpack. Sobre todo, este
sitio web es bastante bueno desde el punto de vista de la accesibilidad
perspectiva. Sin embargo, tiene este lenguaje
selector de aquí, y si me tabulan a que, pulse
la tecla enter, se abre el selector de idioma.
Pero una vez más el enfoque del teclado sigue siendo
la pantalla subyacente, y así el teclado vidente
los usuarios se esforzarán por seleccionar realmente
diferentes idiomas en este sitio. Así que eso es
no es algo bueno.
Bien, alejándonos de la interacción con el teclado,
hablemos de enlaces. El primero aquí,
y tiene que responder afirmativamente a esta - ¿Es
¿sus enlaces, obviamente, son enlaces?
Ahora es una convención desde los albores de la
web que los enlaces se marquen con subrayados.
Sin embargo, este tema de WordPress en particular realmente
elige no hacerlo. Ha tomado los subrayados
lejos de todos los enlaces, y puedes ver esto
párrafo de texto a la izquierda aquí sobre Exeter
tiene muchos enlaces. Están marcados con
texto verde. ¿Cuánto más fácil es ver estos
enlaces cuando he revertido los subrayados de nuevo
¿otra vez?
Porque los usuarios daltónicos o con
la mala visión tendrá dificultades para ver los enlaces
en el lado izquierdo, porque el texto verde
es bastante similar al texto gris. Bien, entonces
cosas que hay que evitar allí.
La siguiente sobre enlaces - Haz todos tus enlaces
proporcionar suficiente información para indicar dónde
¿a qué conducen?
Aquí estamos viendo los problemas para el lector de pantalla
usuarios - normalmente personas ciegas como he dicho antes.
Así que aquí tengo un sitio de WordPress, se trata de
un plugin que está disponible. Tengo un enlace
aquí que dice 'Click here' que es para encontrar
más. Tengo otro enlace que dice
Haga clic aquí" para leer los términos y
condiciones. Ahora no tengo ningún problema
en el verbo aquí, porque obviamente no todo el mundo es
clic, pueden estar tocando o el teclado
con la pestaña.
El problema es que para los usuarios de lectores de pantalla, es
que a menudo los usuarios de lectores de pantalla utilizarán la funcionalidad
como este - que es una lista de todos los enlaces
en la página que pueden consultar.
Y esto es usando el lector de pantalla NVDA que
está disponible para Windows y tiene esos
dos enlaces allí. Ahora me llevan a dos diferentes
lugares, pero no hay nada evidente en el
texto del enlace para decirme a dónde van
llévame a mí. Y la razón por la que eso es importante
aquí es porque puedo usar esta caja aquí para
realmente seguir los enlaces desde aquí, más bien
que volver a la página subyacente.
Bien, eso es bastante fácil de arreglar en realidad. Bastante
fácil de probar, y bastante fácil de arreglar. se puede
cambiar el contenido para que diga algo como "Buscar
cómo actualizamos el plugin" y "términos y
condiciones".
Así que ahora cuando estoy usando un lector de pantalla y
Si subo la lista de enlaces es mucho más
es obvio para qué sirven estos enlaces.
Así que es mucho más fácil para los de la derecha
lado para un usuario de lector de pantalla.
OK, queremos evitar esto, mucho 'clic'
aquí y 'leer más' en todas sus páginas.
Hablemos un poco de las imágenes y el vídeo. El
siguiente pregunta - ¿Todas sus imágenes tienen la
¿texto alternativo? Y se puede probar esto bastante
fácilmente utilizando una extensión del navegador llamada Wave,
que le mostrará el texto alternativo
es para las imágenes.
Esto es importante para los usuarios de pantallas, que pueden
ser ciegos, porque sabrán que hay
una imagen allí, potencialmente, pero querrán
para saber qué significa la imagen OK. Así que cuando estás
establecer su texto alternativo en el clásico
editor que utilizaría esta caja aquí. Y es un
buena idea, incluso si usted está suministrando el título,
para establecer también el texto alternativo.
Y así es como se ve usando el Gutenberg
editor también - el mismo tipo de cosas. Usted es
ayudar a los usuarios de lectores de pantalla aquí.
Si tienes imágenes que son enlaces, y a menudo
en la página de índice de tu blog lo harás,
su tema de WordPress puede hacer que estos
imágenes que están aquí en la página de índice del blog
en realidad un enlace a la entrada del blog. Y esto
es un tema de WordPress que he utilizado para mi
propio sitio web de música y el tema de WordPress
lo hace por mí automáticamente. En realidad
pone el destino del enlace como el alternativo
texto para esta imagen en lugar de que diga
'yo tocando la guitarra', que es mucho más
útil.
Y puedes ver aquí que tengo el subyacente
código. Tengo este enlace aquí, y el único
en ese enlace es esta imagen. Y la
El texto alternativo, en este caso, se convierte en
el texto del enlace para esa imagen. Así que eso es bueno.
Ahora bien, no todos los temas lo hacen, lamentablemente. Este tema en particular
tema no lo hace. Así que aquí tengo una lista
de enlaces en mi lector de pantalla y este es el
imagen destacada para esta entrada del blog en particular
que se llama ISTC Área Sur. Y eso es
la entrada del blog, es un enlace a la entrada del blog,
pero este es también un enlace a la misma entrada del blog
pero el texto alternativo es koala bear. Eso es
no es un gran texto alternativo, porque en realidad es
no es realmente sobre los osos koala. Es sólo que
eligió por casualidad esta imagen como
imagen para esa entrada del blog.
La siguiente es en torno a los vídeos. Pregunta ocho
- ¿Todos tus vídeos tienen subtítulos?
Este soy yo haciendo esta misma presentación algunos
hace tiempo y hay un vídeo de ello en YouTube.
Y me he asegurado de que todos los subtítulos fueran
correcto. Obviamente, los subtítulos son importantes
para personas sordas o con problemas de audición,
pero en realidad muchas otras personas utilizan subtítulos
al ver los vídeos también - tal vez en
un entorno ruidoso.
La siguiente sección es un grupo de cosas alrededor de
señalización de su contenido. Y principalmente aquí
ayudamos a los usuarios de lectores de pantalla.
Así que la siguiente pregunta - ¿Son los títulos de sus páginas
¿único y significativo? Y, obviamente, usted
necesita responder afirmativamente a esto.
Por lo general, esto se soluciona con
Temas de WordPress. Aquí tengo el título de la página.
Es lo que se muestra en la pestaña del navegador en el
superior aquí, y normalmente será lo que
el título de la página se establece en su WordPress
editor. Y eso es genial. Por qué esto es importante
es el elemento título se establece aquí, y cuando
un usuario de un lector de pantalla llega a una página para
la primera vez la primera cosa que se pone
que se les lee es el título de la página. Por lo tanto
les ayuda a saber que están en lo correcto
lugar. Y se puede comprobar esto verificando el
pestañas del navegador en la parte superior aquí.
El siguiente - ¿Sus páginas utilizan la
¿títulos y subtítulos?
Una vez más, es muy importante para el lector de pantalla
usuarios. Bien, puedes probar esto usando un navegador
extensión llamada Wave, y aquí tengo un
encabezando el nivel 1, porque Wave también le muestra
los niveles de encabezamiento aquí. La rúbrica de nivel superior,
y los títulos de segundo nivel aquí. Bien, y esto
es una buena cosa que realmente está utilizando
los encabezados correctamente.
La razón por la que es bueno para el lector de pantalla
usuarios es porque una vez más en NVDA, se puede
utilizar esta lista de elementos aquí que en realidad
le mostrará una lista de las rúbricas de un
página. Así que si puedo encontrar un título que me interese
en, puedo saltar rápidamente a esa rúbrica y
me trasladará a que esa sección del
página.
Lo más importante es que NVDA expone
la jerarquía de los títulos, si estoy viendo
aquí o escuchar que me lo anuncien. Y
por lo que me ayudará a construir una imagen de cómo
la página está estructurada. Por eso es importante
para intentar que su jerarquía de encabezamiento sea lo más exacta posible
como sea posible.
Otra forma en que los usuarios de lectores de pantalla pueden moverse
alrededor de las páginas es utilizar puntos de referencia. Entonces, ¿qué son
puntos de referencia que puedo oírte decir.
Pues bien, los puntos de referencia son áreas predefinidas dentro de
páginas. Por ejemplo, el banner, la navegación,
contenido principal, pie de página, una barra lateral si tiene
uno. Y los usuarios de lectores de pantalla pueden saltar
la página a estas distintas secciones.
Bien, ¿cómo se usan esos?
De hecho, la mayoría de los temas de WordPress ahora son
utilizando elementos seccionales de HTML5. Y es lo que
son para, en realidad proporcionan puntos de referencia
para los usuarios de lectores de pantalla. Por eso son
allí, una característica de accesibilidad.
Así que tengo <header>, <nav>, <main>,</main></nav></header> <header> <nav> <main> <footer></main></nav></header>
y <aside>. Y estos equivalen a puntos de referencia.</aside>
Pero, ¿cómo se comprueba eso? me pregunto.
Pues bien, existe una extensión del navegador para ello
también. OK, Navegación por los puntos de referencia a través del teclado
o Pop-up. Está disponible en Chrome y Firefox,
y te mostrará todos los puntos de referencia en
una página. Lo cual es útil saber, para poder
probar sus propias páginas rápidamente. Y hay
un problema clave con este tema de WordPress sin embargo,
no muestra el hito principal en ninguna página
o puestos.
Y esta es probablemente la más importante
en cada página, es el principal punto de referencia, es
donde está el contenido principal, pero no está aquí.
Bien, dejando de lado la señalización de su contenido,
hablemos del formato del texto.
Esta pregunta - ¿Puedo cambiar el tamaño del texto en una página
¿sin romper el diseño? Esto sigue ocurriendo
en muchos sitios web. Es importante
para personas con mala visión que quieran
que las cosas sean más grandes, de acuerdo.
Un ejemplo de dónde no está bien... No
un sitio web de WordPress este, y es bastante
viejo. Es una lista de enlaces en una caja, y esto
es lo que parece cuando hago el texto
más grande. Los enlaces se han derramado porque
ocupan más espacio. Se han derramado fuera
la caja y han comenzado a derramar sobre otros
bits en la página.
Es importante tener en cuenta que el cambio de tamaño del texto
y el zoom no son lo mismo. Son
ambas características que ofrecen todos los navegadores, y
la gente los utiliza de diferentes maneras. Es lo típico,
estamos hablando de personas con poca visión
aquí, que quieren que las cosas sean más grandes. Algunas personas
hará zoom, algunos cambiarán el tamaño del texto. Usted
necesita probar esto, con sus propios sitios web
aquí para asegurarse de que no se rompe en
de esta manera.
Aquí hay algunos ejemplos más que he encontrado recientemente.
Así que hay muchos choques ahí, y ahí,
y algún truncamiento, donde se está llegando a
el punto de que es difícil leer algunos
de estas cosas cuando he hecho el texto más grande.
El siguiente tema que vamos a tratar es el formato
texto totalmente justificado.
Bien, aquí hay un párrafo de texto sobre Exeter
- que está alineado a la izquierda. Esto es lo que parece
como cuando está plenamente justificado.
Lo que el navegador está haciendo es estirar
los espacios entre las palabras, y esto crea
un poco de carga cognitiva para todos.
Y lo que he indicado aquí es un efecto
que se puede conseguir llamado "Ríos de blanco".
espacio", que, si eres disléxico, podrías
reconocer este término, porque plenamente justificado
texto puede hacer la vida muy difícil para algunos
disléxicos.
Tengo un amigo que es significativamente disléxico.
Simplemente no sería capaz de leer ese texto
en el lado derecho porque el espacio en blanco
se encargaría de ello.
Entre el 8 y el 10% de la población tiene
alguna forma de dislexia, así que eso es un montón de
personas.
OK mirando la entrada del usuario. Los campos del formulario. Es
es importante que todos los campos del formulario tengan un
etiqueta adjunta.
Esto es importante para los usuarios de lectores de pantalla
porque una etiqueta les dice lo que la entrada
campo. Y es importante que el
está vinculada mediante programación a la entrada
para que el lector de pantalla lea el
texto correcto al usuario cuando llega a
un campo de entrada.
Y aquí he probado esto con el navegador Wave
y me da estos iconos verdes
en este formulario aquí, donde las etiquetas están correctamente
asignado con los campos de entrada.
Sin embargo, no siempre es así. Y aquí
He utilizado el plugin Contact Form 7 en un sitio web,
sólo para probarlo. Y esto es con el valor por defecto
y, lamentablemente, las etiquetas son
no está correctamente vinculado a los campos de entrada, por lo que
esto hará que la vida sea muy dura para la pantalla
usuarios del lector. Así que puedes probarlo con Wave.
Bien, pasando a la última sección, y a la
última pregunta sobre el contraste de colores.
Esta no es una foto de mi madre, pero yo
la han visto quejarse de los sitios web en los que
es imposible hacer las cosas porque
el contraste de colores no es lo suficientemente claro.
Y aquí hay un sitio web de WordPress donde desafortunadamente
han elegido los colores de la marca que proporcionan
un montón de problemas de contraste de color, justo a través de
el sitio.
Y estoy utilizando una herramienta llamada Color
Analizador de contraste. Le mostraré el enlace
para eso en un momento. Y puedes elegir el
el color de primer plano y el de fondo y
le dirá inmediatamente si hay
suficiente contraste de color, a un algoritmo
que especifican las directrices WCAG. Y en este
caso hay muy poco en realidad que cumpla
el requisito.
Puede utilizar esa herramienta para probar sus páginas o
puede utilizar esta otra extensión del navegador llamada
aXe. Está disponible para Chrome y Firefox,
y realmente te mostrará mientras un diseño
le muestran bastantes problemas de accesibilidad,
incluyendo problemas de contraste de color. Y el
El problema aquí es que el texto verde no tiene suficiente
contraste con el fondo blanco.
Bien, esas son todas las preguntas, 15 preguntas,
y aquí hay algunos recursos útiles.
El primero es un enlace a ese contraste de colores
herramienta de la que acabo de hablar. Está disponible
para Mac, así como para máquinas Windows y
entonces tengo las dos extensiones del navegador.
Wave está disponible para Chrome y Firefox.
aXe está disponible para Chrome, Firefox y
Edge, pero es el nuevo Microsoft Edge. Y
Espero que la herramienta Wave esté disponible para
Edge antes de que pase mucho tiempo.
Bien, un par de enlaces más útiles. He escrito
muchas entradas de blog sobre la accesibilidad - no
sorprendentemente - y aquí hay uno de 10 años
hace sobre la redacción de un buen texto alternativo para
sus imágenes. Aunque tenga 10 años,
el material de esta entrada del blog sigue siendo muy
relevante. Bien, entonces podrías echar un vistazo a
eso.
También he escrito algunas entradas en el blog sobre
hacer correctamente los campos del formulario. Hay algunos
allí para que pueda seguir eso y será
mostrarte una lista de los mismos allí también.
Y allá vamos. Esta es mi presentación sobre
¿Cómo puedo saber si mi sitio web de WordPress es accesible?
