Creating Accessible Designs: A Complete Guide

Why Accessibility Matters

Accessible design isn't just about compliance—it's about creating experiences that work for everyone, regardless of their abilities. With over 1 billion people worldwide living with disabilities, accessible design is both a moral imperative and a business opportunity.

The Business Case

• Expanded market reach to 15% of the global population
• Improved SEO and search rankings
• Better usability for all users
• Legal compliance and risk mitigation
• Enhanced brand reputation

Understanding WCAG Standards

The Web Content Accessibility Guidelines (WCAG) provide a framework for accessible design:

WCAG 2.1 Levels

Level A (Minimum): Basic accessibility features that must be present

Level AA (Mid-range): Addresses major barriers, recommended for most websites

Level AAA (Highest): Highest level of accessibility, not always achievable for all content

Four Core Principles (POUR)

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

• Provide text alternatives for images
• Offer captions for audio/video
• Create adaptable content layouts
• Use sufficient color contrast

Operable: Interface components must be operable by all users

• Make all functionality keyboard accessible
• Give users enough time to read content
• Avoid content that causes seizures
• Provide navigation aids

Understandable: Information and operation must be understandable

• Use readable, predictable text
• Make pages appear and operate predictably
• Help users avoid and correct mistakes

Robust: Content must work with current and future technologies

• Maximize compatibility with assistive technologies
• Use valid, semantic HTML
• Provide proper ARIA labels

Color and Contrast

Contrast Ratios

WCAG AA Requirements:

• Normal text: 4.5:1 minimum
• Large text (18pt+): 3:1 minimum
• UI components: 3:1 minimum

WCAG AAA Requirements:

• Normal text: 7:1 minimum
• Large text: 4.5:1 minimum

Color Blindness Considerations

8% of men and 0.5% of women have some form of color blindness:

• Never rely on color alone to convey information
• Use patterns, textures, or labels in addition to color
• Test designs with color blindness simulators
• Avoid problematic color combinations (red/green, blue/yellow)

Typography for Accessibility

Font Selection

• Use clear, legible fonts (avoid decorative fonts for body text)
• Minimum font size: 16px for body text
• Avoid all-caps text (harder to read)
• Use proper heading hierarchy (H1, H2, H3)

Line Spacing and Length

• Line height: 1.5x font size minimum
• Paragraph spacing: 2x font size minimum
• Line length: 50-75 characters optimal
• Left-align text (avoid justified text)

Keyboard Navigation

Essential Requirements

• All interactive elements must be keyboard accessible
• Visible focus indicators on all focusable elements
• Logical tab order following visual flow
• Skip navigation links for long pages
• Keyboard shortcuts documented and customizable

Focus Management

• Focus should be visible and obvious (3:1 contrast minimum)
• Focus should move logically through the page
• Modal dialogs should trap focus
• Focus should return to trigger element when closing modals

Screen Reader Optimization

Semantic HTML

• Use proper heading structure (H1-H6)
• Use semantic elements (nav, main, article, aside)
• Use lists (ul, ol) for list content
• Use tables only for tabular data
• Use buttons for actions, links for navigation

ARIA Labels and Roles

• Use ARIA labels for icon buttons
• Provide aria-describedby for complex interactions
• Use role attributes when semantic HTML isn't sufficient
• Keep ARIA simple—prefer semantic HTML

Alt Text Best Practices

• Describe the content and function of images
• Keep alt text concise (under 125 characters)
• Don't start with "image of" or "picture of"
• Use empty alt="" for decorative images
• Provide long descriptions for complex images

Form Accessibility

Labels and Instructions

• Every input must have a visible label
• Use label elements properly associated with inputs
• Provide clear instructions before forms
• Indicate required fields clearly
• Group related fields with fieldset/legend

Error Handling

• Identify errors clearly and specifically
• Provide suggestions for fixing errors
• Use both color and text/icons to indicate errors
• Move focus to first error on submission
• Allow users to review and correct before final submission

Testing for Accessibility

Automated Testing Tools

• WAVE (Web Accessibility Evaluation Tool)
• axe DevTools browser extension
• Lighthouse in Chrome DevTools
• Pa11y automated testing

Manual Testing

• Keyboard-only navigation testing
• Screen reader testing (NVDA, JAWS, VoiceOver)
• Color contrast checking
• Zoom testing (up to 200%)
• Mobile accessibility testing

User Testing

• Include users with disabilities in testing
• Test with various assistive technologies
• Gather feedback on real-world usage
• Iterate based on user feedback

Common Accessibility Mistakes

• Using placeholder text as labels
• Insufficient color contrast
• Missing alt text on images
• Non-descriptive link text ("click here")
• Keyboard traps in modals or menus
• Auto-playing audio or video
• Time limits without extensions
• Inaccessible custom controls
• Missing skip navigation links
• Poor heading structure

Accessibility Checklist

Visual Design

• ☐ Color contrast meets WCAG AA standards
• ☐ Text is resizable up to 200%
• ☐ Content doesn't rely on color alone
• ☐ Focus indicators are visible

Content

• ☐ All images have appropriate alt text
• ☐ Headings are properly structured
• ☐ Link text is descriptive
• ☐ Language is clear and simple

Interaction

• ☐ All functionality is keyboard accessible
• ☐ Forms have proper labels
• ☐ Error messages are clear
• ☐ No keyboard traps exist

Technical

• ☐ HTML is valid and semantic
• ☐ ARIA is used appropriately
• ☐ Page has proper title
• ☐ Skip navigation link is present