Gabriel Martin / Case studies
№ 02 / Component & Craft / 2017

Putnam Investments

Accessibility Engineer · Component refactoring for WCAG AA compliance

Sector
Financial Services
Standard
WCAG AA
Scope
Combobox · Menus · Dialogs · Page flow
The fundamental
Build the consistency keyboard users need, first.
Working principle

This was a full accessibility refactor for Putnam Investments. Dozens of interactive components (comboboxes, menus, dialogs, disclosure widgets) needed to be rebuilt from the ground up to meet WCAG AA. I worked directly from WCAG keyboard interaction patterns to build each component.

The work taught me to think like a screen reader user: keyboard first. Navigation happens with arrow keys, Enter, Escape, and Tab. I implemented keyboard behavior before adding ARIA roles to communicate state. Every component was validated in JAWS, NVDA, and VoiceOver before shipping.

The anatomy

Building a combobox from WCAG keyboard patterns.

The WCAG keyboard interaction documentation made the patterns clear: arrow keys navigate options, Enter selects, Escape closes and returns focus. This spec shows how I translated that into a working component.

Fig. 01 · Combobox — roles, state, keyboard
Select a fund <label id="lbl-1"> visible UI label Equity Income role="combobox" tabindex="0" aria-labelledby="lbl-1" aria-haspopup="listbox" aria-expanded="true" aria-controls="lb-1" aria-activedescendant="opt-2" Growth Fund Equity Income Global Bond Small Cap Value Dividend Income International Equity role="listbox" id="lb-1" tabindex="-1" role="option" id="opt-2" aria-selected="true" role="option" aria-disabled="true" Note: aria-activedescendant tracks visual focus (which option has the highlight). aria-selected="true" tracks the committed value. They diverge when arrowing through options. COLLAPSED ↓ open, move to selected or first ↑ open, move to selected or last Enter / Space / Alt + ↓ open without moving focus A–Z open and type-ahead EXPANDED ↓ next option ↑ previous option Home first option End last option Enter / Space select, close Esc close Alt + ↑ close Tab select, close, move to next A–Z type-ahead

Component spec derived from WCAG keyboard interaction patterns and validated against JAWS, NVDA, and VoiceOver before ship. One of dozens in the Putnam refactor set.

The work

Building from WCAG patterns, validating with real users.

  1. Started with WCAG keyboard interaction documentation for each component type. Implemented arrow key navigation, Enter/Escape behavior, and focus management exactly as the patterns specified. Added ARIA roles to communicate state to screen readers after the keyboard behavior was correct.
  2. Treated page structure as a navigation system. Landmark regions, heading hierarchy, and tab order had to work together. A user's mental map depends on all three being consistent. Fix one in isolation and the others break.
  3. Made focus management part of the component design. Dialogs return focus to the trigger on close. Composite widgets use roving tabindex. Modal focus traps are intentional and escapable. Tested every pattern by navigating without a mouse before adding screen reader validation.
  4. Tested every component in JAWS, NVDA, and VoiceOver before shipping. If the keyboard interaction was predictable, screen readers announced it correctly. If keyboard behavior was wrong, no amount of ARIA could fix it.
Outcome
Dozens Components rebuilt from WCAG keyboard patterns
3 Screen readers validated (JAWS, NVDA, VoiceOver)
WCAG AA Component-level compliance validated in assistive tech