Cómo los Popovers Están a Punto de Ser Mucho Más Fáciles de Construir

Rate this content
Bookmark

Probablemente hayas construido uno de estos antes: tooltips, selectores de fecha, menús, UI de enseñanza... todos son ejemplos de contenido de “popover”. Buenas noticias: va a ser mucho más fácil construir estos, con algunas características propuestas para la plataforma web. Es posible que ni siquiera necesites JavaScript. En esta charla, aprenderás todo sobre el próximo atributo ‘popover’, cuándo usar la modalidad y el acceso a la capa superior.

28 min
20 Oct, 2023

AI Generated Video Summary

Esta charla explora los desafíos y la orientación para construir popovers y diálogos bien diseñados en HTML. Discute las diferencias entre diálogos y popovers, sus casos de uso, y la importancia de la semántica en diferenciarlos. La charla también cubre las consideraciones de UI, implementación, y posicionamiento de popovers. Además, destaca el uso de modales para bloquear el acceso al resto de la página y el papel de la semántica en hacer accesibles los diálogos y popovers.

1. Introducción a Popovers y Diálogos

Short description:

En esta masterclass, nos centraremos en las superposiciones de contenido en los sistemas de diseño, particularmente los popovers y los diálogos. Exploraremos los desafíos y proporcionaremos orientación sobre cómo construirlos bien. HTML ofrece dos características emocionantes, diálogo y popover, con amplio soporte de navegador. Mientras que el diálogo es más establecido y accesible, el popover es más nuevo pero está ganando soporte en los principales navegadores. Se recomienda experimentar con estas características considerando la accesibilidad.

¿Quién tiene popovers en su sistema design? Levanten la mano. Genial. La mayoría de esta audiencia.

Solo descubrí recientemente que en los Estados Unidos, los Yorkshire Puddings se llaman popovers. Incluso encontré este video en la cocina de texto de América, donde dicen que los popovers pueden ser realmente complicados, como vamos a descubrir en esta charla. Tienen una custodia por dentro. No puedo prometer eso para la charla de hoy.

Sí, nos centraremos en el contenido que se superpone a otro contenido. Muy común, no siempre fue así en la web, ¿verdad? Teníamos largos fragmentos de contenido lineal, y ahora nos gusta poner cosas encima de otras cosas. En algunos sitios web, realmente se pasan con esto, donde te aparecen banners para, ¿quieres enviar a las cookies? ¿Quieres registrarte en nuestro sitio? Hay anuncios que son bastante malos e invasivos. Y luego, a veces, incluso obtienes más cosas encima de eso. Como en este caso, ¿por qué? No es bueno. No es bueno, y ves un problema aquí en este ejemplo es que su modal para pedirte que te suscribas al boletín está realmente debajo de la cosa de consentimiento de cookies. No está bien.

Y sí, probablemente estés al tanto de este sitio web llamado ModalsModalsModals.com. Es modal con una z. Explica, con bastante detalle, por qué no deberías estar usando modales, y eso es algo que no cubriré hoy. No voy a hablar de por qué deberías usarlos. Voy a hablar de si los estás usando o si alguien en tu equipo decidió que los usamos, cómo construirlos bien.

Y la razón por la que me interesé en esto es que recientemente en HTML, tenemos dos características emocionantes que te permiten construir popovers y diálogos bastante bien. Un poco de spoiler aquí, no solo voy a hablar de popovers sino también de diálogos porque son bastante similares, y quiero que salgan de esta sala con conocimiento sobre cómo son realmente diferentes.

Así que el diálogo es un elemento HTML que tiene un amplio soporte de navegador que, recientemente, también funciona muy bien en términos de accesibilidad. Como que es seguro usarlo. Todavía hay algunas cosas por pulir. Solía haber muchos más problemas de accessibility con él, y ahora es bastante seguro usarlo. Y luego está el popover, que es bastante nuevo. Pero también, está soportado en Chrome y Edge, Safari, y está en Firefox detrás de la bandera. Así que muy pronto, podremos usar esto. Y recomiendo experimentar con él hoy. Todavía hay algunas consideraciones de accessibility a tener en cuenta.

2. Consideraciones de UI y Ejemplos de Popovers

Short description:

Hoy, hablaremos sobre las consideraciones de UI para diálogos y popovers, y la importancia de la semántica para diferenciarlos. Soy Hedda, desarrolladora y especialista en accesibilidad en NL Design System. También formo parte del Grupo de la Comunidad de Open UI en W3C. Vamos a explorar algunos ejemplos de popovers, incluyendo su uso en Slack y Microsoft Teams.

Pronto publicaré una entrada de blog sobre eso porque hay algunas cosas que considerar. Hoy, hablaremos sobre las consideraciones de UI para estas cosas, y también sobre la semántica, que es realmente importante, especialmente cuando estás pensando en diálogos y popovers, ¿cómo son realmente diferentes? Es un desafío bastante grande averiguarlo.

Ahora, como mencioné, soy Hedda. Trabajo en NL Design System para el gobierno holandés. Soy una persona freelance relacionada con la accessibility. Y también participo en el Grupo de la Comunidad de Open UI, que es un grupo en W3C que crea cosas como popovers. Así que estamos trabajando en ello allí. Ahora tengo mi propio blog en Hedda.blog. Puedes darle me gusta y suscribirte. El otro día, alguien pensó que realmente podías darle me gusta y suscribirte. Necesitas obtener el feed RSS. Así que eso es algo que puedes usar.

Entonces, veamos algunos ejemplos de popovers. Están en todas partes. No sé si alguien ya tiene el nuevo Slack, pero ellos usan un popover para explicarte cómo usarlo. A eso se le llama enseñar UI. Tampoco siempre se usa de muy buenas maneras. Hemos visto ejemplos anteriores. Cuando estaba usando Teams para chatear con mi colega, obtuve este popover de feedback que simplemente apareció sobre mi contenido, mi conversación que estaba teniendo. Y el otro día, cuando estaba en una reunión de negocios muy seria, Microsoft me promocionó sus otros productos en Microsoft Teams. Dijeron, ¿quieres usar Excel, porque también lo hacemos. No estoy seguro, como, estaba un poco en el camino, porque me estaba preparando para tener algunas conversaciones muy serias allí. Y a veces se pone aún más raro. También me animaron a ser mi yo expresivo. Crea algunos avatares. No, gracias. Estoy en una reunión seria. Hay cosas mejores como Slack que te dan este popover que dice, te ves bien hoy. Y ni siquiera revisan las imágenes de tu cámara para ello. Realmente te dicen que te ves bien todos los días, lo cual aprecio.

3. Diferencias entre Diálogos y Popovers

Short description:

En la banca, se utilizan popovers para cuadros combinados, selectores de fecha y más. Vamos a explorar las diferencias entre diálogos y popovers. Un diálogo es una ventana adicional que contiene información crucial o solicita feedback del usuario. Para construir diálogos, puedes utilizar el elemento de diálogo en HTML y llamar a show modal o show en JavaScript. El uso del elemento de diálogo proporciona soporte de navegador y comportamientos incorporados. Los diálogos están bien soportados en los principales navegadores con una accesibilidad mejorada.

También hay cosas más serias. Como, en la banca, encontrarás popovers para hacer, como, cuadros combinados, selectores de fecha, todo este tipo de cosas. Así que existen muchos popovers en la web. Y quiero ver ahora cómo estos patterns son diferentes, porque algunos de estos son diálogos y algunos de ellos son popovers. Y muchos de ellos son ambos.

Entonces, veamos cuáles son las diferencias, empezando con el diálogo. Así que un diálogo es una ventana adicional a tu ventana principal o una subventana. Una de las cosas que descubrí trabajando en esto es que no hay una definición central. Así que te daré un par para que te guíen. Otra definición es algo que contiene una acción o una tarea o información crucial o información crítica. A menudo es una conversación entre tú y el sistema. Serán cosas como ¿quieres continuar, sí o no? O si estás empezando un nuevo archivo, ¿qué quieres hacer con el actual? Todas estas cosas donde realmente necesitas hablar con el usuario y necesitas obtener su feedback inmediatamente. Por lo tanto, está justificado interrumpirlos y hacer esas preguntas.

Ahora, para construir diálogos, está el elemento de diálogo en HTML. Y puedes usarlo con scripts. No tengo ningún ejemplo de React aquí, pero puedes adaptar estos a React, porque es todo JavaScript puro. Así que cuando encuentras el elemento o tienes una referencia al elemento, puedes llamar a show modal en un diálogo o puedes llamar a show. Así que show modal va a mostrarlo como un modal, y show va a mostrarlo como un no modal. Entraremos en las diferencias en un momento. Así que esto es importante para hablar de la palabra diálogo. Así que si usas el elemento de diálogo, obtienes muchas cosas gratis del navegador. Así que lo hará modal para ti. Hará las cosas del teclado por ti, y hará un montón de otras cosas. Eso es diferente de usar un rol de diálogo en un div, porque el rol de diálogo te dará esa semántica, pero no te dará ninguno de los comportamientos. Y luego eso también es diferente de usar simplemente la palabra diálogo, que podrías hacer en conversaciones con tus colegas. Eso es algo completamente diferente. Así que podrías estar usando un rol de diálogo o incluso un elemento de diálogo, pero esos son diferentes niveles de uso del diálogo en el trabajo. Ahora el diálogo está bastante bien soportado en todos los principales navegadores. Y solía haber una gran cantidad de problemas de accessibility, y ahora hay muchos menos. Y para más detalles sobre eso, yo recomiendo las publicaciones de blog de Scott O'Hara sobre ellos.

4. Implementación y Casos de Uso de Popover

Short description:

Un popover es un diálogo flotante y no modal utilizado para contenido transitorio. Se implementa como un atributo en HTML y proporciona comportamientos incorporados. Los popovers son utilizados por Chrome y sitios web como github.com. Se activan con scripts y se utilizan para tooltips, menús, y más. Los popovers tienen varios casos de uso, incluyendo figuras de contenido, sugerencias de elementos de formulario, menús de acción, cuadros de lista, y enseñanza de UI.

Este último utilizó el elemento de diálogo de manera razonable. Pasando de los diálogos a popover, un popover es una pieza flotante de UI que es suplementaria, contextual, y lo más importante, un diálogo no modal. Así que con el diálogo, puedes hacer diálogos modales, con popover puedes hacer diálogos no modales. Y también son para contenido transitorio.

En HTML, vienen en forma de un atributo, así que no un elemento. Y cuando añades ese atributo a un elemento, va a añadir un montón de comportamientos, que podrían incluir como descartar, teclado, presencia en la capa superior, también cierre de otros popovers. Va a lidiar con todas estas cosas por ti. Ahora esto es para elementos que están encima de otras páginas contenido que no siempre es visible y que normalmente se muestra uno a la vez. Esa es la idea.

Y de hecho está siendo utilizado por algunas personas. Esto es de Chrome, una estadística que claramente está subiendo. Es el 0.3% de las cargas de página en los navegadores basados en Chromium. Y no sé si conoces este sitio web llamado github.com, pero ellos lo están utilizando en producción en este momento. Experimentando con él, creo, pero lo están utilizando ahora. Así que tienen un popover manual. Eso significa que lo están activando con scripts porque lo hacen funcionar en Hover. Así que cuando pasas el ratón sobre los iconos y obtienes un pequeño tooltip, eso es un popover. En esta captura de pantalla, ves un menú justo debajo. Eso también es un popover. Y puedes ver que también aparece en la capa superior cuando lo inspeccionas en el navegador. También está llegando a Photoshop en la web. No sé si has visto, pero han construido todo Photoshop en la web. Muy emocionante. Y también están pensando en usar popover allí. Así que popover es para figuras de contenido. Es para sugerencias de elementos de formulario, para menús de acción, para cuadros de lista, y como se mencionó para enseñar UI. Así que muchos casos de uso diferentes y muy variados allí. Así es como funciona. Básicamente, si tienes un botón y un div y el div es tu popover, lo que puedes hacer es añadir el atributo popover. Y en React, en JSX, tendrás que darle algún valor así que puedes darle la cadena vacía como valor.

5. Popovers en Funcionamiento y Entendiendo las Diferencias

Short description:

Cuando añades un ID al botón y le das a popover target igual a ese ID, el popover funcionará sin JavaScript. Esto reduce los tamaños de los paquetes y permite que el navegador lo maneje. Hay diferentes tipos de popovers, como auto y manual, con varios comportamientos. Los popovers son compatibles con todos los navegadores, siendo Firefox la única excepción. Es hora de experimentar con los popovers y entender las diferencias entre los popovers y los diálogos, particularmente en términos de contenido modal versus no modal.

Entonces, cuando añades un ID a él y le das a popover target igual a ese ID en el botón, esto es ahora un popover en funcionamiento. El botón va a alternar el popover por ti. Eso es bastante genial. Funciona sin JavaScript. Sé que estoy en la Conferencia de React y aquí estamos todos sobre JavaScript, pero es una oportunidad realmente genial para reducir el tamaño de tus paquetes porque antes tal vez necesitarías ejecutar algunos scripts, ahora el navegador se encargará de ello por ti y se encargará de muchas otras cosas mientras lo hace. Y eso es bastante genial.

De hecho, es tan genial que ahora también están trabajando en conseguir esto en diálogos y otros tipos de elementos. Así que con algo llamado los atributos de invocación, harán que más botones hagan cosas sin JavaScript. Es simplemente algo genial. Hay otros atributos que puedes usar como popover target action, donde puedes decir que este botón solo puede mostrar algo o solo puede ocultar algo. Y hay diferentes tipos de popovers. El auto cerrará otros popovers y va a descartar, es decir, cuando haces clic fuera de él, desaparecerá. Y el manual, que no descartará y no cerrará a otros, y generalmente se abrirá cuando sea correcto. También puedes abrirlos en JavaScript. Así que puedes hacer element.showPopover. De nuevo, necesitarás la referencia al elemento real en el dom para eso.

Ahora, como se mencionó, el popover es compatible con todos los navegadores. En Firefox, está detrás de la bandera. En otros navegadores, está disponible. Tus usuarios pueden no estar usando la última versión de Safari, por ejemplo, pero está llegando. Y creo que eso es genial. Es hora de experimentar con él. Ahora, cuando estaba trabajando en popover y uniendo estas reuniones de UI abierta, seguimos hablando de popovers y diálogos. Y me di cuenta de que no lo entendía realmente tan bien como pensaba, porque seguía escuchando todas estas frases como, esto es modal, esto no es modal, esto es esto, esto es aquello. Así que empecé a pensar en ¿cómo son realmente diferentes estas cosas? Y quiero compartir lo que encontré. Hay un par de ejes diferentes en los que son diferentes. Así que el primero siendo modal versus no modal. Así que modal es un poco de contenido que es lo único con lo que puedes interactuar. Así que si estás rastreando a tus usuarios de acuerdo a la ley de la UE, necesitas obtener permiso. Y si no tienes el permiso, no pueden interactuar con el sitio.

6. Casos de Uso de Diálogos Modales

Short description:

Los diálogos modales son útiles en escenarios donde se necesita bloquear el acceso al resto de la página, como los tiempos de sesión en sitios web gubernamentales o pantallas de fin de juego. Interrumpen el flujo del usuario y limitan la interacción al contenido modal.

Entonces, es un buen caso de uso. Es algo molesto de tener, pero es un buen caso de uso para bloquear el acceso al resto de la página. Otro ejemplo es cuando estás en un sitio web del gobierno holandés y tu tiempo de sesión se agota, eso es después de 50 minutos, normalmente muestras un modal para pedir a las personas que extiendan su sesión. Porque si están a mitad de su declaración de impuestos, que dura dos horas y presionan enviar, es posible que no puedan enviarla si ya no están autenticados. Entonces, este tipo de cosas son ejemplos típicos de modales. Necesitas interrumpir al usuario. Es un poco como un despertador por la mañana. Necesitas interrumpir a la persona incluso si puede que no les guste, por razones. Otro ejemplo es una pantalla de fin de juego. Estás jugando un juego. Ya no puedes jugar el juego porque estás muerto. No puedes volver al juego, solo puedes interactuar con esta pantalla de fin de juego. Es lo único disponible para ti.

7. Elementos Modales y No Modales

Short description:

Los elementos no modales permiten la interacción con el resto de la página, mientras que los elementos modales bloquean el acceso a otros contenidos. El cierre ligero oculta automáticamente los elementos de la interfaz de usuario, mientras que el cierre explícito requiere la presión de un botón. Z-index y la capa superior controlan el orden de los elementos, siendo la capa superior la que está por encima de todos los demás elementos. Los fondos y las trampas de enfoque del teclado se utilizan a menudo en elementos modales con fines de estilo y experiencia de usuario.

Ahora, no modal es lo opuesto a eso. Así que es algo que se abre encima de otros contenidos, pero también puedes seguir interactuando con todo lo demás en la página. Así que es más bien una parte del resto del contenido. Son cosas como los tips de conmutación y los menús y también los chatbots. Imagina un chatbot donde solo podrías chatear y no mirar el resto del sitio. Así que hacer algo modal es una medida drástica. Probablemente no querrás hacerlo con muchas cosas, pero a veces tienes que hacerlo.

Ahora, otro eje es el cierre ligero versus el cierre explícito. Básicamente, la diferencia es que con el cierre explícito, presionarás un botón para cerrar el diálogo, mientras que con el cierre ligero, desaparece automáticamente. Así que cuando estás eligiendo una fuente en Google Docs y haces scroll o haces clic fuera, eso simplemente va a desaparecer. Y eso está bien. No esperas que se quede allí para siempre, simplemente se irá. Así que es ese tipo de interfaz de usuario que necesita un cierre ligero.

Luego Z-index versus capa superior. Con Z-index en CSS, puedes cambiar el orden de las cosas. A veces tienes varias cosas en el mismo lugar. Y con Z-index puedes cambiar el orden y decir, esto va a estar encima y eso no. La capa superior es bastante diferente porque es una capa que está encima de todo. Así que incluso tu Z-index más alto, si tienes como un 9,999, la capa superior todavía va a estar encima de eso. Es algo separado. Y así es como se renderiza en navegadores como Chromium, y nos mostrará una cosa que está al lado del elemento HTML. Así que es realmente como su propio mundo. Y la forma en que funciona la superposición allí no es a través de Z-index, sino a través del orden en el que las cosas se añaden a la capa superior. Así que para conseguir que esta segunda cosa esté encima de la primera, necesitas editarla segundos, básicamente, o sacar todo si quieres reordenar cosas.

Luego los fondos. Algunos de estos patterns también tienen fondos. Pueden estar en cosas modales y no modales, pero normalmente son parte de los diálogos modales. Así que a veces tienen fondos, y si están en la capa superior, tienen un fondo estilizable incorporado. Así que con colon colon backdrop puedes estilizar a través de CSS, el poder de CSS, genial, estiliza tu fondo para que sea del color que quieras, tenga un efecto borroso, todas estas cosas. Y luego están las trampas de enfoque del teclado que a veces necesitan suceder en elementos modales, se suele usar y a veces en cosas no modales también, como calendarios, donde realmente no quieres que los usuarios escapen de la cosa, porque podría ser molesto para ellos perder la pista de dónde estaban.

8. Trampas de Enfoque, Modales y Semántica

Short description:

Las trampas de enfoque a veces son útiles, pero siempre temporalmente. Modal es lo que obtienes cuando usas diálogo con el método show modal. No modal es lo que obtienes con cualquier otra cosa. El cierre ligero es lo que obtienes con popover igual a auto. El cierre explícito es lo que obtienes con popover igual a manual o cualquier tipo de diálogo que estés construyendo. ZnX es lo que obtienes cuando usas diálogos con show o cualquier tipo de contenido que estás construyendo. Los fondos están integrados en cualquier elemento de la capa superior. Una trampa de enfoque del teclado es lo que obtienes cuando usas diálogo con show modal. La semántica es importante para hacer diálogos accesibles en popover.

Las trampas de enfoque a veces son útiles, pero siempre temporalmente. Estas son las cosas, cómo son diferentes, y quiero mostrarte cómo interactuar con popover y el diálogo.

Modal es lo que obtienes cuando usas diálogo con ese método show modal, esa es la única forma de hacer que el navegador haga algo modal para ti. Luego, no modal es lo que obtienes con cualquier otra cosa. Así que modal, un diálogo con el método show, o popovers, serán no modales. Luego, el cierre ligero, solo puedes obtenerlo cuando popover es igual a auto. Y el cierre explícito es lo que obtienes con popover igual a manual, o con cualquier tipo de diálogo que estés construyendo. Luego ZnX, siempre obtienes ZnX, obtienes acceso a la capa superior cuando usas popover o diálogo con show modal. No hay otra forma de entrar en la capa superior. Bueno, la API de pantalla completa es una si la estás utilizando. Pero popover y diálogo con show modal son las únicas formas de obtener esto. Así que ninguna biblioteca te proporcionará esto sin usar estos primitivos. Porque esta es la única forma en que los navegadores te permitirán entrar en esa capa superior especial. Ahora, ZnX es lo que obtienes cuando usas diálogos con show, o cualquier tipo de contenido que estás construyendo. Luego, los fondos, están integrados en cualquier elemento de la capa superior. Entonces, igual que antes, es popover y es diálogo con show modal. Y luego, una trampa de enfoque del teclado es lo que obtienes cuando usas diálogo con show modal. Así que el navegador se encargará de ello por ti. Parece bastante emocionante. Ahora quiero sumergirme rápidamente en la semántica de esto. Porque esa es una parte realmente importante para hacer diálogos accesibles en popover. Necesitas saber qué es cada cosa. Ahora, estudié filosofía, así que para mí, la semántica sería como, ¿qué es esto? Pero si hablas de desarrolladores web, probablemente sea ¿qué es esto en esta página o aplicación? Eso es más o menos de lo que trata la ciencia de la semántica. Y tendrás semántica en tu sitio, como cuando usas encabezados, obtienes semántica de encabezados. Y son muy útiles porque un usuario de lector de pantalla puede sacar una lista de encabezados y luego navegar por encabezados. De hecho, una de las formas más comunes en que las personas con lectores de pantalla navegan por los sitios web. Así que mirarán tus encabezados. Así que proporciona una API, básicamente, de encabezados. Una etiqueta de anclaje viene con el enlace, un elemento de lista viene con el elemento de lista, diálogo viene con diálogo. Los divs no vienen con nada, lo cual está bien en algunos casos, si no hay nada que transmitir.

9. Popovers y Semántica

Short description:

Los atributos de popover no añaden semántica, solo comportamiento. Puedes añadir roles a los divs con atributos de popover para determinar su papel en la página. El rol más común es diálogo, utilizado para ventanas más pequeñas con elementos interactivos. Listbox se utiliza cuando los usuarios necesitan elegir entre opciones. Menú se utiliza para acciones, no para navegación. Los tooltips son texto plano, mientras que los toggle tips con encabezados y botones de descarte son más como diálogos.

También puedes añadir roles a los divs y puedes añadir como se mencionó esos atributos de popover. Y lo que hay que notar aquí es que el atributo de popover no va a añadir ninguna semántica para ti. Así como una etiqueta de encabezado te dará una semántica de encabezado, popover no te dará nada. Va a añadir comportamiento y no semántica.

Y en las siguientes diapositivas, te mostraré un par de semánticas diferentes que puedes añadir tú mismo. Así que si tienes un div con elemento popover en sus atributos, puedes añadir un atributo de rol para decidir qué rol va a tener esto dentro de la página. El más común es diálogo. Así que puedes tener popovers que son diálogos. Son muy comunes. Como dije antes, son ventanas más pequeñas, subventanas, y básicamente es el caso cuando tienes varias cosas allí, elementos interactivos, quizás algunos botones, algunos enlaces, eso suele ser un diálogo con el que la gente puede interactuar. La enseñanza de la UI a menudo es un diálogo, las mega navegaciones podrían serlo porque tienen muchas cosas allí. Y luego está listbox. Eso es básicamente lo que usas cuando tu popover es algo de lo que la gente necesita elegir. Así que un selector de emojis o algo para comprobar una moneda, todas estas cosas diferentes. Así que los listbox también son parte de los combo boxes, pero entonces estás anidando cosas, ¿verdad? Así que el listbox es el tipo de cosa de la que la gente elige, y podrías tener otras cosas allí también.

Luego el rol de menú también es bastante común. Así que eso es lo que usas cuando tienes un montón de acciones que los usuarios pueden hacer. Así que un menú no es para navegación. Si tienes una cosa de navegación en la parte superior de tu página, eso es la navegación. Un menú realmente tiene acciones en él. Así que tendrá botones, cosas que la gente puede hacer. Ejecuta funciones básicamente. Así que en este caso, hay una función para eliminar un elemento, para duplicarlo, es básicamente como una cosa de tipo aplicación. También es lo que se usa para un menú como en Google Docs, el menú de archivos que abres, eso es un menú típico también. Luego los tooltips, son casos de uso de popover bastante comunes. Lo que hay que notar sobre los tooltips es que son texto plano. Así que cuando tienes una cadena de texto que va en un tooltip, cuando tienes algo más, suele ser un toggle tip que es más como un diálogo. Así que si tienes texto allí, pero también un encabezado y también un botón para descartarlo, eso probablemente sea un diálogo, aunque se sienta un poco como un tooltip. No sé si perdimos la conexión allí. Eso está bien.

10. Semántica y Posicionamiento

Short description:

En términos de semántica, el elemento diálogo tiene semántica de diálogo, mientras que el popover no tiene semántica. El posicionamiento es importante a considerar tanto para los diálogos como para los popovers. Dos soluciones para el posicionamiento de popovers son usar una biblioteca como floating UI o el posicionamiento de anclaje en CSS. Las APIs de diálogo y popover pueden reducir tu paquete de JavaScript, eliminando la necesidad de bibliotecas.

Podría volver. Entonces, en términos de semántica, el elemento diálogo tiene semántica de diálogo, está incorporado. El popover no tiene semántica y necesitas elegirla tú mismo.

Ahora, pasando de la semántica, quiero hablar un poco sobre el posicionamiento y no tengo mucho tiempo para cubrir mucho sobre eso. Pero lo que hay que notar sobre el posicionamiento es que tanto los diálogos como los popovers están centrados por defecto porque están en la capa superior, el navegador no sabe dónde ponerlos. Así que no van a ser relativos a otros contenidos en tu página. En realidad van a estar en el centro. Así que eso es algo a tener en cuenta.

Si quieres anclar tu popover a la cosa que lo invocó, entonces necesitas pensar en cómo puedes hacer eso porque solo uno de ellos está en la capa superior. Así que tu popover está en la capa superior pero el botón que lo abrió no está en la capa superior. No saben el uno del otro porque son capas muy separadas. Así que eso es importante tener en cuenta porque a menudo quieres adquirir un popover relativo a la cosa que lo abrió porque están visualmente cerca el uno del otro.

Entonces, dos soluciones básicamente para el posicionamiento de popover. Una es que uses una biblioteca como floating UI y calcules dónde necesita estar la cosa y pongas algo como celdas y lo pongas donde pueda ir. O puedes usar el posicionamiento de anclaje, que es una nueva propuesta. Aún no está disponible, aunque está en Chrome, pero todavía está en desarrollo. Y eso va a resolverlo en CSS. Así que en lugar de importar una biblioteca para el posicionamiento, esto te permitirá en CSS decir, haz que esta cosa esté anclada a esa cosa y te dará una forma de hacerlo automáticamente. De nuevo, sin bibliotecas. Como no tengo mucho tiempo para entrar en ello, te remitiré a mi post en el blog llamado Posicionamiento de Popovers. Te cuenta más detalles sobre cómo funcionaría eso.

Por ahora, quiero concluir. Así que hemos hablado de consideraciones de UI y semántica. Un par de cosas que espero que hayas sacado de esta charla. Una es que las APIs de diálogo y popover, pueden reducir tu paquete de JavaScript. Y eso es muy emocionante, creo. Ya no necesitas la biblioteca para hacer diálogos. Muchas cosas pueden ser cuidadas por el navegador. El atributo popover también solo añade comportamiento. No añade semántica.

QnA

Popovers y Modales en Aplicaciones Móviles

Short description:

Existen atributos como TEF index y content editable que añaden comportamiento pero no hacen mucho más. Los popovers y diálogos con showModal proporcionan acceso a la capa superior. Los popovers y modales no deben ser utilizados para la promoción cruzada. Los popovers y modales en aplicaciones móviles se implementan de manera más elegante. La accesibilidad es crucial, y el navegador puede ayudar con aspectos de accesibilidad. Los navegadores están intentando manejar las relaciones y mejorar la accesibilidad. La introducción de un atributo visual como popover es una pregunta interesante.

Eso es lo que sucede con muchas cosas, ¿verdad? También está el atributo TEF index y el atributo content editable. También añaden comportamiento. Realmente no hacen nada más. Es muy común para los atributos, pero importante notarlo.

Luego, el acceso a la capa superior es una faceta importante de esto. Así que los popovers y diálogos con showModal, obtienen acceso a la capa superior, nada más lo hará. Así que no puedes obtener acceso a la capa superior con ninguna otra cosa que no sean estas APIs. Y la última cosa a mencionar es, no uses popovers para promocionar tus productos de forma cruzada. Eso no es para lo que están. Y con eso en mente, quiero agradecerte mucho y referirte a mis diapositivas que están en ese código QR. Gracias.

Así que creo que hay una que estaba generando más emoción entre la gente, que es ¿cuál es tu opinión sobre los popovers o modales en móviles y el espacio de las aplicaciones móviles? Desde los puntos que has mencionado aquí, parece que las mobile apps implementan de manera más elegante en general. ¿Tenderías a estar de acuerdo con eso? Sí, sí, creo que es justo. Sí, sí, estoy de acuerdo con el punto. ¡Sí, genial! ¡Excelente! Esta siguiente persona ha planteado la dificultad que los popovers y modales pueden presentar para, desde una perspectiva de accessibility. ¿Cuáles son tus pensamientos al respecto? Sí, es cierto. Pero, sí, la accessibility es un tema muy amplio. Hay muchos usuarios diferentes de la web, y también aportan beneficios a muchos otros usuarios. Como, hay un beneficio en que te ayudan a hacer tu contenido de tal manera que algunas cosas están ocultas y algunas son visibles, lo que hace tu interfaz más concisa y la hará más usable. Ahora, es súper importante asegurarse de que lo haces de una manera accesible. Hoy en día, la gente está construyendo muchos de estos componentes de una manera inaccesible, y espero que tanto el popover como el diálogo puedan ayudar a hacerlo más accesible en general porque el navegador se encargará de más aspectos de la accessibility de él. Así que, puede incorporar accessibility, por así decirlo. Y eso es realmente difícil porque hay muchos matices en ello, pero esto es lo que los navegadores están intentando hacer hoy. Así que, se encargarán de las relaciones como, ¿está esta cosa expandida o no está expandida? ¿Esta cosa dice algo sobre esa otra cosa? Ese tipo de relaciones que las personas que usan lectores de pantalla necesitan saber y que a menudo no se introducen en el sistema. Así que, con estas nuevas APIs, podrían ser hechas por el navegador, y creo que eso es realmente emocionante porque nos permite construir más cosas y al navegador hacer más accessibility. Así que, creo que eso es genial. Genial, y mantener eso en la vanguardia de nuestras mentes cuando estamos desarrollando en su lugar. Así que, después de décadas de depreciar cosas visuales en HTML, ah, aquí vamos. Solo mirando las preguntas moviéndose. ¿Cuál es tu opinión sobre la introducción de un atributo visual como popover? Pregunta interesante.

Evolución Semántica del Popover

Short description:

Los popovers no son solo un elemento visual, sino que también introducen el comportamiento del teclado y la gestión del enfoque. Aunque los popovers tienen diferentes semánticas, aún necesitas diseñar tu propio diseño para ellos. La decisión de hacer del popover un atributo en lugar de su propio elemento fue impulsada por la falta de una única semántica que pudiera cubrir todos los casos de uso. Inicialmente se propuso como un elemento HTML llamado popup, pero la realización de que diferentes popovers tienen diferentes semánticas llevó a la decisión de no tener semánticas y tratarlo como comportamiento. Mirando hacia adelante, es desafiante anticipar cómo se podría haber utilizado la web ahora. Apagar todos los modales sin desactivar JavaScript es una posibilidad con características basadas en el navegador como los popovers, pero la gente de publicidad siempre encontrará formas de sortearlo.

No es solo un visual. Entonces, introduce el comportamiento del teclado e introduce la gestión del enfoque y todas estas clases de cosas. Entonces, sí, no estoy de acuerdo en que sea una cosa visual, pero tampoco es una cosa semántica como se mencionó. Como, sí, es solo comportamiento básicamente. Supongo que esto resalta el punto que planteaste al principio sobre estas disparidades en la importancia de la semántica.

Sí, sí, hay muchas semánticas diferentes con las que esto puede funcionar, pero aún necesitas hacer tu propio diseño para los popovers. Entonces, por defecto, es un div o lo que sea que uses, y aún necesitas design tú mismo.

Bueno, siguiendo con ese tema, hay una pregunta aquí de Alexandra. ¿Por qué popover se convirtió en un atributo en lugar de su propio elemento? ¿Con qué elementos se podría usar potencialmente además de? Esa es una muy buena pregunta. Está relacionado con estas diferentes semánticas que resalté. Así que antes pensamos, y en ese momento también pensamos que se llamaría popup, pero decidimos que no. Esa fue una propuesta para un elemento HTML que lo haría. Pero nos dimos cuenta de que no había una semántica única que realmente cubriría eso porque hay diferentes cosas. Como, algunas cosas son menús, algunas cosas son listas de selección. Entonces, si vas a dar un menú por defecto entonces, ¿qué pasa si es una lista de selección? Así que decidimos que no debería tener semántica, es solo comportamiento. Pero sí, ese fue un proceso, porque primero se imaginó que tal vez debería haber un elemento. Incluso se habló de múltiples elementos. Así que tendrías como un elemento de lista de selección y un elemento de menú. El menú ya existe pero está en desuso, así que sí. Historia larga, corta. Es difícil mirar hacia adelante y anticipar cómo podríamos haber estado usando la web ahora.

Sí, seguro. Entonces, creo que tenemos tiempo para tal vez una última pregunta. Así que tenemos la más actualizada aquí por un par de entradas tardías, pero Biomar parece ser, ya que es una característica basada en el navegador, ¿significa esto que algún día podemos apagar todos los modales sin desactivar JavaScript? Sí, esa es una perspectiva genial, sí. Hará eso mucho más fácil, pero supongo que la gente de publicidad aún encontrará la manera de sortearlo y molestarte. Sucederá, sí. Bueno, iba a decir que... Los anuncios encontrarán una manera de no ir completamente a lo Jurassic Park con eso. Consigue un buen bloqueador de anuncios, esto es muy importante. Excelente, en esa nota, muchas gracias por tu charla de hoy. Gracias. Ahora, tú... Gracias.

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

TestJS Summit 2021TestJS Summit 2021
30 min
Configuring Axe Accessibility Tests
Axe-core is a popular accessibility testing engine that is used Google, Microsoft, and hundreds of other companies to ensure that their websites are accessible. Axe-core can even integrate into many popular testing frameworks, tools, and IDEs. In this advanced session, we'll be learning how to configure axe and its integrations to fine tune how it runs and checks your pages and code for accessibility violations.
JSNation 2022JSNation 2022
24 min
a11y and TDD: A Perfect Match
Accessibility has been web development's ugly duckling for quite some time now. I often get asked, "when should you test for a11y in your apps?" My answer is simple, "right from the start!". Regardless of the framework considered - React, Svelte, Vue, YourOwn™️ - as developers we are in a privileged position to help the ugly duckling grow into a beautiful swan. How? By diving deep into the pond and harnessing the power of Javascript APIs to build the right components for your web apps. And how can do you know you are building them right? By pairing Test Driven Development with the Testing Library family. Ready to grow your web apps into swans?
JSNation 2023JSNation 2023
10 min
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
Our design systems commonly feature components that show on top of other content: tooltips, date pickers, menus and teaching UI, to name just a few. Proposed updates to the web platform are about to make building these a whole lot easier. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, modality and the top layer.
React Advanced Conference 2021React Advanced Conference 2021
32 min
How to do Good Without Doing Anything
There’s no arguing that building accessible websites is a force for good. But ensuring that our React websites and apps work for everyone can be time-consuming and isn’t always easy to get right. Luckily, investing a little bit of time on your accessibility workflow and setting up a series of automated tools will end up saving you tons of time and energy in the long run.In this talk I will demonstrate how you can leverage automated tools, clearly documented code standards and a well-defined development process in order to make building and testing accessible React apps a breeze. I will discuss the ways that I automate certain aspects of my development workflows to catch accessibility errors, define and set up tests and go through the entire lifecycle of accessibility feature development using a real-world example.
JSNation 2023JSNation 2023
30 min
Accessible Component System Through Customization
Most current UI libraries provide great user experience with a vast of components. But when it comes to heavy customization, and non-standard scenarios, especially for E-Commerce, they become hard to manage, scale or even slow down performance.
How to create a UI library that provides users the most possible freedom in customizing components, while keeping our performance and scalability to the fullest? How much accessible we can provide out of the box to our users? How much customization freedom is enough?
That's what my talk's about.

Workshops on related topic

React Summit 2023React Summit 2023
109 min
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
Workshop
In this hands-on workshop, we’ll equip you with the tools and techniques you need to create accessible web applications. We’ll explore the principles of inclusive design and learn how to test our websites using assistive technology to ensure that they work for everyone.
We’ll cover topics such as semantic markup, ARIA roles, accessible forms, and navigation, and then dive into coding exercises where you’ll get to apply what you’ve learned. We’ll use automated testing tools to validate our work and ensure that we meet accessibility standards.
By the end of this workshop, you’ll be equipped with the knowledge and skills to create accessible websites that work for everyone, and you’ll have hands-on experience using the latest techniques and tools for inclusive design and testing. Join us for this awesome coding workshop and become a ninja in web accessibility and inclusive design!
TestJS Summit 2021TestJS Summit 2021
85 min
Automated accessibility testing with jest-axe and Lighthouse CI
Workshop
Do your automated tests include a11y checks? This workshop will cover how to get started with jest-axe to detect code-based accessibility violations, and Lighthouse CI to validate the accessibility of fully rendered pages. No amount of automated tests can replace manual accessibility testing, but these checks will make sure that your manual testers aren't doing more work than they need to.
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
React Summit Remote Edition 2021React Summit Remote Edition 2021
91 min
Creating Accessible React Native Apps
Workshop
React Native is a framework used to create native iOS and Android apps in a way web developers may already be familiar with. But how do you ensure your React Native apps are inclusive and usable everyone? Scott will share tips on how to test and build React Native apps with accessibility baked-in!