This test page looks at how we can use semantic HTML and ARIA to create a visual presentation of the user's progress through a multi-process task. This is a linear progression and one step must be completed before the next can be started.
This is essentially an ordered list within a nav tag, as it defines a hierarchy of items. For simplicity, I've added classes to represent completed and current steps.
This is starting to look like a progress bar. It carries the structure, so the screen reader user would know there are 5 items in the list. They should also know the item number they are focused on. They do not know if the step has been completed or is disabled.
Firefox is the only browser that passes the nav tag to the accessibilty API, so let's add role="navigation" for full landmark support. Also, make it clear what this particular navigation controls by adding an aria-label. The aria-expanded attribute lets the user know the content referenced by this button has been expanded and is available on the page.
There's no ARIA state that tells the user a step has been completed. There's also no attribute the lets the user know they are on the current step. this can be solved with some hidden text.
See a similar test with a non-interactive progress bar: ARIA Progress Bar test.