2

As part of a redesign of my personal site, I have a hero image with an animated flying blimp. When hovered, the blimp toggles to a different animation. I would like a keyboard user to be able to focus this element and trigger the animation, so I provided it a tab-index. This works, but the animation looks strange with the focus outline surrounding the blimp.

My question is is it ever acceptable to use a custom focus indication as art direction? Normally I would be loathe to fiddle with the focus outline a user expects to see, as it is important for keyboard accessibility. However, it looks strange and out of place here, and I could probably swap it out with a lighting/drop-shadow effect of some kind that would still indicate that the element's state had changed to "focused" that would better match the content.

2

would still indicate that the element's state had changed to "focused"

That's a key phrase. You're ok when you word it that way.

From a WCAG perspective, 2.4.7 just says that an interactive element needs to have a visible focus indicator. There are no rules (in WCAG 2.0) that say what the focus indicator needs to look like. You can do anything you want with it as long as the element looks different when it has focus.

In WCAG 2.1, a new success criterion was added, 1.4.11 Non-text Contrast, so your custom focus indicator must have a 3:1 contrast ratio compared to adjacent colors. There are some helpful examples in the "understanding" section.

A few other questions, though.

an animated flying blimp

That sounds like the blimp is moving. If so, then to satisfy 2.2.2 Pause, Stop, Hide you need a way for the user to stop the animation.

And if the blimp is moving, doesn't that make it harder to click on with a mouse, if you have trouble using a mouse?

  • Awesome, thanks for this-- I hadn't noted those WCAG items. As for the animation: The user has the ability to set "prefers reduced motion" to stop all animations and the page will attempt to discern if you have set "prefers reduced motion" in your OS. The blimp hover/focus animation conveys no meaningful information-- it is simply an "easter egg", so it isn't mission critical the user interact with it. Also, the area in which it repeats its animation is small-- you can keep your mouse stationary in a large area and be hovering it for the entirety of the animation cycle. Thanks! – Alexander Nied Mar 31 at 19:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.