Repository navigation
Testing focus appearance #2901
Description
We'd like to to test the complexity / reliability of focus-appearance in practice.
This document includes the instructions and an initial set of example pages.
There are three complete pages (from three different sites), which I think is enough (edging on too much) in terms of time people would have to put into the exercise.
However, if you have any good example pages which can replace one of the current ones, that is something we'd like to find.
Activity
dav-idc commentedon Jan 10, 2023
Hi @alastc I've started this exercise in my own copy of that document you've shared. I'm approaching it partially as a learning & development opportunity for myself, to justify the amount of time spent.
I've completed 2 of the 36 examples so far, so this might take a few weeks.
alastc commentedon Jan 10, 2023
To be fair, the first two items are the hardest. Once I had thought through the dashed outline, the rest of the MS ones could be "eye-balled" (i.e. called yes/no immediately).
WilcoFiers commentedon Feb 9, 2023
@alastc Asked for some more pages / examples:
https://www.deque.com/axe-con/
Axe-con's registration buttons are a good example of a focus indicator that isn't on the component:
Another challenging example is when focus is on an element with a multi-colored background. For example the progress bar in a YouTube video:
https://www.youtube.com/watch?v=DPN6SGTiEf0&t=324s
Something we should also check I think is examples where focus is wrapped around images. Wikipedia has lots of these. They give a blue 1px outline on pictures. That fails sometimes, but where there is a mix of good and bad contrast, how do people understand that. For example this one:
https://en.wikipedia.org/wiki/London_Underground
dbjorge commentedon Feb 10, 2023
Thanks for identifying these specific examples, Wilco! I think cases involving mixed background/adjacent contrast ratios like your second and third suggestions are by far the most problematic for testing consistently in the current text, that's where I'd expect to see the most inconsistency in testing.
I think another point that's especially likely to throw off testers is links that get line-wrapped where you get a different answer depending on whether you're careful about applying the "perimeter" and "minimum bounding box" definitions as if the link were on one line. I'll try to find a good example of this in practice.
alastc commentedon Apr 18, 2023
The testing was reviewed in a meeting and several updates were agreed, including to move it to AAA level.