6.3Working with Designers

Visual Specs, Accessibility, and the Design-QA Handoff

Designers create the vision. QA ensures the implementation matches it -- pixel by pixel if necessary, and inclusive by default.

What QA Needs from Design

Deliverable	Why QA Needs It	Common Gaps
Final mockups (Figma, Sketch)	Reference for visual testing	Missing states: error, empty, loading, overflow
Interaction specs	How animations, transitions, and hover states should behave	Timing, easing, mobile touch behaviors undefined
Responsive breakpoints	Which layouts apply at which screen sizes	Intermediate sizes between breakpoints untested
Accessibility annotations	Color contrast, focus order, ARIA roles	Often missing entirely; QA must advocate
Component states	Default, hover, active, disabled, error, loading	Designers sometimes only deliver the default state

Accessibility as a QA-Design Partnership

Accessibility testing is most effective when QA and design collaborate rather than QA auditing design after the fact.

Proactive collaboration:

• Review color palettes with a contrast checker before development starts
• Agree on focus order during the design phase, not after
• Include screen reader annotations in design specs
• Test with assistive technology together -- designer and QA side by side

Reactive auditing (less effective but sometimes necessary):

• Run automated accessibility scans (axe-core, Lighthouse)
• Test keyboard navigation for all interactive elements
• Verify screen reader output matches the intended experience
• File accessibility bugs with screenshots showing the gap between design intent and implementation

Building a Good Design-QA Relationship

• Attend design reviews. Provide feedback early, when changes are cheap.
• Learn design vocabulary. Knowing the difference between padding and margin, or between a modal and a dialog, shows respect for the designer's craft.
• File visual bugs with precision. "The button is 2px lower than the Figma spec on mobile" with a side-by-side comparison is useful. "It looks wrong" is not.
• Celebrate design quality. When the implementation perfectly matches the design, say so publicly. Positive feedback strengthens the relationship.