Discuss your project
Go back

Accessible Design Checklist: Must-Haves Before Launching a Website

web accessibility checklist for designers

Creating an accessible website isn’t just about compliance—it’s about ensuring that all users, regardless of ability, can navigate and interact with your site effectively. An accessible website improves user experience, broadens your audience, and helps with SEO and legal compliance. Before launching your website, this web accessibility checklist for designers will guide you through essential steps to align your site with WCAG standards before launch.

1. Text & Typography

Readable Fonts & Sizes

  • Use legible fonts such as Arial, Roboto, or Open Sans.
  • Maintain a font size of at least 16px for body text.
  • Ensure sufficient line spacing (1.5x for paragraphs, 2x for headings).

Sufficient Color Contrast

  • Text must have a contrast ratio of at least 4.5:1 against the background.
  • Large text (18pt and above) should have a minimum contrast ratio of 3:1.
  • Use online tools like WebAIM’s Contrast Checker to test color contrast.

Struggling to get the right contrast? Check out these techniques and tools for ensuring adequate color contrast to make your design more readable and accessible.

Avoid Text in Images

  • Text should be live (not embedded in images) for screen readers to detect it.
  • If using text in images, provide a descriptive alt text.

2. Navigation & Structure

Logical & Consistent Navigation

  • Use clear, descriptive labels for menus and links.
  • Maintain a consistent layout across all pages.
  • Ensure keyboard navigability with logical tab order.
  • Provide a “Skip to Main Content” link for screen readers and keyboard users.
  • Ensure this link is visible when focused.

Breadcrumbs & Landmarks

  • Use ARIA landmarks and HTML5 elements (e.g., <header>, <nav>, <main>, <footer>).
  • Implement breadcrumb navigation for user orientation.

3. Forms & Input Fields

Clear Labels & Instructions

  • Every form field should have a label.
  • Avoid placeholder-only instructions as they disappear when typing.
  • Use ARIA attributes like aria-label or aria-labelledby where needed.

Error Handling & Validation

  • Provide clear, descriptive error messages.
  • Use inline validation with suggestions for correction.
  • Ensure error messages are perceivable to screen readers.

Keyboard Accessible Forms

  • Users should be able to navigate and submit forms using only a keyboard.
  • Use the tabindex attribute strategically to control focus order.

4. Images & Media

Alt Text for Images

  • All meaningful images should have descriptive alt text.
  • Decorative images should have empty alt attributes (alt=””).

Captions & Transcripts for Multimedia

  • Videos should have captions.
  • Provide transcripts for audio content.
  • Ensure auto-playing media can be paused or stopped.

Accessible Image Sliders & Carousels

  • Provide controls for pausing and navigating slides.
  • Ensure content is accessible via keyboard and screen readers.

5. Interactive Elements & Focus Management

Keyboard Accessible Interactive Elements

  • Ensure buttons, dropdowns, and modal dialogs can be accessed using Tab and Enter keys.
  • Use :focus styles to highlight focused elements.

ARIA Roles & Attributes

  • Use ARIA roles (role=”button”, role=”alert”) to enhance accessibility.
  • Avoid overuse of ARIA, as native HTML elements are preferred where possible.

Check out these best practices for using ARIA roles to enhance accessibility.

Avoid Auto-Updating Content

  • Flashing, blinking, or auto-scrolling elements should have a way to pause or stop them.
  • Use aria-live=”polite” for dynamically updating content.

6. Responsive & Mobile Accessibility

Touch-Friendly Elements

  • Buttons and links should be large enough for touch interaction (at least 44x44px).
  • Avoid hover-dependent interactions on mobile.

Resizable Text Without Breaking Layout

  • Allow users to zoom text up to 200% without loss of content or functionality.
  • Use relative units like em or rem instead of fixed px values.

Device Orientation Adaptability

  • Ensure content is accessible in both portrait and landscape modes.
  • Avoid fixed layouts that break when rotated.

7. Testing & Compliance Checks

Automated Accessibility Testing

Manual Testing with Screen Readers

  • Test with NVDA, JAWS, or VoiceOver to ensure compatibility.

Keyboard-Only Navigation Test

  • Navigate your site without a mouse to confirm usability.

User Testing with People with Disabilities

  • Conduct usability tests with real users who rely on assistive technologies.

Final Thoughts

Ensuring accessibility before launch enhances the experience for all users, improves compliance with WCAG and ADA guidelines, and positions your brand as inclusive and user-friendly. By implementing this checklist, you create a website that is not just visually appealing but also functionally inclusive for everyone.