Skip to content

Instantly share code, notes, and snippets.

@SteveBarnett
Last active January 31, 2020 01:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SteveBarnett/ae4a85dbdcf27d0414c0bda81e314d1a to your computer and use it in GitHub Desktop.
Save SteveBarnett/ae4a85dbdcf27d0414c0bda81e314d1a to your computer and use it in GitHub Desktop.
How to show current step accessibily

The way I think about it: what's the text version of this? It's a list, with the status in brackets after the step name.

<ul>
	<li><img src="blop.svg" alt="Step 1 (complete) - The long bit of text that describes step 1" /></li>
	<li><img src="blop.svg" alt="Step 2 (complete) - The long bit of text that describes step 2" /></li>
	<li><img src="bleep.svg" alt="Step 3 (current) - The long bit of text that describes step 3" /></li>
	<li><img src="blorp.svg" alt="Step 4 - The long bit of text that describes step 4" /></li>
</ul>

Could also use aria-current="step" on the current step.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment