Small techniques, tested

Accessibility Recipes

Techniques you can copy today. Every recipe comes with a live demo you can try to break, the code, and an honest list of where it stops working.

How every recipe is written

  1. The problem

    One specific barrier, in plain words.

  2. The technique

    The smallest change that removes it.

  3. A demo to break

    Try it yourself before you trust it.

  4. The code

    Ready to copy, with every line explained.

  5. Where it fails

    The cases it does not cover, with their fixes.

On the menu

  • No. 01

    The Two-Tone Focus Ring

    One focus style that keeps 3:1 contrast on any solid background.

    Serves
    Any solid background
    Prep
    Two CSS declarations
    WCAG
    1.4.11, 2.4.7, 2.4.13