// 14 guides · the why behind the patterns

Accessibility Guides

Practical walkthroughs of WCAG criteria, testing methods, and accessibility concepts. Written for developers who want to understand the reasoning, not just follow a checklist.

html · aria testing · design

  • Pa11y CI Setup: Automated Accessibility Testing in Your Pipeline

    Step-by-step Pa11y CI setup for automated accessibility testing: install, config file, sitemap scanning, GitHub Actions, thresholds, and Pa11y Dashboard.

    • beginner
    • testing

  • Form Labeling: Deep Dive

    A complete guide to form labeling: native <label>, fieldset and legend, ARIA labeling attributes, hidden labels, placeholder pitfalls, and required/error indicators.

    • beginner
    • html

  • Headings & Landmarks: Page Structure

    Master heading hierarchy and HTML5 landmarks. How screen reader users navigate by structure, the rules that keep your page scannable, and the markup that makes content discoverable.

    • beginner
    • html

  • Alt Text & Accessible Images

    How to write alt text for informative, decorative, and functional images. Covers SVGs, icons, emojis, complex charts, images of text, and generative AI caveats.

    • beginner
    • html

  • Live Regions: Deep Dive

    How ARIA live regions announce dynamic changes to screen readers. Covers polite vs assertive, role=alert vs role=status, screen reader quirks, and debugging checklist.

    • intermediate
    • aria

  • Automated Accessibility Testing: Tools, CI/CD, and What to Test

    Tools and strategies for automated a11y testing. axe-core, Pa11y, Lighthouse, CI/CD integration, and what automated tests can and can't catch.

    • beginner
    • testing

  • Focus Management Patterns for Accessible Web Apps

    How to manage keyboard focus in web applications. Covers focus trapping, restoration, roving tabindex, programmatic focus, and focus indicators.

    • intermediate
    • interactive

  • Accessibility for Single Page Applications (SPAs)

    SPA-specific accessibility challenges: route change announcements, focus management on navigation, dynamic content updates, and framework-specific solutions.

    • intermediate
    • interactive

  • WCAG 3.0: What Developers Need to Know

    An overview of the next generation of accessibility guidelines. Bronze/Silver/Gold conformance, APCA contrast, cognitive accessibility, and how to prepare.

    • intermediate
    • reference

  • ARIA: When to Use It, When to Avoid It, and How to Get It Right

    A decision framework for ARIA usage. The five rules of ARIA, common mistakes, and how to know when native HTML is enough and when ARIA is the right choice.

    • intermediate
    • reference

  • Color and Contrast: Beyond the Ratio

    Contrast requirements for text and non-text elements, tools for checking ratios, dark mode considerations, and solving color-only information problems.

    • beginner
    • visual-design

  • Keyboard Accessibility Testing: A Developer's Walkthrough

    How to test your site with keyboard only. Covers the essential keys, common failure patterns, focus order debugging, and step-by-step testing procedure.

    • beginner
    • testing

  • Screen Reader Testing for Developers: Getting Started

    An introduction to testing with NVDA, JAWS, and VoiceOver. Setup, essential commands, what to listen for, and a systematic testing workflow.

    • intermediate
    • testing

  • Semantic HTML: Choosing the Right Elements

    Which HTML elements to use when, how landmarks and heading hierarchy create navigable page structure, and why semantic HTML is the foundation of accessibility.

    • beginner
    • html

  • Getting Started with WCAG 2.2: What Developers Need to Know

    What developers need to know about the Web Content Accessibility Guidelines. Covers the 4 principles, 3 conformance levels, and all 9 new success criteria in plain language.

    • beginner
    • reference