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.

This talk has been presented at React Advanced Conference 2023, check out the latest edition of this React Conference.

FAQ

Los popovers son elementos flotantes de la interfaz de usuario que proporcionan información adicional, contexto o acciones. Son similares a los diálogos pero se usan para contenido transitorio y no modal, como menús de acción o sugerencias de formularios.

Un diálogo es un elemento HTML que puede ser modal, bloqueando interacciones con otros elementos de la página hasta que se cierra. Un popover, en cambio, es un elemento no modal que proporciona contenido flotante y suplementario sin restringir la interacción con el resto de la página.

La accesibilidad en popovers y diálogos se maneja a través de atributos ARIA y buenas prácticas de diseño, asegurando que estos elementos sean accesibles mediante teclado y lectores de pantalla. Los navegadores modernos ofrecen soporte incorporado que facilita la accesibilidad de estos elementos.

Los popovers son soportados en navegadores como Chrome, Edge y Safari. Firefox también los soporta, pero detrás de una configuración experimental que los usuarios deben activar manualmente.

Es recomendable usar popovers para contenido suplementario y transitorio, asegurándose de no sobrecargar al usuario con información. Deben ser fácilmente descartables y no interferir con la navegabilidad general del sitio web.

ModalsModalsModals.com es un sitio web que discute el uso de modales en el diseño web, proporcionando detalles sobre por qué y cómo usarlos adecuadamente. Este sitio es especialmente útil para entender las mejores prácticas y evitar el uso excesivo de modales que puedan afectar la experiencia del usuario.

Se recomienda utilizar las características más recientes de HTML y los soportes de navegador moderno para implementar popovers. Los desarrolladores pueden experimentar con estos elementos para entender mejor su comportamiento y cómo integrarlos efectivamente en sus proyectos.

Hidde de Vries
Hidde de Vries
28 min
20 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

QnA

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

Accesibilidad en Discord
React Advanced Conference 2021React Advanced Conference 2021
22 min
Accesibilidad en Discord
This Talk discusses the accessibility efforts at Discord, focusing on keyboard navigation and the challenges faced with implementing focus rings and outlines. The speaker showcases a unified focus ring system and a saturation slider to address accessibility concerns. They also highlight the implementation of role colors and the use of CSS filters for accessibility improvements. The Talk concludes with insights on runtime accessibility checking and the development of a performant core runtime system for checking accessibility issues.
Menos desorden, más poder: Aprovecha el poder de la plataforma web
C3 Dev Festival 2024C3 Dev Festival 2024
30 min
Menos desorden, más poder: Aprovecha el poder de la plataforma web
This talk focuses on the powerful features of CSS and HTML that can level up developer skills and enhance web UI. Scroll-driven animations, popover API, and anchor positioning are explored as ways to create dynamic effects, improve performance, and increase accessibility. The talk also emphasizes the benefits of building presentations with CSS and HTML, separating logic from styling, and leveraging core platform features. Wishlist features for the web platform and the challenges of pushing updates across browsers are discussed.
Configurando las Pruebas de Accesibilidad de Axe
TestJS Summit 2021TestJS Summit 2021
30 min
Configurando las Pruebas de Accesibilidad de Axe
Top Content
AXe is an accessibility engine for automated web UI testing that runs a set of rules to test for accessibility problems. It can be configured to disable or enable specific rules and run based on tags. Axe provides various options, but axe linter does not support all options. The importance of investing time and resources in accessibility is emphasized, as it benefits not only those with disabilities but improves the web for everyone. Manual testing is also highlighted as a necessary complement to automated tests for addressing accessibility issues.
Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad
React Advanced Conference 2023React Advanced Conference 2023
23 min
Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad
Nested interactive elements can cause accessibility issues on websites, and the speaker shares a personal experience with an accessibility bug involving a list component. Mitigating nested interactive structures involves limiting these patterns during development and restructuring existing elements. The speaker provides recommendations for improving accessibility, such as adjusting role properties and gathering user feedback. The conclusion emphasizes the importance of accessible solutions and encourages sharing resources to build more inclusive experiences.
Dilemas de los diálogos y travesuras modales: Un análisis profundo de las ventanas emergentes
JSNation 2023JSNation 2023
10 min
Dilemas de los diálogos y travesuras modales: Un análisis profundo de las ventanas emergentes
The Talk discusses the use of dialogues and popovers in web development. Dialogues can be modal or non-modal and are now accessibility-supported. Popovers are versatile and can be added to any element without JavaScript. They provide suggestions, pickers, teaching UI, list boxes, and action menus. Modal and non-modal dialogues and popovers have different behaviors and dismissal methods. Browser support for these features is expanding, but there are still open questions about positioning, semantics, and other use cases.
a11y y TDD: Una Combinación Perfecta
JSNation 2022JSNation 2022
24 min
a11y y TDD: Una Combinación Perfecta
This Talk explores the intersection of accessibility and test-driven development (TDD) in software development. TDD is a process that involves writing tests before writing production code, providing a safety net for code changes. The Talk demonstrates how to apply TDD principles to real-life examples, such as filling out a form, and emphasizes the importance of user-centric testing. By using atomic design principles, code can be organized in a clean and easy way. The Talk also discusses the use of labels and test IDs in tests for improved accessibility.

Workshops on related topic

Accesibilidad web para Ninjas: Un enfoque práctico para crear aplicaciones web accesibles
React Summit 2023React Summit 2023
109 min
Accesibilidad web para Ninjas: Un enfoque práctico para crear aplicaciones web accesibles
Workshop
Asaf Shochet Avida
Eitan Noy
2 authors
En este masterclass práctico, te proporcionaremos las herramientas y técnicas que necesitas para crear aplicaciones web accesibles. Exploraremos los principios del diseño inclusivo y aprenderemos cómo probar nuestros sitios web utilizando tecnología de asistencia para asegurarnos de que funcionen para todos.
Cubriremos temas como el marcado semántico, los roles de ARIA, los formularios y la navegación accesibles, y luego nos sumergiremos en ejercicios de codificación donde podrás aplicar lo que has aprendido. Utilizaremos herramientas de prueba automatizadas para validar nuestro trabajo y asegurarnos de cumplir con los estándares de accesibilidad.
Al final de este masterclass, estarás equipado con el conocimiento y las habilidades para crear sitios web accesibles que funcionen para todos, y tendrás experiencia práctica utilizando las últimas técnicas y herramientas para el diseño inclusivo y las pruebas. ¡Únete a nosotros en este increíble masterclass de codificación y conviértete en un ninja de la accesibilidad web y el diseño inclusivo!
Pruebas automatizadas de accesibilidad con jest-axe y Lighthouse CI
TestJS Summit 2021TestJS Summit 2021
85 min
Pruebas automatizadas de accesibilidad con jest-axe y Lighthouse CI
Workshop
Bonnie Schulkin
Bonnie Schulkin
¿Incluyen tus pruebas automatizadas verificaciones de accesibilidad? Este masterclass cubrirá cómo comenzar con jest-axe para detectar violaciones de accesibilidad basadas en código, y Lighthouse CI para validar la accesibilidad de las páginas completamente renderizadas. Ninguna cantidad de pruebas automatizadas puede reemplazar las pruebas manuales de accesibilidad, pero estas verificaciones se asegurarán de que tus probadores manuales no estén haciendo más trabajo del necesario.
Accesibilidad web en aplicaciones JavaScript
React Summit 2022React Summit 2022
161 min
Accesibilidad web en aplicaciones JavaScript
Workshop
Sandrina Pereira
Sandrina Pereira
A menudo vemos que JavaScript daña la accesibilidad de un sitio web. En esta masterclass, aprenderás cómo evitar errores comunes y cómo utilizar JS a tu favor para mejorar la accesibilidad de tus aplicaciones web.
En esta masterclass exploraremos múltiples ejemplos del mundo real con problemas de accesibilidad, y aprenderás cómo hacer que funcionen para las personas que utilizan un mouse o un teclado. También aprenderás cómo se utilizan los lectores de pantalla, ¡y te mostraré que no hay razón para tener miedo de usar uno!
Únete a mí y déjame mostrarte cómo la accesibilidad no limita tus soluciones o habilidades. ¡Al contrario, las hace más inclusivas!
Al final, serás capaz de:- Comprender los principios de WCAG y cómo están organizados- Conocer casos comunes en los que JavaScript es esencial para la accesibilidad- Crear enlaces, botones y elementos conmutables inclusivos- Utilizar regiones en vivo para errores y estados de carga- Integrar la accesibilidad en el flujo de trabajo de tu equipo de inmediato- Darte cuenta de que crear sitios web accesibles no es tan difícil como parece ;)
Creando aplicaciones React Native accesibles
React Summit Remote Edition 2021React Summit Remote Edition 2021
91 min
Creando aplicaciones React Native accesibles
Workshop
Scott Vinkle
Scott Vinkle
React Native es un framework utilizado para crear aplicaciones nativas de iOS y Android de una manera con la que los desarrolladores web ya pueden estar familiarizados. Pero, ¿cómo asegurarse de que tus aplicaciones React Native sean inclusivas y utilizables para todos? Scott compartirá consejos sobre cómo probar y construir aplicaciones React Native con accesibilidad integrada.