WCAG 2.1 Article 1.4.13

Описание: Tools and info to get your website accessible and WCAG Compliant: http://OnlineADA.com

Unlock the WCAG walkthroughs for level AA compliance, get accessibility web development training, and additional tools training in the Accessibility Academy: https://onlineada.com/academy/

Are you a digital agency? Join our Partner Agency Program! https://onlineada.com/partners/

Online ADA
Advancing Digital Accessibility

Transcription Below:

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.