I’ll be honest, I often question if I’m evaluating this one right. Let’s look at what the text of 1.4.13:
Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:
- Dismissible: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
- Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
- Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.
Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.
Breaking this down, what does it mean?
I use my mouse or keyboard to focus on a control. When new content is exposed, I need to follow these rules.
Dismissable
I need to allow the user to dismiss this without moving the mouse or keyboard focus. OK, that is clear, but how do we do it? I can’t move the mouse, and I can’t move keyboard focus, then I need another action I can take. This is why we always implement the Escape key to close these exposed layers.
But here’s the trick…
If you hit ESC while one dialog is open, it will close. If you hit ESC while 2 or three are open, they will all close. For single page applications, or modal “sheets,” if users are several levels deep, they go back to the beginning when they hit ESC. You need to keep control of propagation as well as a track of which dialog opened which. As the user hits ESC, we need to stop propagation after closing the dialog. We also need to return focus to the control that opened it.
Hoverable
If I opened the new content with mouse, I also need to move around inside the new content. This does mean that when we are opening it, we are waiting for an exit event before we close it.
Now, that exit event could be a variety of things. Hitting ESC. Mousing over another control that exposes content. Clicking outside the container. The choices are many, but that it is clear how to do it is crucial.
Persistent
The best practice is to use an event tied to a button. This allows the keyboard user to activate the button to open it and close it. This also benefits users who rely on voice control. The mouse user can also open by clicking, or you can add hover to open the area. But mousing out on it’s own won’t close it. That needs another event that is clear the user is done with this object.
For me this is where I always got confused. What does it mean to be persistent? For how long? What if I click somewhere else on the page? Do I have to close the dialog before moving to some other control?
Persistent means once opened, it stays open until you close it. To close it you can do any of the following:
- Escape key
- Close button
- Hover over another active control that exposes content
- Click event elsewhere on the page
- Activating a control inside the exposed content
Best practice: Use at least one in addition to the ESC key.
Have more questions? Want to discuss this? Find me on LinkedIn and BlueSky!