html - 如何使网页上的结帐进度条可访问？

Question

结帐进度条的意思是这样的:

我正在尝试使此类 Web UI 组件易于访问，尤其是对于屏幕阅读器(如 JAWS)用户。我在谷歌上搜索了几个小时，想找到一些专为此类用例设计的 aria 属性，但没有找到。

我能想到的一个不太优雅的解决方案是，每当这个进度条发生变化 - 前进或后退时，使用 javascript 以类似“你已完成:abc，你现在位于: d，你还有:efg 去”。我想知道是否有更好的方法。

Answer 1

可以使用 bootstrap 3 和内联列表轻松设置水平时间线，如下所示:

<ul class="list-inline">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

结果(带有样式)如下所示:

参见代码笔: http://codepen.io/richfergus/pen/pNvRWd?editors=1100#0