Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Testing focus appearance #2901

Closed
alastc opened this issue Jan 5, 2023 · 5 comments
Closed

Testing focus appearance #2901

alastc opened this issue Jan 5, 2023 · 5 comments

Comments

@alastc
Copy link
Contributor

alastc commented Jan 5, 2023

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.

@dav-idc
Copy link
Contributor

dav-idc commented 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
Copy link
Contributor Author

alastc commented 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
Copy link
Contributor

@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:

Axe-con Registration button focused, showing white crescents on a dark button, and a schedule button without the crescents

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

YouTube video progress bar focused; Semi-transparent focus on a multi-colored, video background

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

London underground logo wrapped in a blue outline. Focus is clear, except where it touches the logo on two places

@dbjorge
Copy link
Contributor

dbjorge commented 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
Copy link
Contributor Author

alastc commented Apr 18, 2023

The testing was reviewed in a meeting and several updates were agreed, including to move it to AAA level.

@alastc alastc closed this as completed Apr 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants