Design for Accessibility

Why Accessibility Matters

Accessible design isn't just about compliance—it's about creating better experiences for everyone. Over 1 billion people worldwide have disabilities, and accessible design benefits all users, including those with temporary impairments, situational limitations, or aging-related changes. Good accessibility also improves SEO, increases market reach, and demonstrates social responsibility.

Understanding Disabilities

Design for diverse abilities across multiple categories:

WCAG Guidelines

The Web Content Accessibility Guidelines (WCAG) provide international standards for accessibility. WCAG 2.1 organizes requirements into four principles (POUR):

1. Perceivable

Information must be presentable to users in ways they can perceive:

• • Provide text alternatives for non-text content
• • Offer captions and transcripts for audio/video
• • Create content that can be presented in different ways
• • Make it easier to see and hear content

2. Operable

Interface components must be operable by all users:

• • Make all functionality available from keyboard
• • Give users enough time to read and use content
• • Don't design content that causes seizures
• • Help users navigate and find content

3. Understandable

Information and interface operation must be understandable:

• • Make text readable and understandable
• • Make content appear and operate in predictable ways
• • Help users avoid and correct mistakes

4. Robust

Content must be robust enough for various technologies:

• • Maximize compatibility with current and future tools
• • Use valid, semantic HTML
• • Ensure assistive technologies can parse content

Color and Contrast

Contrast Ratios

WCAG requires minimum contrast ratios between text and background:

• Level AA (minimum): 4.5:1 for normal text, 3:1 for large text
• Level AAA (enhanced): 7:1 for normal text, 4.5:1 for large text

Color Blindness Considerations

Never rely on color alone to convey information:

• • Use patterns, textures, or icons in addition to color
• • Add text labels to color-coded elements
• • Test designs with color blindness simulators
• • Avoid problematic color combinations (red/green, blue/yellow)

Tools for Testing Contrast

• • WebAIM Contrast Checker
• • Stark (Figma/Sketch plugin)
• • Chrome DevTools Accessibility Inspector
• • Colour Contrast Analyser (desktop app)

Typography for Accessibility

Font Selection

• • Choose clear, legible typefaces
• • Avoid decorative fonts for body text
• • Ensure sufficient distinction between similar characters (I, l, 1)
• • Use fonts with good letter spacing

Text Size and Spacing

• • Minimum 16px for body text
• • Allow users to resize text up to 200%
• • Line height: 1.5 times font size minimum
• • Paragraph spacing: 2 times font size minimum
• • Letter spacing: 0.12 times font size minimum
• • Word spacing: 0.16 times font size minimum

Text Alignment and Length

• • Left-align text for left-to-right languages
• • Avoid justified text (creates uneven spacing)
• • Limit line length to 80 characters maximum
• • Break long content into shorter paragraphs

Keyboard Navigation

Many users navigate without a mouse. Ensure full keyboard accessibility:

Focus Indicators

• • Provide visible focus indicators for all interactive elements
• • Make focus indicators high contrast (3:1 minimum)
• • Never remove focus outlines without providing alternatives
• • Ensure focus order follows logical reading order

Keyboard Shortcuts

• • Tab: Move forward through interactive elements
• • Shift + Tab: Move backward
• • Enter/Space: Activate buttons and links
• • Arrow keys: Navigate within components (menus, tabs)
• • Escape: Close modals and menus

Skip Links

Provide "skip to main content" links at the top of pages so keyboard users can bypass repetitive navigation.

Images and Alternative Text

Writing Alt Text

• • Describe the content and function of images
• • Keep descriptions concise (150 characters or less)
• • Don't start with "image of" or "picture of"
• • For decorative images, use empty alt text (alt="")
• • For complex images, provide longer descriptions

Examples of Good Alt Text

• Bad: "image123.jpg"
• Good: "Woman presenting design mockups to team in conference room"
• Bad: "Click here"
• Good: "Download 2024 annual report (PDF, 2.5MB)"

Forms and Input Accessibility

Labels and Instructions

• • Provide clear, descriptive labels for all form fields
• • Position labels above or beside inputs (not as placeholders)
• • Include helpful instructions before forms, not just in placeholders
• • Indicate required fields clearly

Error Handling

• • Clearly identify errors and their locations
• • Provide specific, helpful error messages
• • Suggest corrections when possible
• • Allow users to review and correct before final submission
• • Don't rely on color alone to indicate errors

Input Types

• • Use appropriate HTML5 input types (email, tel, date)
• • Provide autocomplete attributes
• • Make clickable areas large enough (44x44px minimum)
• • Group related inputs with fieldsets and legends

Multimedia Accessibility

Video

• • Provide captions for all audio content
• • Include audio descriptions for visual content
• • Offer transcripts as alternative
• • Ensure media players are keyboard accessible
• • Don't autoplay videos with sound

Audio

• • Provide transcripts for podcasts and audio content
• • Include speaker identification in transcripts
• • Describe important non-speech sounds

Mobile Accessibility

Touch Targets

• • Minimum 44x44px for touch targets
• • Provide adequate spacing between interactive elements
• • Make swipe gestures optional, not required

Orientation and Motion

• • Support both portrait and landscape orientations
• • Don't require device motion for functionality
• • Provide alternatives to motion-based interactions
• • Allow users to disable animations

Semantic HTML

Use proper HTML elements for their intended purpose:

• • Use heading tags (h1-h6) in hierarchical order
• • Use button elements for buttons, not divs
• • Use link elements for navigation, not buttons
• • Use lists (ul, ol) for list content
• • Use table elements for tabular data
• • Use semantic HTML5 elements (nav, main, article, aside)

ARIA (Accessible Rich Internet Applications)

ARIA attributes enhance accessibility when semantic HTML isn't sufficient:

Common ARIA Attributes

• aria-label: Provides accessible name for elements
• aria-labelledby: References another element as label
• aria-describedby: References additional description
• aria-hidden: Hides decorative elements from screen readers
• aria-live: Announces dynamic content changes
• role: Defines element's purpose (button, navigation, etc.)

ARIA Best Practices

• • Use semantic HTML first, ARIA second
• • Don't override native semantics unnecessarily
• • Test with actual screen readers
• • Keep ARIA attributes updated with state changes

Testing for Accessibility

Automated Testing Tools

• • axe DevTools (browser extension)
• • WAVE (Web Accessibility Evaluation Tool)
• • Lighthouse (Chrome DevTools)
• • Pa11y (command-line tool)

Manual Testing

• • Navigate entire site using only keyboard
• • Test with screen readers (NVDA, JAWS, VoiceOver)
• • Zoom text to 200% and verify layout
• • Test with color blindness simulators
• • Verify with users who have disabilities

Screen Readers to Test With

• • NVDA (Windows, free)
• • JAWS (Windows, paid)
• • VoiceOver (macOS/iOS, built-in)
• • TalkBack (Android, built-in)

Common Accessibility Mistakes

1. Low Contrast Text

Light gray text on white backgrounds fails contrast requirements. Always test contrast ratios.

2. Missing Alt Text

Images without alt text are invisible to screen reader users. Every image needs appropriate alt text.

3. Keyboard Traps

Users get stuck in modals or components they can't exit with keyboard. Always provide escape routes.

4. Placeholder-Only Labels

Using placeholders instead of labels makes forms inaccessible. Always use proper label elements.

5. Automatic Carousels

Auto-rotating carousels are difficult for many users. Provide pause controls and keyboard navigation.

6. Icon-Only Buttons

Buttons with only icons lack accessible names. Add aria-labels or visible text.

Accessibility Checklist

Use this checklist to verify accessibility:

• ☐ All images have appropriate alt text
• ☐ Color contrast meets WCAG AA standards (4.5:1)
• ☐ All functionality works with keyboard only
• ☐ Focus indicators are visible and clear
• ☐ Headings are in logical order (h1, h2, h3)
• ☐ Forms have proper labels and error messages
• ☐ Videos have captions and transcripts
• ☐ Text can be resized to 200% without breaking
• ☐ Content is organized with semantic HTML
• ☐ ARIA attributes are used correctly
• ☐ Site works with screen readers
• ☐ No keyboard traps exist
• ☐ Touch targets are at least 44x44px
• ☐ Animations can be paused or disabled
• ☐ Content doesn't rely on color alone

Conclusion

Accessible design creates better experiences for everyone, not just users with disabilities. By following WCAG guidelines, testing thoroughly, and prioritizing inclusive design from the start, you create products that reach wider audiences and demonstrate social responsibility. Remember that accessibility is an ongoing commitment—continuously test, gather feedback, and improve your designs to ensure they work for all users.