Currently the new design for www.classicpress.net has hover styles that I would describe as “aggressive” or “strong” - they introduce major changes to the appearance of the element when it is hovered. For example:
From a visual perspective, focus and hover essentially cater to people with the same sets of disabilities: poor sight and/or poor peripheral vision. The only real distinction between them is that focus is for those people in that category who use the keyboard, whereas hover is for people who use a mouse.
You can actually see how important hover is just by scrolling to the bottom of the page we have been working on and see the default treatment that the Susty dev has given to hover: he uses a big, fat underline. That’s clearly way more noticeable than the rather pathetic dotted outline that is the browser’s default means of handling focus. (You’ll also notice that he doesn’t always bother to color hyperlinks, which is ironically bad for those with good eyesight! I think he might have done that on purpose to make the point.)
Now you (and @BlueSkyPhoenix) might still find that “jarring” as you have with my and/or Josh’s treatment of the buttons. But your subjective responses really tell me two things: that you are unfamiliar with sites that work well for accessibility purposes, and that Josh’s and/or my treatment actually works. The point is that the styles for hover and focus need to arrest your attention. Otherwise they aren’t doing their job.
This is why mere changes of color aren’t enough. They justaren’t obvious enough to arrest the attention of those who need arresting indicators. Personally, I like Josh’s changes of color, and I don’t find it odd to have both a change of color and something for a11y purposes. But then I am used to using websites that have been specifically designed to work with a11y.
That doesn’t mean, of course, that what I added to Josh’s work is the only means of tackling focus and hover. So I’ll spell out the alternatives. One would be to add an artefact, like an underline or an outline. But neither of those works well with buttons. So this option is out. That leaves us with two alternatives that attempt to use light (or the elimination of light) as the arresting effect:
We can try to mimic outline by having what Michelle aptly calls a glow. I took that effect from the FAQ Concertina plugin that I worked on. Michael, the author of that plugin, was really rigorous about getting the styles to work 100% for a11y. When I first saw the “glow” effect, I too found it jarring. But it now seems normal to me, and I know it does the job. If you are still not convinced, what we could do, as I suggested in the Github issue, would be to make the glow effect smaller. Since the purple and aqua buttons are on a bright white background, that should still work.
We can reverse the color scheme of the button. This works because (a) there must already be a significant contrast between the font and background colors to meet a11y requirements, and (b) swapping the two is very arresting. This is what I have done with the menu items. To be honest, this is generally my preference over the glow effect because I think it’s even more arresting and yet cleaner. But it’s not so straightforward with the purple and aqua buttons because they are placed against a white background. So (even though the button would still have a border) reversing the button font and background colors would risk essentially â€œlosingâ€ the button.
So it seems to me that we need to pick some variant of these two options and then decide whether to keep the button’s change of background color too.