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.