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.

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

Accessibility at Discord
React Advanced Conference 2021React Advanced Conference 2021
22 min
Accessibility at Discord
Configuring Axe Accessibility Tests
TestJS Summit 2021TestJS Summit 2021
30 min
Configuring Axe Accessibility Tests
Top Content
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.
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
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.
a11y and TDD: A Perfect Match
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?
How to do Good Without Doing Anything
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.
Nested Interactive Elements: An Nightmare in Accessibility
React Advanced Conference 2023React Advanced Conference 2023
23 min
Nested Interactive Elements: An Nightmare in Accessibility
There have been numerous remarkable new UX experiences developed over the years, such as cards displaying an array of products and clickable list items with dynamic menu options, among others. However, only a few are aware of the challenges involved in building these structures with accessibility in mind, and unfortunately, some of them are completely inaccessible. 
In today's talk, we will explore some of these prevalent web UX patterns and delve into the hidden challenges they present. While we may be able to mitigate some of these issues, others serve as cautionary tales in accessibility.

Workshops on related topic

Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
React Summit 2023React Summit 2023
109 min
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
Workshop
Asaf Shochet Avida
Eitan Noy
2 authors
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!
Automated accessibility testing with jest-axe and Lighthouse CI
TestJS Summit 2021TestJS Summit 2021
85 min
Automated accessibility testing with jest-axe and Lighthouse CI
Workshop
Bonnie Schulkin
Bonnie Schulkin
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.
Web Accessibility in JavaScript Apps
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Sandrina Pereira
Sandrina Pereira
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 ;)
Creating Accessible React Native Apps
React Summit Remote Edition 2021React Summit Remote Edition 2021
91 min
Creating Accessible React Native Apps
Workshop
Scott Vinkle
Scott Vinkle
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!