# Accessibility Guidelines for Design Briefs Comprehensive accessibility requirements and best practices for design projects. --- ## Why Accessibility Matters **Legal:** ADA, Section 508, AODA compliance **Business:** 15% of the world has a disability - that's your potential users **Ethical:** Everyone deserves equal access to digital experiences **Technical:** Accessible design is better design for everyone --- ## WCAG 2.1 Overview ### Compliance Levels **Level A (Minimum):** - Basic web accessibility features - Legal requirement in many jurisdictions - Addresses most critical barriers **Level AA (Recommended):** - Addresses most common barriers - Gold standard for most organizations - Required by many laws (EU, Canada, US Section 508) **Level AAA (Enhanced):** - Highest level of accessibility - Not required for general compliance - Often not feasible for all content **Recommendation:** Target WCAG 2.1 Level AA for most projects. --- ## Four Principles (POUR) ### 1. Perceivable Information and UI components must be presentable to users in ways they can perceive. ### 2. Operable UI components and navigation must be operable by all users. ### 3. Understandable Information and UI operation must be understandable. ### 4. Robust Content must be robust enough to work with current and future technologies. --- ## Key Requirements by Category ### Visual Design #### Color & Contrast **Requirement:** Minimum contrast ratios - **Normal text:** 4.5:1 (Level AA) or 7:1 (Level AAA) - **Large text (18pt+):** 3:1 (Level AA) or 4.5:1 (Level AAA) - **UI components:** 3:1 for active elements **Best Practices:** - Don't rely on color alone to convey information - Use patterns, icons, or labels in addition to color - Test in grayscale to verify information hierarchy - Consider color blindness (8% of males, 0.5% of females) **Tools:** - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - [Contrast Ratio](https://contrast-ratio.com/) - Figma plugins: Stark, A11y - Color Contrast Checker #### Typography **Requirements:** - Text must be resizable up to 200% without loss of content - Line height at least 1.5x font size - Paragraph spacing at least 2x font size - Letter spacing at least 0.12x font size - Word spacing at least 0.16x font size **Best Practices:** - Minimum body text size: 16px - Use relative units (rem, em) not absolute (px) - Avoid ALL CAPS for long text - Left-align text (not justified) - Break long content into shorter paragraphs - Use clear, simple language #### Focus Indicators **Requirement:** Keyboard focus must be visible **Best Practices:** - Focus indicator contrast ratio: 3:1 minimum - Don't remove default focus styles without replacement - Use outline or border (not just background color change) - Maintain focus order that follows visual layout - Show focus on all interactive elements --- ### Interaction Design #### Keyboard Navigation **Requirements:** - All functionality available via keyboard - No keyboard traps - Logical tab order - Skip links for repetitive content **Tab Order:** 1. Header navigation 2. Main content 3. Sidebar (if present) 4. Footer **Keyboard Shortcuts:** - `Tab` - Move forward through interactive elements - `Shift + Tab` - Move backward - `Enter` - Activate buttons/links - `Space` - Activate buttons, toggle checkboxes - `Arrow keys` - Navigate within components (menus, radio groups) - `Esc` - Close modals/menus **Best Practices:** - Add "Skip to main content" link - Ensure modals trap focus appropriately - Return focus when closing overlays - Document custom keyboard shortcuts #### Touch Targets **Requirements:** - Minimum touch target size: 44×44px (Level AA) - Adequate spacing between targets **Best Practices:** - 48×48px or larger for important actions - At least 8px spacing between touch targets - Enlarge hit areas beyond visible element - Consider thumb reach zones on mobile #### Time Limits **Requirements:** - Users can extend, adjust, or turn off time limits - 20-hour minimum for inactive sessions - Warning before timeout **Best Practices:** - Avoid auto-advancing carousels - Pause auto-playing media - Save user progress - Warn 60+ seconds before timeout #### Motion & Animation **Requirements:** - Respect `prefers-reduced-motion` setting - No flashing content (> 3 flashes/second) - Provide pause controls for moving content **Best Practices:** ```css @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ``` --- ### Content & Information #### Alternative Text **Requirements:** - All images have alt text - Decorative images have empty alt (`alt=""`) - Complex images have detailed descriptions **Alt Text Guidelines:** - Describe content and function, not appearance - Keep under 150 characters - Don't start with "Image of" or "Picture of" - For decorative images: `alt=""` - For complex diagrams: Use `aria-describedby` or long description **Examples:** - ❌ "Image of a dog" - ✅ "Golden retriever playing fetch in a park" - ❌ "Click here button" - ✅ "Submit registration form" #### Headings **Requirements:** - Logical heading structure (H1 → H2 → H3) - Don't skip heading levels - H1 used once per page **Best Practices:** ```html

Page Title

Section 1

Subsection

Section 2

Subsection

``` #### Links **Requirements:** - Link text describes destination - Links distinguishable from surrounding text **Best Practices:** - ❌ "Click here" or "Read more" - ✅ "Read the design brief guidelines" - ❌ URL as link text (https://example.com) - ✅ Descriptive text with URL in title - Indicate when links open in new windows - Underline links in body text #### Forms **Requirements:** - Labels for all inputs - Error messages clearly identify problems - Instructions provided where needed - Group related form elements **Best Practices:** ```html We'll never share your email ``` - Place labels above or beside inputs (not inside) - Use `
` and `` for groups - Provide inline validation - Clear error messages with solutions - Disable submit until required fields complete #### Tables **Requirements:** - Use table headers (``) - Associate headers with data cells - Provide table caption or summary **Best Practices:** ```html
Project Timeline
Phase Duration
Discovery 2 weeks
``` --- ### Component-Specific Guidelines #### Modals & Dialogs - Focus first element when opened - Trap focus within modal - Close with Esc key - Return focus when closed - Use `role="dialog"` and `aria-modal="true"` - Provide accessible close button #### Carousels - Pause on hover/focus - Keyboard controls to navigate - Don't auto-advance (or make stoppable) - Indicate current slide - All controls keyboard accessible #### Navigation - Skip to main content link - Keyboard accessible dropdowns - Clear current page indicator - Breadcrumb trail when appropriate - Mobile menu keyboard accessible #### Forms with Multiple Steps - Indicate current step and total steps - Allow navigation between steps - Save progress - Review before submit - Accessible progress indicator #### Search - Label search input clearly - Announce results to screen readers - Show result count - Support keyboard navigation of results --- ## Screen Reader Considerations ### ARIA (Accessible Rich Internet Applications) **Core Principles:** 1. **Use semantic HTML first** - ARIA should enhance, not replace 2. **Don't override native semantics** 3. **All interactive elements must be keyboard accessible** 4. **Don't use ARIA to make elements focusable** **Common ARIA Attributes:** ```html