Pruebas de Accesibilidad Web con Teclado y Elementos Interactivos
Contenido del curso
Karla
Felipe Bernardo González Barranco
Lautaro Cabral
Esaú Maximino
Jhon Carlos Colorado Angulo
Christian Velázquez
Platzi Team
Felipe Bernardo González Barranco
Miguel Angel Reyes Moreno
Angel Espinoza
Erika Peña Montaña
Obed Paz
Gonzalo Blasco
Efraín Hernández García
Maria Cristina Ferraro Moretti
Maria Cristina Ferraro Moretti
Jose Tellez
Christian David Sánchez
Jhon Carlos Colorado Angulo
Daniel Andres Rojas Paredes
Jefred Bedoya
Carolina Gómez
Cristian Diaz
Héctor Eduardo López Carballo
Tania Sosa
luimarco daniel Carrascal Diaz
Pedro Isaac Aguilar
Jose Tellez
El teclado es muy importante en la accesibilidad web porque las tecnologías asistivas tienden a conectarse con el teclado para darle a sus usuarios diferentes maneras de navegar cuando no tienen acceso a un mouse o un teclado como nosotros.
Los elementos que reciben foco de teclado son elementos interacctivos:
Los div no reciben foco porque son un elemento presentacional, no esperan ninguna interacción a menos de que tú lo programes.
Gracias!!
OOOH con shift+tab se vuelve, no sabía, yo daba toda la vuelta a la página con tab si me pasaba
Para cambiar entre pestañas de Izquierda a Derecha es: Ctrl + tab Para ir de Derecha a Izquierda es: Ctrl + shift + tab
Igual, aprendo algo nuevo hoy.
Vaya!! Me encanta más el curso porque, me demuestra lo ognorante que soy en éste tema.
Igualmente compañero
Somos tres!
Lo más impresionante fue: Con la tecla "Tab" avanzamos y con la combinación "Shift + Tab" retrocedemos. No sabía cómo retroceder jajajaj
En donde trabajo tienen este concepto muy sostenido, ya que trabajamos para sistemas contables, hemos visto que los contadores casi no usan el mouse en los formularios para moverse entre los inputs, siempre utilizan el tab, ayudandolos a agiliazar sus registros.
Asi que nos piden que asignemos el tabindex manualmente para que pueda seguir una secuencia y el sistema no realize un salto no esperado de tabs que confunda al usuario.
De lejos este es el curso que más me ha tocado, tener la posibilidad de reproducir las discapacidades visuales de alguien más a través de estas herramientas me hace dar cuenta de lo difícil que puede ser para ciertas personas el acceder a servicios que usamos a diario.
La accesibilidad del teclado es uno de los aspectos más importantes de la accesibilidad web. Muchos usuarios con discapacidades motrices dependen de un teclado. Algunos tienen temblores que no permiten un control muscular fino. Otros tienen poco o ningún uso de las manos, o no tienen manos en absoluto. Además de los teclados tradicionales, algunos usuarios pueden utilizar teclados modificados u otro hardware que imita la funcionalidad de un teclado. Los usuarios ciegos también suelen utilizar un teclado para navegar. Los usuarios sin discapacidades pueden utilizar un teclado para la navegación por preferencia o eficiencia.
.
.
Muy bonita clase, me ha ayudado a entender mejor lo necesario de la accesibilidad.
yo les llamo elementos focuseables (focusables in english)...una forma de permitir a un elemento no focuseable que pueda recibir el foco es agregándole un tabindex=0... esto se hace mucho para cuando uno quiere que se le pueda seleccionar usando un screen reader y que se lea...
Todos estos problemas se solucionan con un buen HTML semántico.
Hola Juliana, tengo dos botones (que vienen siendo las banderitas para los idiomas que no reciben foco incluso si los cambio a <a></a>
Al final lo resolví pero porque necesitaba hacer otra cosa. Por si a alguien le pasa pues hay que separar los li, ya sea creando un nuevo <ul> <li></li> <li></li> </ul> dentro de ese o con <div> en vez de <li> dependiendo de lo que se quiera lograr... Yo en vez de button al final usé Link pero porque era React.
Viendo la pagina de Platzi, veo que con el tema de la navegación con el teclado puedes recorrer toda la pagina, solo tengo un inconveniente. Cuando estoy escribiendo un comentario el foco está dentro de la caja de texto y al pulsar Tab me genera un espacio y no puedo colocar el foco en el input. . ¿Cómo se puede resolver eso?
Las etiquetas Input y a si cuentan con focus del teclado.
Ahora veo mucho la importancia de accesibilidad. Muy buen curso hasta el momento.
hola, aprovecho para comentarle al que lea esto. yo hace unos años estaba muy bien de mis ojos pero de un timepo para aca empece a sufrir de ojo seco y de severa fatiga visual (vision borrosa y dolor de cabeza), me demore bastante en saber que existian los lectores de pantalla, mas en decidir adoptarlos, me gustaria que la secciond e comentarios fuera mas accesible el edit box funciona super bien, pero los botones mo son accesibles desde el edit. almenos ami me parece estoy aun aprendiendo, ( llegue a pensar que jamas podria volver a escribir codigo ) ,
La importancia del teclado en accesibilidad
El teclado es el eje de la navegación para usuarios que no usan ratón. Las tecnologías asistivas dependen de él para permitir el desplazamiento por el sitio.
Elementos interactivos y foco
Solo los elementos interactivos deben recibir foco:
Buenas prácticas de implementación
Tab para avanzar y Shift + Tab para retroceder, asegurando que el orden de navegación sea lógico.Pruebas manuales de accesibilidad con el teclado
Una de las pruebas manuales más importantes en accesibilidad web es la navegación con el teclado, ya que muchas tecnologías asistivas (como lectores de pantalla) dependen de él para permitir que los usuarios naveguen por una página.
No todos los elementos de una web deben recibir foco del teclado. Solo los elementos interactivos lo hacen, como:
Elementos como párrafos, títulos o imágenes decorativas no necesitan foco, a menos que estén programados para interactuar.
🔍 ¿Qué se evalúa al hacer la prueba?
Al analizar una página con el teclado se debe:
Inspección de elementos
Al inspeccionar el código:
<div> no reciben foco porque son presentacionales y no interactivos,input) sí reciben foco, lo cual es correcto.Sin embargo, a veces el foco no es visible porque en el CSS se elimina el outline.
Aunque es un patrón común de diseño, quitar el outline afecta la accesibilidad, ya que el usuario no sabe qué elemento está enfocado.
Conclusión
Las pruebas con teclado permiten comprobar que:
Este tipo de pruebas es clave para garantizar una buena accesibilidad web y una mejor experiencia para todos los usuarios.
Bajo la lógica de que un elemento que se haga focus con el teclado debería tener interacción, ¿sería bueno entonces agregarle el focus a, por ejemplo, una card animada que sólo muestra la información completa una vez le colocas el mouse por encima?
Lo digo porque si no se le pudiera hacer focus al elemento, un usuario que navegue solamente usando el teclado no podría ver el contenido del sitio y eso sería un problema de accesibilidad ¿verdad?
Estás en lo correcto, Cris.
¡Hola Cris! 😄
Si, coincido contigo en que agregar focus es una excelente forma de lograr que tanto la navegación con teclado y el lector de voz para personas ciegas funcione de una mejor manera. Si tu Card incluye alguna fotografía o elementos gráficos también es importante que la describas en la etiqueta ALT
¡Nunca pares de aprender! 💚
tamalito
El teclado es una herramienta útil para manejar las tecnologías asistivas y así permitir el desplazamiento por la pantalla para personas con discapacidades visuales o para personas que no cuentan con un mouse. . Es importante destacar que ++no todos los elementos de un sitio web pueden recibir foco con el teclado, sólo aquellos que son interactivos (formularios, links, botones, chatboxes, etc.) son los únicos que sí pueden ser manipulados por medio del teclado++. Generalmente las fotos, imágenes y textos no reciben foco, a menos que sean interactivos, es decir, que lleven al usuario a otra parte del sitio o generen una acción. . En el tecado asistivo, nos movemos hacia adelante con la tecla Tab y hacia atrás con la tecla Shift.
Y no solo hablando en terminos de accesibilidad resulta importante pensar en que toda la web sea manejable con el teclado, sino que también hablando en terminos de usabilidad para los usuarios que no tienen discapacidades puesto que es mucho fácil y agil usar solo el teclado para navegar que hacerlo en combinación con el mouse. Tal vez no aplique para todos las paginas y / o secciones, pero lo mejor es que las paginas puedan ser 100% manejadas solo con el teclado. . Ahora me pregunto ¿Lo unico que se puede hacer con el teclado es usar el tab y shit tab? ¿O hay otras combinaciones para navegar a través de la pagina? Sé que con Ctrl + Tab se cambia de pestaña. Pero, escribiendo este comentario me doy cuenta... ¿Cómo puedo enviarlo usando solo el teclado? . Si pulso tab, me genera un espacio y no me hace foco en el boton de enviar