Does hover state button text need to meet accessibility guidelines?

Question

I've got a basic understanding of accessibility and how it applies to visual elements of your product and I'm keen to apply guidelines as best as I can.

My question is does the hover state button text also need to comply with accessibility guidelines as well as the normal state?

Answer 1

Let's take the example of a table row that is highlighted on mouse hover. As mentioned by Sooraj MV, WCAG enforces a contrast ratio of 4.5:1 minimum for AA level of accessibility.

OK but you can argue that the color contrast is good when not hovering / focusing the element. The problem is that some people with low vision will use a screen magnifier, and for example to read the table row, their mouse will necessarily be on hover. That means everytime they will read a row, they will trigger the hover interaction, making a good color contrast becomes mandatory in this case.

For the contrast of a focused element, the problem seems less obvious, but users generally focus on an element (i.e. button) just before they trigger the interaction. If they can't read what is focused, how are they supposed to know what the action is? They would need to go back and forth. Obviously this is not a good user experience.

Remember that accessibility guidelines are here to help you design accessible websites. In the end, the only thing that tells if it is accessible or not is a user test. And you can provide a very bad user exeprience while respecting WCAG AA ... Prioritize user feedback over guidelines

Answer 2

First off, hopefully your hover state is also indicated with keyboard focus too. (Just use :hover and :focus in the same style definition).

Whether the button has focus or hovered or not, the text on the button must have a sufficient contrast with its background color. If it didn't, then the text might disappear when it receives focus/hover and then you wouldn't know if you should select the button because you can't see the text.

Note, however, that 1.4.11 says that the focus color or hover color does not need sufficient contrast with the default state. That is, if your button's background changes slightly between hover and default state, that color difference does not have a contrast requirement.

Answer 3

Yes, of course. WCAG 2.0 version 1.4.3 has not mentioned anything specific regarding color change for button text on hover/focus states. It is safe to assume that the button text on hover/focus states should maintain a contrast ratio of 4.5:1 or more to pass AA conformance level of WCAG 2.0. More info can be found here: https://webaim.org/articles/contrast/

If you are looking for accessibility guidelines for content on focus/hover states in general, they are clearly explained in the latest version of WCAG 2.1 2018 version in Success criterion 1.4.13 https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html

Answer 4

Yes it does. Hover state is just one of the states of a UI control, so every requirement is applicable.

Only disabled (inactive) state is exempt from colour contrast requirements.

See Success Criterion 1.4.3 Contrasstrong textt (Minimum) Incidental

Answer 5

You describe a way of thinking about accessibility that is quite common.

Lets assume it is for a contact form and ask those questions:

1. Does the hover state need to be accessible or the whole button?
2. Does the button need to be accessible or how the form can be send?
3. Does the form need to be accessible or just the fact that people are able to contact you?

You might be struggling to make a contact form accessible for disabled people, and then find out that they prefer to make a call. Just by adding a phone number on the page makes it a lot more accessible for those people to contact you. While this is just an example, I hope it makes a point clear. Are all users able to understand what the button does and how it behaves in the context of the form?

Focus on the button in it's entirety, not just the hover state, and see if and how the hover state improves or decreases the accessibility of the button.

Does the hover state of the button communicate some crucial information? Provide this information in a different way. If the hover state has the same function as the focus state for keyboard users, it should be made accessible.