title: how to make a checkout progress bar on a web page accessible?
body: <p>By a checkout progress bar, I mean something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/6HiKD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6HiKD.png" alt="a checkout progress bar example"></a></p>
  
  <p>I am trying to make such web ui component accessible, especially for screen reader(like JAWS) users. I have been googling for hours to find some aria attributes that are designed for such use case, but didn't find any.</p>
  
  <p>A not so elegant solution that I can think about is that, whenever this progress bar changes -- advance or going back, use javascript to generate an alert message in a format like "you completed:abc, you are now at:d, you still have:efg to go". I wonder if there is a better way of doing this.</p>