How Popovers Are About to Become a Whole Lot Easier to Build

Rate this content
Bookmark

You've probably build one of these before: tooltips, date pickers, menus, teaching UI… they're all examples of “popover” content. Good news: it's going to get a whole lot easier to build these, with some proposed web platform features. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, when to use modality and access to the top layer.

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

Watch video on a separate page

FAQ

Recently, HTML has introduced two features that support the creation of popovers and dialogues, enhancing their functionality and accessibility.

The 'dialogue' element in HTML is designed to handle accessibility concerns more effectively by managing keyboard focus and screen reader interactions, making web content more accessible to users with disabilities.

Popovers and dialogues can be challenging for accessibility due to their dynamic nature, which can disrupt the usual flow of navigation for screen readers and users with disabilities unless properly managed.

In the US, popovers are commonly referred to as Yorkshire Puddings.

Modal content requires user interaction before they can return to the main flow of the application, effectively blocking other interactions. Non-modal content allows for interactions outside the active window, not interrupting the main workflow.

The 'popover' attribute in HTML is significant because it allows developers to create floating UIs that are contextually relevant to other content on the page without adding additional semantics, focusing purely on behavior.

Semantics in web development is crucial as it helps define the meaning of web content, not just for users but also for accessibility tools and search engines, improving the overall user experience and SEO.

The Open UI Community Group at the W3C focuses on developing standards and features like popovers for the web, ensuring they are accessible and functional across different browsers and devices.

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

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This talk explores the challenges and guidance for building well-designed popovers and dialogues in HTML. It discusses the differences between dialogues and popovers, their use cases, and the importance of semantics in differentiating them. The talk also covers UI considerations, implementation, and positioning of popovers. Additionally, it highlights the use of modals for blocking access to the rest of the page and the role of semantics in making accessible dialogues and popovers.

1. Introduction to Popovers and Dialogues

Short description:

In this talk, we will focus on content overlaps in design systems, particularly popovers and dialogues. We will explore the challenges and provide guidance on how to build them well. HTML offers two exciting features, dialogue and popover, with wide browser support. While dialogue is more established and accessible, popover is newer but gaining support across major browsers. It is recommended to experiment with these features while considering accessibility.

So who has got popovers in their design system? Show of hands. Cool. The majority of this audience.

I only found out recently that in the US, Yorkshire Puddings are called popovers. I even found this video on America's text kitchen, where they say popovers can be real tricky as we're about to find out in this talk. They've got a custody inside. I can't promise that for today's talk.

Yeah, we'll be focusing on content overlaps other content. Super common, it wasn't always like that on the web, right? We had long blobs of linear content, and now we like to put stuff on top of other stuff. On some websites, they really go overboard with this, where you get like banners for, do you want to go send to cookies? Do you want to sign up for our thing? There's ads that are quite bad and invasive. And then sometimes, you even get more stuff on top of that. Like in this case, why? It's no good. It's no good, and you see a problem here in this example is that their modal to ask you to sign up for the newsletter is actually underneath the cookie consent thingy. Not good.

And yeah, you're probably aware of this website called ModalsModalsModals.com. It's modal with a z. It explains, in quite a lot of detail, why you should not be using modals, and that's something I won't be covering today. I'm not going to talk about why you should use them. I'm going to talk about if you are using them or if someone in your team decided were using them, how to build them well.

And the reason I got interested in this is that as of recently in HTML, we've got two exciting features that allow you to build popovers and dialogues quite well. A little bit of a spoil here, I'm not only going to talk about popovers but also about dialogues because they are quite similar, and I to leave this room with knowledge about how they're actually different.

So dialogue is an HTML element that has wide browser support that, as of recently, works really well accessibly as well. Like it's safe to use. There's still some stuff to iron out. There used to be a lot more accessibility issues with it, and it's quite safe to use now. And then there's popover, which is fairly new. But also, it's supported in Chrome and Edge, Safari, and it is in Firefox behind the flag. So very soon, we'll be able to use this. And I recommend actually experimenting with it today. There are still also some accessibility considerations to take into account.

2. UI Considerations and Examples of Popovers

Short description:

Today, we'll talk about UI considerations for dialogues and popovers, and the importance of semantics in differentiating them. I'm Hedda, a developer and accessibility person at NL Design System. I'm also part of the Open UI Community Group at W3C. Let's explore some examples of popovers, including their use in Slack and Microsoft Teams.

I do have a blog post coming out about that soon because there is some stuff to look at there. Today, we'll talk about UI considerations for these things, and also semantics, which are really important, especially when you're thinking about both dialogues and popovers, how are these actually different? It's quite a challenge to find out.

Now, as mentioned, I'm Hedda. I work at NL Design System for the Dutch government. I'm a freelance developer-related accessibility person. And I'm also a participant in Open UI Community Group, which is a group at the W3C that makes things like popovers. So we're working on it there. I now have my own blog on Hedda.blog. You can like and subscribe. The other day, someone thought you could actually like and subscribe. You need to get the RSS feed. So that's something you can use.

So let's look at some examples of popovers. They are everywhere. I don't know if anyone's got the new Slack yet, but they do use a popover to explain to you how to use it. Teaching UI is what that's called. It's not always used in very good ways either. We've seen previous examples. When I was using Teams to chat to my colleague, I got this feedback popover that just popped over my content, my conversation that I was having. And the other day, when I was in a very serious business meeting, I got Microsoft to promote their other products in Microsoft Teams. They went, do you want to use Excel, because we also make that. I'm not sure, like, it was kind of in a way, because I was getting ready to have some very serious conversations there. And it goes even weirder sometimes. They also encouraged me to be my expressive self. Create some avatars. No, thanks. I'm in a serious meeting. There's better things like Slack that give you this popover that says, you look nice today. And they don't even check your camera footage for it. They actually tell you you look nice every single day, which I appreciate.

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
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.
Less Cruft, More Power: Leverage the Power of the Web Platform
C3 Dev Festival 2024C3 Dev Festival 2024
30 min
Less Cruft, More Power: Leverage the Power of the Web Platform
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.
Configuring Axe Accessibility Tests
TestJS Summit 2021TestJS Summit 2021
30 min
Configuring Axe Accessibility Tests
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.
Nested Interactive Elements: An Nightmare in Accessibility
React Advanced Conference 2023React Advanced Conference 2023
23 min
Nested Interactive Elements: An Nightmare in Accessibility
Watch video: Nested Interactive Elements: An Nightmare in Accessibility
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.
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
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 and TDD: A Perfect Match
JSNation 2022JSNation 2022
24 min
a11y and TDD: A Perfect Match
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

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 ;)