Proposal for a new SC for hover (WCAG 3.0)

[JAWS-test]

SC

When operating with a pointing device, a hover effect should be displayed on interactive elements that meets the following conditions:

• the click area of the interactive element should be visible,
• the cursor should be adequate and
• the contrast of the hover effect should be sufficient - either to the background or to the state without hover (at least 3:1).

Purpose of hover visibility

• where the mouse cursor is located (hover effect is better visible than mouse cursor)
• interactive elements are recognizable as interactive
• type and operating options of the interactive elements are recognizable (via CSS styles for cursors: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)
• status of interactive elements is recognizable (e.g. cursor:not-allowed for deactivated and read-only form fields)
• click area of the interactive elements is recognizable
• distinction between interactive elements is recognizable (e.g. in a tree: elements close to each other for fading in and out and for selecting treeitems)

Benefits

• primarily cognitively impaired users
• visually impaired users (because the hover effect could be badly visible or interactive elements are badly recognizable as such, e.g. buttons have border with too little contrast, which is not a violation of 1.4.11, because buttons do not need a border)
• motorically impaired users using assistive technology that simulates pointer devices
• users who adjust the colors (High Contrast Mode, User Styles, color adjustment in the browser, etc.) because for them the interactive elements, their click area and their status are often difficult or impossible to recognize

Level

AA or AAA

Reason

The visibility of the hover is currently only partially covered by 1.4.11 (see #896). At 1.4.1 hover is only mentioned at https://www.w3.org/WAI/WCAG21/Techniques/general/G183. However, there is no criterion which requires a hover effect.

[jhausler1266]

Is this referring to hover panels themselves, or hovering with a mouse to reveal buttons and other stuff? I can't tell.

I would love to see a SC that bans hiding actionable content under mouse hover states. Example: listview with actions that only show when mouse is hovering over a given row.

I'd be happy to help on such a SC if that's something the community wants.

[JAWS-test]

I'm interested in a criterion that ensures that the cursor and the visual presentation of the element change when the mouse is over it. And that already implemented hover states are clearly visible for all, e.g. have sufficient contrasts.

Showing interactive elements only with mouseover - I'm not sure if it's an accessibility problem as long as it works when using the keyboard. It is in any case a bad usability for all users and certainly difficult to use on mobile devices.

[jhausler1266]

Showing interactive elements only with mouseover can be a COGA based issue or a mobility one, if folks are relying on speech input. You'd have to know what to click on without seeing your options.

[JAWS-test]

I agree. But this is a different issue from the SC I have proposed. That's why you should propose a new SC on the subject.

[alastc]

So taking a random link in this page, e.g. example.com, what would it need to do to pass?

• Does it require a border or background to show the click area?
• Does the default browser cursor pass?
• If it has a background color by default, with contrasting text (at 4.5:1), what are the options for the hover effect?

[JAWS-test]

Does it require a border or background to show the click area?

Yes, to show the click area

Does the default browser cursor pass?

With links in all cases, because with these the default cursor changes. However, it would be recommended to adjust the default cursor if this describes the function better.

If it has a background color by default, with contrasting text (at 4.5:1), what are the options for the hover effect?

• Change colors so that text to background continues to contrast 4.5:1 and hover color to non-hover color with contrast 3:1 (e.g. invert foreground and background color)
• other visual means (add a border or change border-width, border-style, font-style, add a icon etc.)
• Remove background color, because click area was already clearly visible in non hover state (only applicable if there is a minimum contrast of 3:1 between original background color and the new background color after removing the background)

The requirements would be the same as for keyboard focus visibility with the following differences:

• The click area should be visible in hover or non-hover state (and best in both).
• The cursor should not transmit incorrect information (if adapted by the author).
• Recommendation would be to always check whether a custom cursor describes the function better.