Training Designers on Accessibility

Designers make decisions that determine accessibility before a single line of code is written. Color choices, typography, layout, interaction patterns, motion, and information hierarchy all affect whether people with disabilities can use the product. Training designers on accessibility equips them to make these decisions well, reducing the need for costly retrofitting downstream.

Core Curriculum for Designers

Color and Contrast

• WCAG 2.2 contrast ratios: 4.5:1 for normal text, 3:1 for large text (18pt or 14pt bold), 3:1 for UI components and graphical objects.
• Never convey information through color alone. Use icons, patterns, or text labels as secondary indicators.
• Test designs in grayscale to verify that information is still discernible.
• Use tools like the Colour Contrast Analyser (TPGi) or the Stark plugin for Figma.
• Consider forced colors mode (Windows High Contrast) and test designs with it enabled.

Typography and Readability

• Minimum font size of 16px for body text on web.
• Sufficient line height (at least 1.5x font size for body text, per WCAG 1.4.12 Text Spacing).
• Adequate letter and word spacing.
• Left-aligned text for languages read left-to-right (justified text creates uneven spacing that impedes reading for people with dyslexia).
• Support for text resizing to 200% without loss of content or functionality.

Interaction Design

• Every interactive element must be operable with keyboard. Designers should specify the keyboard interaction pattern.
• Focus indicators must be visible and meet contrast requirements (WCAG 2.4.11 Focus Appearance in WCAG 2.2).
• Touch targets must be at least 24x24 CSS pixels (WCAG 2.5.8 Target Size in WCAG 2.2).
• Avoid interactions that rely solely on hover, dragging, or complex gestures without alternatives.
• Provide visible text labels for interactive elements, not just icons.

Information Architecture

• Heading hierarchy communicates page structure to screen reader users. Design heading levels intentionally.
• Reading order and visual order should match. Screen readers follow DOM order, not visual position.
• Group related content using visual proximity and programmatic structure (landmarks, sections).

Motion and Animation

• Provide a mechanism to pause, stop, or hide moving content (WCAG 2.2.2).
• Respect the prefers-reduced-motion system setting.
• Avoid flashing content that could trigger seizures (WCAG 2.3.1 Three Flashes or Below Threshold).

Design Annotations

Designers should annotate mockups with accessibility information for developers:

• Heading levels
• Focus order for interactive elements
• Alternative text for images
• ARIA labels for elements without visible text labels
• Error message behavior and location

Training Formats

Workshops

Half-day workshops combining WCAG principles with hands-on exercises. Ask designers to evaluate existing designs against WCAG criteria and redesign a problematic interface to meet accessibility requirements.

Design Critiques

Include accessibility as a standing criterion in design critiques. Over time, designers internalize the questions: Is this contrast sufficient? How will a keyboard user navigate this? What happens at 200% zoom?

Paired Reviews

Pair a designer with an accessibility specialist for design reviews. The specialist demonstrates how a screen reader user or keyboard user would experience the design, and they identify barriers together.

Resource Libraries

Maintain a curated set of accessibility design resources: annotated examples, pattern libraries, WCAG quick-reference cards, and links to the W3C design guide for WCAG. See accessibility documentation best practices.

Connecting to the Broader Process

Training is one piece of the puzzle. Designers also need:

• An accessible design system with pre-validated components.
• Integration of accessibility into design reviews and design sprints.
• Exposure to inclusive research methods and user testing with disabled users.
• Understanding of the full inclusive design process so they see how their work connects to development, testing, and monitoring.

Measuring Effectiveness

• Track accessibility issues found during design review that should have been caught in design.
• Compare the types of accessibility defects found in audits before and after designer training.
• Survey designers on their confidence in applying accessibility principles.
• Monitor the quality and completeness of design annotations over time.

Key Takeaways

• Designers control color, typography, interaction, hierarchy, and motion, all of which directly affect accessibility.
• Core topics: contrast ratios, typography, keyboard interaction, touch targets, focus indicators, and design annotations.
• Use workshops, design critiques, paired reviews, and resource libraries as training formats.
• Connect training to the accessible design system, design reviews, and the broader inclusive design process.
• Measure effectiveness through design review findings and audit trend analysis.