Haciendo las interacciones accesibles para todos los usuarios

Rate this content
Bookmark

¿Son accesibles tus sitios web para todos los usuarios? ¿Todos los usuarios pueden interactuar con tu aplicación como se pretende independientemente de sus discapacidades? La accesibilidad a menudo sigue siendo una idea secundaria incluso en la actualidad, y estoy aquí para compartir cómo podemos cambiar eso. En esta charla, exploraremos las mejores prácticas para diseñar y construir interacciones de usuario para sitios web que sean accesibles y fáciles de usar para nuestros usuarios. Utilizando HTML semántico y atributos ARIA, cubriremos estrategias de interacción desde un simple botón, hasta la navegación, los diferentes elementos de formulario y componentes personalizados.

30 min
02 Jun, 2023

Video Summary and Transcription

La charla de hoy explora cómo hacer las interacciones web accesibles para todos los usuarios. Se enfatiza la importancia de la accesibilidad y las diversas formas en que los usuarios interactúan con la web. La charla aborda problemas comunes de accesibilidad con botones, enlaces, formularios e información dinámica. También se discute el uso de etiquetas ARIA, manejo de errores y modelos. Se destaca la importancia de convencer a la alta dirección sobre la accesibilidad y las limitaciones de las pruebas automatizadas. La charla concluye con recomendaciones para lectores de pantalla y consideraciones para botones de iconos.

Available in English

1. Introducción a la Interacción Web

Short description:

El tema de hoy es hacer que las interacciones sean accesibles para todos los usuarios. Comenzaremos con breves presentaciones y luego exploraremos cómo los usuarios interactúan con la web y cómo hacerla accesible. Soy un consultor frontend y un Experto en Desarrolladores de Google. Definamos la interacción como el contacto entre el usuario y la interfaz. Ejemplos de interacción web incluyen hacer clic, pasar el cursor, desplazarse y escribir.

Gracias, Metin. También es un honor para mí ser presentado por Metin. Es como mi MC favorito, así que sí.

Y hola a todos. Espero que estén disfrutando de la conferencia hoy. En primer lugar, me gustaría pedirles nuevamente que aplaudan a todos los organizadores y a todos los voluntarios. Han estado haciendo un gran trabajo organizando esto. Así que aplaudamos. Increíble.

Entonces, mi tema de hoy es hacer que las interacciones sean accesibles para todos los usuarios. De acuerdo. Bien. Así que la agenda es que comenzaremos con algunas breves presentaciones. Luego veremos un poco cómo los usuarios interactúan con la web y cómo podemos hacerla accesible, ¿de acuerdo?

Antes de comenzar, una breve introducción sobre mí. Trabajo como consultor frontend aquí en Ámsterdam. Soy un Experto en Desarrolladores de Google para web. Microsoft MVP. Embajador de Women Techmakers y Embajador de Cloudinary. Pueden conectarse conmigo en LinkedIn o Twitter en anrada15 o en Twitter en Miracle Underscore 404. Así que empecemos.

¿Qué es exactamente la interacción? En términos simples, significa que ha ocurrido algún contacto entre el usuario y la interfaz. Entonces, el usuario podría haber realizado alguna acción y hay alguna respuesta de la interfaz y eso se llama interacción.

Entonces, ¿cómo interactuamos todos con la web? ¿Puedo obtener algunos ejemplos? ¿Qué hacemos para interactuar con la web? Abrir un sitio web. ¿Qué hacemos? Hacer clic. Sí. Pasar el cursor. Desplazarse. Tabulador. Tecla de tabulación, sí. ¡Increíble! También escribimos cuando vemos un cuadro de entrada o algo así.

2. Understanding Web Interaction and Accessibility

Short description:

Interactuamos con la web de diversas formas, como completar información, pasar el cursor, desplazarnos y usar pestañas. La accesibilidad es crucial porque construimos para usuarios diversos con diferentes discapacidades que interactúan con la web utilizando diversas tecnologías de asistencia. Podemos acceder a la web utilizando un mouse, teclado, lectores de pantalla, lectores de braille y más. Es importante tener en cuenta las diferentes formas en que los usuarios navegan e interactúan con la web.

Tenemos que completar la información. Pasamos el cursor. Nos desplazamos. Usamos las pestañas, por supuesto. Estas son las formas en las que interactuamos. Veremos más en un momento.

Pero antes de eso, ¿qué es la accessibility? La accessibility significa hacer que los recursos y servicios sean utilizables por todos, independientemente de sus discapacidades. Ahora, ¿por qué debemos preocuparnos por la accessibility? Porque todo lo que construimos, lo construimos para nuestros usuarios. Entonces, los usuarios deberían poder usarlo, ¿verdad? Tenemos usuarios muy diversos. Pueden tener diferentes tipos de discapacidades. Y dado que tienen diferentes tipos de discapacidades, también interactúan con la web de diferentes formas. Diferentes tipos de tecnologías y dispositivos. Y se llaman tecnologías de asistencia.

Entonces, hay varias formas en las que podemos acceder a la web. Podemos usar el mouse normal, podemos usar el teclado, lectores de pantalla, lectores de braille , un interruptor de pantalla braille y mucho más. Hay muchas más opciones. Así que ahora volvamos a revisar. Sí, interactuamos con la web de estas formas. Pero también podemos usar la tecla de tabulación. Podemos usar la tecla Enter si queremos ir allí. Si no podemos hacer clic. Si no podemos usar un mouse. Entonces, tal vez solo dependamos del teclado. Entonces iremos y presionaremos Enter en él. La barra espaciadora, podemos usar la tecla de tabulación, escape para alejarnos de un modelo, podemos usar las teclas de flecha para navegar. Así que hay muchas formas en las que podemos navegar. Y esto es algo de lo que debemos ser conscientes. Ahora mostraré algunos ejemplos. Y el enlace está en Code Sandbox y compartiré las diapositivas al final. Así que no se preocupen por eso.

3. Inaccessible Behavior with Buttons

Short description:

En este escenario, nos encontramos con un comportamiento inaccesible con los botones. Al usar el teclado, no hay interacción visual que indique el enfoque actual. Este problema común es causado por un estilo simple en el código. Al revisar nuestros bases de código, es posible que encontremos esta línea problemática.

Y los ejemplos son bastante simples, no tan complejos. El formato es simplemente mostrar un escenario inaccesible. Luego veremos cómo podemos solucionarlo. Y cuál debería ser el comportamiento accesible.

Entonces, el primer escenario es el botón. Muy simple, ¿verdad? Pero los botones están en todas partes. Botones y enlaces. No podemos hacer nada al respecto. En cualquier lugar al que quieras ir, usarás botones, usarás enlaces para navegar, y así sucesivamente. Así que veamos. De nuevo.

Aquí hay un botón, tal vez registrarse, iniciar sesión. Hago clic en él, algo sucede. Aquí solo sucede un mensaje y así sucesivamente. Así que puedo hacerlo bastante bien cuando uso el mouse. Pero comencemos a usar el teclado. ¿El tamaño de fuente está bien? Así que comienzo a usar la tecla de tabulación. Presiono la tecla de tabulación. ¿Puedes decirme dónde estoy actualmente, si estoy presionando la tecla de tabulación? Presiono la tecla de tabulación nuevamente. No lo sabemos, ¿verdad? No hay interacción visual. Entonces, si quiero saber, si solo estoy usando el teclado y quiero ir a iniciar sesión, como, presionar enter, solo por mi deseo o simplemente contar, y luego, bien, he presionado tantas teclas de tabulación. Tal vez esté en el botón correcto y así sucesivamente. No. Pero lamentablemente, este es un comportamiento muy común que vemos en todos los sitios web.

El culpable es un estilo muy simple. Cuando nos enfocamos en algo, sé que debería estar enfocado en un botón. Así que vayamos a un botón y digamos enfoque. Y vemos que hay un estilo. Esta única línea de código es la culpable. Y si vamos y revisamos en nuestras bases de código, tal vez en muchas bases de código busquemos y encontraremos esto, es un pecado.

4. Mejorando la accesibilidad con contornos elegantes

Short description:

Al usar botones, el contorno predeterminado del navegador proporciona retroalimentación sobre el enfoque actual. Sin embargo, los diseñadores a menudo encuentran estos contornos feos y prefieren darles estilo para que coincidan con el sistema de diseño. Al usar HTML no semántico, como SVG o iconos, con eventos onClick, no son accesibles para los usuarios de teclado. En su lugar, deberíamos usar un elemento de botón. En casos raros donde se necesita un elemento no nativo, se debe agregar código adicional, como el índice de pestaña y el rol, para la accesibilidad mediante el teclado.

Debería considerarse un pecado. Pero de todos modos, si lo quito, ahora, nuevamente, si presiono la tecla de tabulación, tal vez no se vea correctamente, pero hay un contorno azul en él. Entonces, hay un contorno predeterminado del navegador que se muestra en el botón. Pero aún así te brinda una retroalimentación de dónde estoy actualmente, ¿verdad, o en todas partes?

Ahora, la mayoría de las veces, los diseñadores piensan que son feos. Así que los contornos feos son una noción muy común en nuestro desarrollo web. Pero podemos cambiarlo. No tiene que ser el comportamiento del navegador. Podemos usar algún estilo relacionado con nuestro tema, nuestro diseño sistema, y podemos mejorarlo un poco. Por ejemplo, en lugar de decir `outline: none`, puedo hacer algo. Puedo agregar un poco de desplazamiento, un poco de color, y de repente se verá un poco mejor y se corresponderá con la paleta de colores que tengo.

Entonces, lo segundo, cuando tenemos botones como estos, que solo tienen un icono, no tenemos ningún texto. Tenemos un icono y queremos hacer algunas interacciones. Ahora, nuevamente, puedo verlo. Puedo hacer clic en él. OK, funciona. Lo sé. OK, tal vez estoy favoreciendo algo. Pero muchas veces usamos HTML no semántico para esto. Tal vez tenemos un SVG o una imagen o un icono y seguimos adelante y le agregamos un onClick. Cuando hacemos eso, estas cosas no son accesibles para los usuarios de teclado. Porque, dado que no son semánticos, no obtienen accesibilidad mediante el teclado de forma predeterminada. Entonces, ¿qué deberíamos usar en su lugar? Deberíamos usar un botón. Eso lo veremos en un momento. Pero me gustaría decir una cosa aquí, que hay algunas veces en las que estamos creando algo que no es nativo, tal vez HTML no tiene un elemento nativo para eso. Un escenario muy raro pero puede suceder. En esos casos, necesitamos agregar un código adicional para que sea interactivo. Como el índice de pestaña, le asignamos un rol adecuado. Y además de agregar solo onClick, también necesitamos agregar key down. Para que los usuarios que usan el teclado también puedan realizar la acción.

5. Comportamiento accesible de los botones

Short description:

Si tenemos un elemento HTML nativo como un botón, es mejor usar HTML semántico. Sin embargo, cuando se utiliza un botón solo con icono, los usuarios de lectores de pantalla pueden no saber su propósito. Para solucionar esto, podemos proporcionar texto utilizando etiquetas ARIA o crear un componente oculto visualmente con un nombre. Además, para los botones de alternancia, podemos usar aria-pressed para indicar el estado actual.

Pero no lo hagas solo por un botón o algo así. Si tenemos un elemento HTML nativo, vamos a usar HTML semántico. Por lo tanto, vamos a usar el botón. Entonces, una vez que usemos un botón, seguirá funcionando así, ¿verdad? Entonces, aquí también es un botón. Y no lo he quitado. De todos modos, sí.

Entonces aquí puedo presionar y puedo presionar y funciona. Ahora hay dos problemas más con esto. Dado que solo es un botón con icono, ¿cómo sabe un usuario de lector de pantalla qué es este botón? No conocen su nombre. Entonces podemos proporcionarle algún texto. Podemos usar etiquetas ARIA para eso. Pero luego se ha encontrado que las etiquetas ARIA también tienen problemas cuando estamos utilizando la internacionalización y cosas así. Entonces, en su lugar, podemos crear un componente oculto visualmente y podemos aplicarle estilos. Esto es estilo. Lo que hace es sacar el texto de la vista. Entonces no lo verías visualmente, pero está ahí en el DOM. Entonces, cuando se usa el lector de pantalla, se pronuncia este texto. Entonces puedo decir, ok, coloca un texto oculto visualmente aquí y dale un nombre. Entonces este nombre es favorito.

Lo otro es que esto también tiene un tipo de estado. Tiene dos estados. O lo he presionado o no lo he presionado. Entonces, o es un favorito o no es un favorito. Pero nuevamente, un usuario de lector de pantalla solo escucharía tal vez botón favorito. ¿Cómo sabrían si es favorito o no? Entonces, si tenemos este tipo de comportamiento de alternancia, podemos usar algo llamado aria-pressed. Y una vez que lo hacemos, lo que hace, cuando voy y uso el lector de pantalla aquí... VoiceOver en Chrome, favorito, nombre del botón de alternancia, DevTool, seleccionado. Entonces, una vez que lo selecciono, dice seleccionado. Y de alguna manera, cuando abro el VoiceOver, los estilos no se aplican. Pero si cierro, verás que ya está seleccionado.

6. Interacción con Enlaces y Formularios

Short description:

Es importante proporcionar texto alternativo para las imágenes utilizadas como enlaces. Las etiquetas de anclaje tienen un comportamiento específico que los botones no tienen, como mostrar la URL al pasar el cursor sobre ellos y proporcionar opciones adicionales al hacer clic derecho. Al decidir entre un botón y un enlace, debes considerar las acciones que deseas que realice el usuario. Los formularios son un componente esencial de la web y deben ser accesibles. Un error común es la falta de etiquetas de entrada o etiquetas de entrada incorrectas.

Sí. Así que dice que está seleccionado cuando lo has seleccionado y pretendías que estuviera seleccionado. A continuación está el enlace. Para el enlace, ocurren cosas similares. Si estamos utilizando una imagen o algo así, debemos proporcionar algún texto alternativo o algún texto para ello. De esta manera, los usuarios de lectores de pantalla también entenderán qué hace ese enlace.

Aparte de eso, una cosa importante de la que quiero hablar es que a veces en los sistemas de diseño, decimos: `bueno, este enlace parece un botón`. Y luego salimos e implementamos usando un elemento de botón. Y decimos window.location o usamos un hook como useNavigate o algo así. Lo que hace es que, okay, esto te llevará a esa URL. Pero lo que no entendemos es que las etiquetas de anclaje tienen un propósito. Nos llevan a algún lugar. Por lo tanto, también tienen un comportamiento al que estamos acostumbrados. Por ejemplo, si paso el cursor sobre un enlace, se muestra la URL. Sabemos cuál es la URL real, a pesar del texto que haya. Además, cuando hago clic derecho en él, obtengo un comportamiento adicional. Puedo abrirlo en una nueva pestaña y cosas así, o puedo usar clic con control y se abre. Pero si usamos un botón y lo usamos como un enlace, entonces esas capacidades no están presentes. Por lo tanto, eliminamos estas capacidades de interacción adicionales del usuario. Siempre debemos tener en cuenta qué elemento estamos utilizando. Nuevamente, hay más matices sobre cuándo debemos usar un botón y cuándo debemos usar un enlace. Pero una de las cosas principales es que si tenemos alguna acción que realizar, debería haber un botón. Y si tenemos que navegar a algún lugar, como llevar al usuario desde otra parte de la página o a una URL diferente, entonces un enlace sería más apropiado allí. El siguiente escenario son los formularios. Los formularios, nuevamente, son un componente muy importante de nuestra web. En todas partes, si tienes que hacer una transacción, si tienes que completar algún formulario, tienes que iniciar sesión, tienes que registrarte, debes completar alguna información en los formularios. Por lo tanto, los formularios son algo con lo que interactuamos casi a diario. Y deben ser accesibles. Un error muy común, si avanzamos y revisamos el informe webm-1million, lo que hace es auditar las 1 millón de páginas web más importantes del mundo y enumera los errores. Este es uno de los errores más comunes en los que las etiquetas de entrada no tienen etiquetas adecuadas.

7. Etiquetas Accesibles e Información Adicional

Short description:

Faltan etiquetas o no están conectadas correctamente. Utiliza etiquetas adecuadas con el atributo 'for'. Proporciona información adicional utilizando aria-described-by. Los lectores de pantalla leen la etiqueta y el campo de entrada. La información adicional puede pasarse por alto. Agrega aria-described-by para conectar la entrada con la información adicional. La demostración en Safari muestra al lector de pantalla leyendo la información de validación para cada campo de entrada.

Ya sea que falten las etiquetas o tal vez no estén conectadas correctamente, y por lo tanto faltan. Entonces, nuevamente, casi la mitad de las páginas web tienen este error. Así que también necesitamos hacer mucho aquí. Aquí, en lugar de usar solo un span o div para etiquetar, o simplemente omitirlo, deberíamos usar etiquetas adecuadas. Usamos una etiqueta y le agregamos el atributo 'for', o si estamos usando React, HTML 'for', y le damos el ID del elemento. Y así, la etiqueta se conecta. De alguna manera, esto es algo muy importante que debemos hacer.

Otra cosa es, supongamos que este es un formulario y lo hemos etiquetado correctamente. ¿Qué leerá? Nombre, texto, apellido, texto, contraseña, campo de contraseña, y así sucesivamente. A veces tenemos información adicional, información de validación para algunos de estos campos de entrada. Por ejemplo, para la contraseña, podría ser muy complicado. Y agregas una pista larga que dice, okay, caracteres mínimos, deben tener guión bajo y bla, bla, muchas cosas. Ahora, cuando usamos un lector de pantalla, nuevamente, solo lee la etiqueta y el campo de entrada. Como lo que deberías sentir. Pero esta pista no se leerá automáticamente para nuestros usuarios de lectores de pantalla. Por lo tanto, se perderían información importante que tenemos. Para eso, podemos agregar aria-described-by y decir que esta entrada está descrita por este SPAN o DIV, que contiene esa información adicional.

Ahora, los dioses de la demostración estaban enojados conmigo hoy. Entonces, en Chrome, todas mis cosas de accesibilidad dejaron de funcionar, pero aún funciona en Safari. Así que voy a mostrarte el ejemplo del lector de pantalla en Safari. VoiceOver en Safari. Nombre. Último correo electrónico. Contraseña. Contraseña. Requerido, campo de texto seguro con menú de autocompletar. Mínimo ocho caracteres. Leerá toda la información de validación que tenemos para que el usuario sepa exactamente, okay, esto es lo que debo completar. Todas estas otras cosas debo seguirlas si quiero pasar por eso. Ahora, lo siguiente es la información dinámica.

8. Información Dinámica y Manejo de Errores

Short description:

Cuando se muestra información dinámica o alertas a los usuarios, es importante considerar la accesibilidad para los usuarios de lectores de pantalla. Mediante el uso de regiones ARIA en vivo, podemos asegurarnos de que la información se anuncie a los usuarios de lectores de pantalla. Además, al mostrar errores en formularios, depender únicamente del color puede ser problemático para los usuarios con daltonismo. Es crucial proporcionar señales visuales alternativas o texto adicional para indicar los errores.

Esto también puede formar parte de un formulario. Pero lo he separado porque también podemos tener información dinámica, alertas, mensajes y demás, aparte de los forms. A veces podemos tener información importante que queremos transmitir a nuestro usuario. Por ejemplo, supongamos que se produce un error. Si podemos ver el error o el mensaje, sabemos qué hacer a continuación. Pero, ¿recibe esta información el usuario que utiliza un lector de pantalla? ¿Cómo obtendrán esta información? Para eso, necesitamos tener algo llamado regiones en vivo. Entonces, esas regiones, una regla es que cuando el DOM se pinta, eso ya debería estar allí. No se debe crear el elemento cuando llegue el mensaje. El elemento ya debería estar allí. Y lo que hacemos es que cuando llega el mensaje, colocamos ese mensaje dentro de esa región en vivo. Por ejemplo, aquí, lo que podemos hacer es que este es un div donde estoy colocando mis mensajes de validation. Puedo decir que ARIA life polite y el rol de estado. Hay diferentes valores para ello. También hay assertive y demás. Pero estoy usando polite porque esto significa que, OK, este mensaje no es tan urgente. Entonces, lo que haces es que si el lector de pantalla ya está leyendo algo, déjalo terminar y luego anuncia este mensaje. Entonces, cómo funciona ahora es que nuevamente quería hacer algo mal. Botón de registro, error al enviar el formulario. Así que continúa y obtiene el mensaje para que el usuario sepa que hay algo mal. Hay más capas en esto, pero debido al tiempo no revisaré todo. Pero una cosa más importante que quiero decir aquí es que esto es algo de lo que algún mensaje viene del servidor o algo así y se lo mostramos al usuario. Ahora hay otro patrón muy importante que estamos siguiendo en la web. Lo que hacemos es que cuando algo sale mal en el formulario, simplemente lo mostramos en rojo. Usamos un color, lo ponemos en rojo y este es el error. Ahora hay diferentes tipos de discapacidades. Hay una condición llamada daltonismo y hay diferentes tipos de daltonismo. Uno se llama acromatopsia. Entonces podría haber un usuario que solo vea en blanco y negro y gris. Y si usas solo el color para mostrar alguna información, nuevamente el usuario no podrá entender, si no saben dónde está el error, ¿cómo lo solucionarán? Se enfrentarán al problema.

9. Guía de Modelos y Prácticas de Autoría

Short description:

Entonces no deberíamos usar solo el color, deberíamos usar errores específicos y mostrarlos, okay, este es el campo donde está el error y cuál es el error, y así sucesivamente. El último escenario son los modelos. Sobre diálogos y popovers, hay una guía de prácticas de autoría de W3C llamada guía de prácticas de autoría por área. Proporciona una lista de interacciones de teclado y comportamientos previstos para diferentes componentes. HTML ahora tiene un elemento de diálogo nativo que se puede utilizar, pero carece de atrapamiento de enfoque. Para solucionar esto, podemos usar código JavaScript para manejar el enfoque y garantizar una mejor experiencia de usuario.

Entonces no deberíamos usar solo el color, deberíamos usar errores específicos y mostrarlos , okay, este es el campo donde está el error y cuál es el error, y así sucesivamente. Okay.

Entonces el último escenario son los modelos. Entonces, sobre diálogos y popovers, creo que Hiday hizo una charla muy buena sobre eso ayer. Así que no entraré en eso, pero quiero mostrar algo sobre los modelos. Porque este es uno de los componentes más complejos que existen, así que tenemos algo llamado, aquí me gustaría hablar sobre algo llamado guía de prácticas de autoría por área, es de W3C.

Esto es algo que realmente me gusta porque siempre que estamos creando algo, si estamos confundidos acerca de cuál debería ser la interacción, como cuál debería ser el flujo diferente, ¿verdad? Entonces lo que podemos hacer es ir a patterns y buscar el patrón que estamos intentando. Por ejemplo, aquí un diálogo, podemos ir y ver cuáles son las interacciones previstas que el usuario puede realizar. Estas son las cosas de las que debemos ocuparnos cuando pensamos en la accessibility. Por ejemplo, dará una lista de todas las interacciones de teclado y qué debería suceder como cuando el diálogo se abre, el enfoque debería ir al primer elemento enfoque automático dentro y qué debería hacer la tecla Tab, la tecla Mayús + Tab y todo eso. Escape debería cerrar el diálogo y así sucesivamente. Así que es algo muy interesante para leer, pero en cuanto a eso, anteriormente teníamos que escribirlo todo desde cero.

Teníamos que escribir código JavaScript para crear este elemento de diálogo, pero ahora HTML también tiene un elemento de diálogo, un elemento nativo adjunto, lo cual es genial. Así que podemos usar eso. Y hace casi todas las cosas. Por ejemplo, presiono Enter, el enfoque está adentro, estamos adentro. Presiono Escape, se cierra, el enfoque vuelve al lugar de donde se lo llevó. Pero aún así, el enfoque no está atrapado dentro de este diálogo. Entonces, cuando presiono Tab nuevamente, todavía me muevo a diferentes partes. No hay atrapamiento de enfoque. Entonces, esto podría ser un problema si tenemos un modelo que no tiene nada más además de él. Y si el enfoque se va detrás de la pantalla, eso no es una buena user experience. Entonces, en cambio, lo que debería suceder es que presiono Tab y el enfoque debería estar dentro del modelo. Porque este es el único lugar donde un usuario puede interactuar en este momento si está abierto. Para eso, aún podemos usar algo de código JavaScript para mejorarlo. Lo que podemos hacer es usar un controlador de eventos de teclado y allí podemos tener cierta lógica para... Lo que podemos hacer es obtener elementos enfoque del modelo. Podemos decir, hey, dame todos los elementos enfoque del modelo, que básicamente es solo seleccionar la consulta en el modelo de referencia y obtener botones, anclas, entradas, cualquier elemento interactivo que tengamos dentro de él. Y nos enfocamos en el primer y último elemento activo, y luego podemos poner la lógica de qué hacer cuando tenemos Tab y la tecla Mayús, y cuando estamos en el último... Cuando... Sí.

10. Lógica de Interacción Web

Short description:

Cuando se navega por pestañas, el enfoque debe alternarse entre elementos interactivos. Las bibliotecas de componentes como React ARIA proporcionan ganchos útiles y la función use dialog. Al crear contenido web, pruebe diferentes interacciones de usuario, use HTML semántico, proporcione descripciones de texto para elementos gráficos, anuncie elementos dinámicos y siempre priorice la accesibilidad. ¡Gracias por abogar por la accesibilidad, Anuradha!

Entonces, esta es la lógica. Cuando presionamos esto y estamos navegando por pestañas, cuando estamos en el último elemento, cuando volvemos a navegar por pestañas, va al primer elemento interactivo, y cuando hacemos shift + tab, va al último elemento interactivo.

Ahora, nuevamente, casi se me acaba el tiempo, pero... Sí. Entonces, esto no es algo, nuevamente, que necesitemos reinventar. Podríamos tener diferentes bibliotecas de componentes en frameworks que podemos usar. Para React, hay algo llamado React ARIA, que proporciona muchos ganchos, y son bastante buenos. Incluso el uso de diálogos es bastante bueno. Así que adelante y compruébalo.

Entonces, para resumir, siempre que estemos creando algo, debemos probar todas las diferentes formas en que los usuarios interactúan con la web. Nunca debemos quitar el contorno al enfocar. Use HTML semántico siempre que sea posible. Siempre debe haber una descripción de texto para elementos gráficos interactivos. Los elementos dinámicos y los mensajes deben ser anunciados. Y siempre piense desde la perspectiva de la accesibilidad. Tengo algunos enlaces para leer más. Puede escanear el código QR o ir a tinyurl.com diagonal A11y-interactions. Gracias. Gracias por abogar por la accesibilidad. Es un tema importante y, sí, hay muchas cosas que la gente hace y, sí, la gente no piensa en ello lo suficiente. Así que muchas gracias, Anuradha, por compartir.

11. Convincing Upper Management for Accessibility

Short description:

Para convencer a la alta dirección de asignar tiempo y presupuesto para la accesibilidad, es importante crear un escenario que destaque las partes críticas que necesitan mejorar. Al centrarse en las principales interacciones de los usuarios y demostrar el impacto en el negocio, podemos mostrar la importancia de la accesibilidad. También es crucial enfatizar que la accesibilidad se puede implementar de forma incremental y que existen leyes para respaldar los esfuerzos de accesibilidad. En última instancia, garantizar que todos puedan utilizar el producto es esencial para una integración exitosa.

Una pregunta que hace un visitante anónimo, que se hace con frecuencia. ¿Cómo convencer a la alta dirección para obtener el tiempo y el presupuesto? Sí. Esa es una pregunta muy común también. Y bastante difícil, ya sabes. Es muy difícil hablar con la alta dirección. Pero lo que encuentro que funciona es una cosa muy importante: crear un escenario para la accessibility. Como sea que sea el producto en el que estemos trabajando o los servicios en los que estemos trabajando, encontramos que, está bien, este flujo no es lo suficientemente accesible. Y es bueno encontrar una parte crítica. Porque así es como nos acercamos. Si algo no es accesible, no podemos avanzar y hacerlo todo accesible en un día, ¿verdad? Así que primero averigüemos la parte crítica. Aquí es donde el usuario hace la mayor parte. Por ejemplo, si es e-commerce, ¿qué hace el usuario? Agregar al carrito y el flujo de compra es la parte principal, ¿verdad? De eso se trata todo el negocio. Así que toma una parte accesible de eso, hazla accesible, preséntala a la dirección y muéstrales que, hey, esto es algo tan importante de hacer en nuestro negocio. Nuestro negocio depende de esto. Y si nuestros usuarios no pueden hacerlo, entonces estamos perdiendo usuarios, ¿verdad? Como los usuarios no estarían utilizando nuestros sitios web y aplicaciones. Esperemos que la dirección lo entienda. Y también podemos mostrar que esto no es tan difícil. No necesitamos 100 años para hacer algo accesible, ¿verdad? Podemos hacerlo en etapas. No tiene que ser de cero a cien por ciento. Puedes ir del 5 por ciento, 10 por ciento y simplemente hacerlo. Sí. Y si nada funciona, entonces recurre a las leyes. Hay leyes en todos los países para la accessibility. Por favor, cita las leyes. Involucra la ley. Sí. Sí. Y depende de la empresa en la que estés y del presupuesto que tengas, por supuesto. Pero para mí, si es solo parte de los requisitos, no puedes fusionar nada si no todos pueden usarlo. Así que eso es algo bueno.

12. Automated Testing and Accessibility

Short description:

Podemos utilizar varias herramientas para las pruebas automatizadas, como Lighthouse, AXE DevTools, Microsoft Insights for web y AXE-Core. Sin embargo, es importante tener en cuenta que las pruebas automatizadas pueden no detectar todos los problemas de accesibilidad. También son necesarias las pruebas manuales y las pruebas de usuario. Si bien las pruebas automatizadas ayudan a abordar los problemas más evidentes, por sí solas no son suficientes.

Y eso es algo bueno de trabajar en una empresa grande. Sí. Sí. Quiero decir, definitivamente podemos utilizar varias herramientas para las pruebas automatizadas. Por ejemplo, algunas herramientas están en los navegadores. Puedes usar Lighthouse. Puedes usar AXE DevTools. De hecho, cualquier cosa relacionada con AXE es bastante buena, porque incluso Lighthouse está impulsado por AXE. Luego tenemos Microsoft Insights for web, que puedes instalar como extensión. También está AXE-Core. Puedes instalar AXE-Core y usarlo en el pipeline de CI-CD. Así que realiza pruebas para ello. También hay algunos linters que podemos utilizar. Pero hay que tener en cuenta que todas estas pruebas automatizadas no detectarán el 100% de la accessibility. Por ejemplo, los ejemplos que mencioné, como Outline y Search, es posible que no se detecten en las pruebas automatizadas. También es necesario realizar pruebas manuales y pruebas de usuario. Sí, utiliza pruebas automatizadas, ya que realmente nos ayudan a abordar los problemas más evidentes, pero no podemos depender únicamente de las pruebas automatizadas para hacerlo más accesible.

QnA

Accessibility and Screen Readers

Short description:

La mayoría de los problemas de accesibilidad se pueden abordar utilizando la plataforma y asegurando el cumplimiento. Prueba las bibliotecas de componentes, incluso si afirman ser accesibles. Se recomiendan diferentes lectores de pantalla según la plataforma y el dispositivo. VoiceOver es estándar para Mac, NVDA y JAWS para Windows, Orca para Linux y TalkBack para Android. Los lectores de pantalla tienen combinaciones específicas con dispositivos y navegadores. Los estilos de borde proporcionan retroalimentación visual sobre el enfoque y generalmente son aceptables.

Sí, siempre siento que la mayoría de los problemas de accesibilidad se pueden abordar simplemente utilizando la plataforma, ¿verdad? Por ejemplo, no escribir tu propio botón, simplemente usar una etiqueta de botón. Pero si estás utilizando alguna biblioteca de componentes, asegúrate de que cumpla con los estándares. Que cumpla con WCAG y que digan que es... y pruébalo, incluso si dicen que es accesible, no lo creas. Adelante y pruébalo, por favor.

Siguiente pregunta de un anónimo. ¿Qué lector de pantalla recomendarías para el desarrollo? Te vi usando VoiceOver, pero para usuarios de Windows. Depende de la plataforma que estés utilizando. Los usuarios utilizan diferentes tipos de lectores de pantalla según el sistema operativo o el dispositivo que estén utilizando. Por ejemplo, para Mac, se utiliza VoiceOver como estándar. Para Windows, también tenemos algo similar a VoiceOver incorporado en Windows, pero también utilizamos NVDA. Creo que NVDA es gratuito, luego está JAWS. Linux tiene algo llamado Orca. Android tiene TalkBack, algo así. Sí, cada dispositivo tiene uno. Pero los lectores de pantalla, necesitas leer un poco antes de comenzar a usarlo porque los usuarios también tienen una combinación. Los lectores de pantalla no son como empezar a usarlo en cualquier navegador. Tienen una combinación. Como, estamos usando este dispositivo, estamos usando este lector de pantalla y luego tenemos este navegador específico. Funcionan mejor. Por ejemplo, en realidad se dice que VoiceOver funciona mejor con Safari, pero sí, lo uso con Chrome. Sí, está bien. De acuerdo, gracias.

Pregunta de Veronica. ¿Hay algunas desventajas de usar Border en Focus para el estilo en lugar de Outline? Bueno, solo usando los estilos de borde. Si hay alguna, aún no lo sé, tendré que buscar más. Pero lo que siento es que si lo estás mostrando, el usuario aún puede verlo. Obtienen esa retroalimentación visual. Debería haber una retroalimentación visual. Si está ahí, creo que está bien.

Desventajas del Estilo de Borde y Etiquetas ARIA

Short description:

La mayor desventaja de usar el estilo de borde o cambiar el ancho del borde es que puede arruinar el diseño. Las etiquetas ARIA deben usarse para los formularios, incluso si están ocultas visualmente, para asegurarse de que se lean. Las etiquetas proporcionan una forma conveniente de enfocarse en la entrada. Chrome DevTools ofrece herramientas para emular diferentes tipos de ceguera y esquemas de color.

Pero nuevamente, no te quedes solo con mi palabra. Aún no sé si hay alguna desventaja. Bueno, creo que la mayor desventaja es que si usas el estilo de borde o cambias el ancho del borde, porque generalmente es más grande. El diseño. Sí, el diseño se arruinará porque se hará más grande.

Sí. Tenemos tiempo, sí. Dijiste que se deben evitar las etiquetas ARIA debido a problemas de internacionalización. Si traducimos las etiquetas, ¿tienes preferencia por una etiqueta o elementos ocultos para lectores de pantalla? ¿Etiqueta o elemento oculto para lectores de pantalla? Elemento oculto para lectores de pantalla. Entonces, visualmente. Ah, visualmente. No, quiero decir, si hay un formulario, debe tener una etiqueta. Incluso si lo estás ocultando visualmente, aún debe tener una etiqueta. Porque si solo usamos cualquier otro texto, los formularios no se leerían. Si estás navegando a través de los formularios, las etiquetas están vinculadas a nuestros campos de formulario, por lo que se leerán. Pero hay otra forma en que podemos usar ARIA etiquetado, como algunas personas lo usan, pero creo que simplemente use etiquetas. Sí. Siempre me gusta si está etiquetado porque puedes hacer clic en el texto para enfocar la entrada. Exactamente. Proporciona mucho. Haces clic en la etiqueta y sabes que estás en este campo de entrada. Es bastante genial.

Esta es una buena pregunta. Hay algunas formas. Como hay algunas herramientas que podemos usar, pero también hay una en Chrome DevTools. En Chrome DevTools, si haces creo que comando shift P o algo así y escribes emular, obtienes diferentes tipos de ceguera que puedes emular. También puedes emular diferentes esquemas de color. Puedes ir al modo oscuro, modo claro y puedes emular todas estas cegueras. Esta es la forma si estás usando Chrome DevTools, o puedes instalar algunas extensiones. O hay algunos programas de eventos que la gente usa para emular esto.

Usando el atributo de título para botones de iconos

Short description:

Cuando se utiliza el atributo de título para botones de iconos, el título se hereda y se lee por los lectores de pantalla. Sin embargo, no está claro cómo funciona la traducción del título en los sitios web. El atributo de título es útil para proporcionar información adicional a los usuarios que pueden leer y pasar el cursor sobre los elementos. Ayuda a identificar los iconos y comprender su propósito.

Si no estás utilizando la web, sino una foto o algo así. Viene en capas en muchos componentes. Genial.

Siguiente pregunta, de Metin Parzinski. ¿Quién es él? Nombre extraño. Siempre uso el atributo de título para botones de iconos. ¿Eso también está permitido? En realidad, el título también se hereda. Entonces, si avanzas y ves el accessibility tree, verás que incluso para elementos interactivos estás usando el título. Leen ese título y tratan de usarlo si no proporciona ningún texto. Pero no sé cómo funciona si usamos el título cuando estamos traduciendo el sitio web. Así que todavía no lo sé. Entonces, ¿qué pasa si estoy traduciendo a algún idioma diferente? No sé si el título se traduce o no. ¿Si estás utilizando la traducción automática de Google automation? Sí. Eso no lo sé, pero entonces simplemente no deberías traducirlo. Entonces tenemos que probarlo.

Pero lo que me gusta del atributo de título es que también para las personas que pueden leer, eso pueden pasar el cursor sobre él y obtener ese texto. No, eso es definitivamente bueno. Realmente me encanta mucho, porque no conoces todos los iconos. No sabes. Para mí, siempre estoy perdido. ¿Qué es esto? Necesito saberlo. Y eso definitivamente es algo útil. Muy bien. Y se acabó el tiempo. ¡De acuerdo! Así que eso es todo el tiempo que tenemos para Anuradha.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Summit 2022React Summit 2022
160 min
React at Scale with Nx
WorkshopFree
The larger a codebase grows, the more difficult it becomes to maintain. All the informal processes of a small team need to be systematized and supported with tooling as the team grows. Come learn how Nx allows developers to focus their attention more on application code and less on tooling.
We’ll build up a monorepo from scratch, creating a client app and server app that share an API type library. We’ll learn how Nx uses executors and generators to make the developer experience more consistent across projects. We’ll then make our own executors and generators for processes that are unique to our organization. We’ll also explore the growing ecosystem of plugins that allow for the smooth integration of frameworks and libraries.