WebAIM - Web Accessibility In Mind

E-mail List Archives

Best mark-up for process navigation

for

From: Detlev Fischer
Date: Jun 4, 2020 10:37AM

I'm trying to identify best practices accessibility-wise for process
navigation (sequence of steps).
I assume you want a list (ul) inside a nav element with some meaningful
name, like "process navigation".
Inside the ul you then have a number of steps (li elements); as you make
progress in the process, the past steps may become links if it is
possible to return to prior steps to change entries.
Then you have your current step which you want to mark up as
aria-current="step" (and presumably this step should be  link and not
static text, but I can't find confirmation for this in the ARIA spec or
authoring practices)
Then you have the future steps which may be marked up as li with strong
inside (instead of a with href).
Would it make sense to mark up future steps as a elements without href
so they cannot be tabbed to? (You would make sure via CSS they are not
shown as active or underlined)
Do you know of convincing implementations of process navigation that
cover the treatment of future steps?

Best, Detlev