WTFocus: a focus ring you can check instead of argue about
A tool for designing focus indicators that tells you, while you are still choosing, whether the one you drew passes WCAG 2.2 Focus Appearance. Built to support a symposium paper that took Best Presentation. Design mine, code my son's.
- Role
- Design
- Year
- 2020
- Built with
- Accessibility, WCAG 2.2, Focus appearance, Open source
Open the tool (opens in a new tab)Source (opens in a new tab)
A focus indicator is the one piece of accessibility work every keyboard user meets on every screen. It is also the first thing a lot of designers turn off, because an outline is the least considered default a browser ships.
What it does
Set a style on the left: the ring's color, its width, how far it sits off the control, and the backgrounds it has to show up against. Then tab through the preview on the right — an input, a select, a checkbox, a radio, a link, a button, a focus trap. What you designed is what you get to try.
Above the preview the tool reads that style against WCAG 2.2 success criterion 2.4.11, Focus Appearance, and says whether it passes AA and AAA. Not later, in an audit. While you are still deciding.
Why it is a measurement and not an opinion
2.4.11 is arithmetic. The indicator has to cover a minimum area and clear a contrast ratio against whatever it sits on. Both are calculable, so a focus style can be checked rather than defended.
Before that, the conversation was taste. Somebody wanted a thin gray ring because it looked quieter, and the person who could not see it was not in the room to say so.
The link is the deliverable
Every setting lives in the query string. A style that fails is a URL you can send to the developer who wrote it, and they open the same failure you were looking at.
That was the part I cared about designing. A tool that only convinces the person already using it has not changed anything.
Who built it
Concept by Claudio Luis Vera. The code is Marcello Paiva's, who is my son. The design is mine.
It exists to support a white paper for the ICT Accessibility Testing Symposium, written by the three of us. The talk that came out of it — Focus first: a new front-end approach — took Best Presentation.
Where it started
Version 0.1 is in the gallery below. Two panels, pick an element, see it focused, drawn three times over to argue about spacing and proportion.
The drawings carry something the tool does not: a screen reader preview, with a target, a voice, a speed and a play control. That half never shipped. What did is narrower than what was drawn, and has a conformance check across the top that the sketches never imagined.
The rest of the pencil work from those years is in sketches.
Gallery
About the drawing
The drawing for this piece was generated, not chosen. Hashing the piece’s name fixes one point on the color wheel; the other two follow from it. The same name always gives the same three colors.
#c6b04e#5f9ab0#5353c9The line under the drawing marked “Meant to show” is written by a person, not the model. A generated drawing keeps what is large and loses what is small, so the detail that decides who someone is can go missing, and a picture only reaches people who can see it. Where the drawing and that line disagree, the line is the intent.