Skip to main content

Accessible CSS — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Accessible CSS lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Keep focus visible

    easy10 min

    Give #link a 2px solid navy outline instead of removing it.

  2. 2

    Offset the focus ring

    easy10 min

    Push #link's outline 3px away from the element.

  3. 3

    Give a large enough target

    easy10 min

    Make #link at least 44px tall and show it as a block.

  4. 4

    Do not rely on colour alone

    easy10 min

    Keep #link underlined and make it bold, so it reads as a link without colour.

  5. 5

    Use a readable contrast pair

    medium10 min

    #1a1a1a text on #ffffff.

Find the bug(5)

  1. 1

    Fix the removed focus ring

    easy8 min

    Removing the outline leaves keyboard users lost.

  2. 2

    Fix the offset that does nothing

    easy8 min

    An offset needs an outline to push away.

  3. 3

    Fix the tiny tap target

    easy8 min

    44px is the smallest comfortable touch target.

  4. 4

    Fix the colour-only link

    easy8 min

    A link needs a cue beyond its colour.

  5. 5

    Fix the low contrast

    easy8 min

    Light grey on white is unreadable.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace