Field Notes
Short, specific articles on the details other guides skip. Every note shows before it tells, and every note ends in a lab or a live example.
Latest notes
-
The focus ring is the interface
For anyone who moves through a page without a mouse, the focus ring is the cursor. Here is what a great one looks like and why most of them fail.
-
Why your focus ring vanishes in dark mode
A ring designed on a white mockup is a coin toss once the page can be dark. The fix is not a darker ring. It is a second tone.
Subscribe with the RSS feed.
On the way
Working titles, grouped by topic. Each lands with the lab it belongs to.
Focus and keyboard
- Hover is a state most people do not have
- Skip links people actually find
Alt text
- Alt text is a decision, not a description
- The empty alt is a choice
- Alt text for charts: the data is the alt
- Alt text for generated images
Color
- Terminal colors are a contrast problem too
- Build a palette that passes every pair
- Contrast ratio vs perceived contrast
- Color is never the only signal
Motion, layout, reading
- Reduced motion is not no motion
- Reading order is not visual order
- 400 percent zoom is a layout test, not an edge case
For agents
- How an agent should decide on alt text
- A checklist for code-generating assistants
- Why agents miss focus states