For a key page or flow
Review what is getting in the way, redesign the interaction states, implement the changes, and test the result.
Accessibility and visual design
Good design makes room for everyone.
Your website can be easier to use and still look unmistakably yours. I design and build accessible interactions that fit your brand, your product, and the people using it.
The details people use are design decisions.
A link needs to look like a link. Keyboard focus needs to be easy to find. An error needs to explain what to do next. None of those choices calls for a generic looking website.
Try it with a mouse or your Tab key
Both versions meet the same WCAG criteria, listed under each example. “Bolted on” is how fixes often land after an audit: they pass, but they look like they belong to another site.
Links that belong in the typography
A link can’t rely on color alone, so it needs an underline that is there before anyone hovers. The browser’s default underline is a hairline that runs through letters like p and y. Set its thickness and position, and the underline stays clear of the letters, easy to spot, and part of the typography.
WCAG 2.2 criteria met
- 1.4.1 Use of Color: the underline, not color alone, marks the link
- 1.4.3 Contrast (Minimum): link text 7.7:1 on the paper background
- 2.4.7 Focus Visible: a ring in the link color when tabbed to
Journal
Designing for the whole audience
Small details decide whether a page feels effortless. Read about our approach to accessibility and how we work.
Focus that feels like part of the interface
Keyboard users need to see where they are, but a thick black box on every control isn’t the only way. Press Tab: the ring follows each button’s shape in the brand’s accent color, with a gap so it never blends into the button.
WCAG 2.2 criteria met
- 2.4.7 Focus Visible: every button shows where focus is
- 1.4.11 Non-text Contrast: the focus ring is 4.9:1 against the card
- 2.5.8 Target Size (Minimum): buttons are 44 pixels tall
- 4.1.2 Name, Role, Value: Save is a toggle button that reports when it is pressed
Linen market tote
¥4,800
Errors that help people move forward
An error has to be identified in text and say how to fix it. It doesn’t have to be a red alarm banner. Try submitting: the message sits under the field, focus returns to it, and screen readers read the error with it.
WCAG 2.2 criteria met
- 3.3.1 Error Identification: the error is described in text, not only by a red border
- 3.3.3 Error Suggestion: the message shows the expected format
- 3.3.2 Labels or Instructions: the field has a visible label
- 4.1.3 Status Messages: the confirmation is announced without moving focus
Make these choices repeatable.
I can improve one important journey or work with your team on the shared patterns behind many pages.
For a design system
Define accessible colors, focus styles, form behavior, and component guidance that your team can reuse.
Let’s make your site easier to use and better to look at.
Tell me about the site, the design you want to preserve, and where people are getting stuck.