Styling interactive elements

When you have an element you can interact with, you need to let your users know. Usually, we do this by adding a hover and a focus style to the element.

The styles can be as subtle or bold as you like. As long as the styles are accessible.

Hover

Having a hover style for an element is not required by the accessibility guidelines. But if you create one, then it needs to follow the WCAG success criteria.

I've heard arguments where people have said that nobody needs the hover styles. Their reasoning has usually been that people with screen readers benefit nothing from those. Which is true. But one group who enjoy understandable hover styles are mouse users who can see. To be as inclusive as you can, don't neglect any of your users. I recommend always creating hover styles. That way your users will have an easier time knowing what elements they can interact with. Otherwise, they might waste time wondering how your site works.

Focus

For focus styles, there are already a few requirements in WCAG 2.1 but there are more to come in WCAG 2.2.

The focus style needs to be visible. Never completely hide a focus style from any element.

Some people recommend leaving the focus style as the browser default. But note that the browser default styles vary. Some of those don't have enough contrast with all backgrounds. So if you want to sure your focus is visible enough, create your own.

How to design a good hover or focus

Your hover and focus should not be identical. It's very possible that you have focused on one element but are hovering over another. It can get confusing if the styles are identical. But even identical styles are better than no styles.

A focus is by default defined by an outline. An outline is a quite nice way of defining a focus style, but I like to make it more visible than any browser default.

When choosing your colors, make sure there is enough contrast on any background. Depending on your background colors, you might need to define several focus colors. Also, remember that your color should not be the only visual cue.

If you have an outline or a border or an underline, think about the CSS unit you define the thickness width. If you use pixels, the thickness will remain the same if the text content is zoomed in. If you use a scalable unit like rem, the thickness will also scale when zoomed. The latter might often be better for your users. If the user needs to zoom the text, they probably like the interactivity cues being more visible.

Some ideas for styles for interactive elements

Links

Links are usually underlined by default. When you hover over a link you can, for example, make the underline bolder. Then you can also change the color if you want. You can also add another border. An acceptable solution is also to remove the underline on hover. I would rather make the border different than completely remove it. On focus, you can use an outline. The focus style can also contain the hover styles if that makes sense.

Also, remember that no other element on the page should look like a link. Sometimes I've seen implementations where the link looks like the headings. And then it will become a guessing game to figure out which of those are links. Because in one of these cases some of the headings were actually links and some not. But they looked identical. So pay attention to the link default styles as well. Try to have them as clear as possible.

Buttons

Often buttons will have a hover style that will flip the colors of the button. This is still relying on the color, so do add another visual cue as well. You can, for example, use a border. Focus usually contains an outline but it's not mandatory. Also, a quite interesting effect is to change the button rounding on focus.