Test: this is in a11y-only

Accessible link demos

These demos accompany Revisiting Accessible Links.

Color contrast and affordance

Use WebAIM's Color Contrast Checker to test values. Links must have a contrast ratio of 3:1 or greater with surrounding text.

Poor contrast

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Good contrast

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Focus state

When the default outline style doesn't work, use border and/or box-shadow — but keep the global outline property in place to ensure a working default focus state.

Default outline focus

Border & box-shadow focus

Formatted text for screen readers

Punctuation ensures that phrases are read with pauses in between, otherwise inline text may be read as a single run-on sentence.

No punctuation

Winter is coming Shop holiday gifts

With punctuation

Winter is coming. Shop holiday gifts

Linked block-level elements

In NVDA (a Windows screen reader), the first block below is read as 3 separate links ("Introducing...", "This new feature...", and "Learn more"). Swap out the block-level elements for display: block properties assigned to inline elements, and NVDA will read the text as a single link.

Problematic markup

Introducing a new feature

This new feature will change your life and make everything wonderful.

Learn more

Fixed with inline elements + CSS

Introducing a new feature This new feature will change your life and make everything wonderful.  Learn more