Hi guys. Josh here with Online ADA. In this video we’re talking about article 1.4.13, which is ‘Content on Hover or Focus’. This is a level AA requirement. Let’s jump in.
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 hoover 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 than the pointer can be moved over the additional content without the additional content disappearing. And 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.
This topic is broken down into three subsections and I’m gonna get into those individually here.
Dismissible. This means that whenever you have content that appears when you’re hovering over something, so either by means of a tool tip or perhaps a sub navigation in a navigation menu, you’ve got this, the children that come down and maybe you hover over or focus those sub children, as well. They maybe open up another menu. If any of that content that appears, when you have focused or hovered, obscures other content, then it needs to be dismissible. You need to have some mechanism in place for being able to remove that content from view, without moving your mouse away or removing focus from the element. This is commonly done with the escape key. I see that a lot where, if you have a set menu that appears when you focus over a parent element, then hitting escape will make that disappear again.
That’s really all there is to that. It’s just important to make sure that if content is obscured you have a way of making it not obscured without forcing the user to do more actions. Especially considering something like a menu navigation. Focusing to another element might make another menu appear. It might be worse cause you might have more elements in there. The only time this is not really necessary is if you are presenting information over other content that is essential for the user to understand that there’s some sort of error, perhaps, in a form validation. it’s very important that can be an exception to the rule.
Additionally, if the content being obscured is something that has, let’s say the role of presentation, like maybe a decorative image. That’s not essential information It doesn’t need to be dismissible in that case.
The second part of this, hoverable. I see this most commonly with tool tips. When you hover over a button that, perhaps has more information that appears in a tool tip, then when the user goes into that content, I suppose I could see this with a sub navigation too. It can’t, it should stay there when they navigate into that element if they focus down into the child, or if they move the hover over one of those elements it doesn’t go away because the parent element lost focus. That’s what this one is talking about with hoverable.
The last one is persistent. This is basically saying that when you trigger something, like a sub navigation, in a navigation menu, it doesn’t just disappear on its own. It’s going to persist. It’ll stay there until an expected input has happened, whether they have hit the escape key to make it disappear or they’ve moved on to another element. It won’t just disappear on its own.
And that’s all there is for this article. Thanks for joining me and I’ll see you in the next video.