如何在HTML5中标记复杂的状态指示器？

Question

我目前正在尝试提供一种良好且易于访问的方式来格式化状态指示器，该指示器应该在网站上的一组类似向导的页面中呈现。该网站应提供一个多页表格，其上方有一个状态指示器，如下面的线框所示：

鉴于HTML中的新progress - 标记，我首先想到的是这样做：

<progress value="2" max="3">
    <ul>
        <li>Beginning</li>
        <li class="now">Right now</li>
        <li>End</li>
    </ul>
</progress>

...但是因为＆lt; progress＆gt;只接受使用列表的短语内容并不是一个真正的选择。所以现在我可能会用这样的东西，整合ARIA progressbar - 角色：

<ul aria-role="progressbar" aria-valuenow="2" aria-valuemin="1" aria-valuemax="3" aria-describedby="state2" aria-valuetext="Right now">
    <li id="state1">Beginning</li>
    <li id="state2" class="now">Right now</li>
    <li id="state3">End</li>
</ul>

但同样，我不确定进度条角色是否可以以这种方式应用于列表。

另一个问题是，＆lt; progress＆gt;例如，在Opera中呈现为进度条，因此＆gt; progress＆gt;本身可能并不是一个真正可行的解决方案： - （

任何人都可以推荐一个可访问的状态栏，不只依赖于使用单个图像吗？

当前解决方案

现在我将使用以下标记：

<section class="progress">
    <h1 class="supportive">Your current progress</h1>
    <ol>
        <li><span class="supportive">Completed step:</span> Login</li>
        <li class="now"><span class="supportive">Current step:</span> Right now</li>
        <li><span class="supportive">Future step:</span> End</li>
    </ol>
</section>

班级“支持”的所有元素都将在屏幕外定位。 IMO就这样我们应该对语义标记有一个很好的妥协（状态继承在我看来真的是一个有序的列表;-)）和可访问性，这要归功于每个步骤的额外标题和状态文本。

Answer 1

根据whatwg，您不应该将progressbar个角色分配给<ul>元素。

我只是放弃<ul>并使用（惊讶）措辞内容描述进度：

<section role="status">
    <h2>Task Progress</h2>
    <p>You're now at <progress value=2 max=3>"Right now" step</progress>.
</section>

更新：你是对的，progress不适合这里，它更像是一个交互式表单小部件。在你从第一个例子中拿出它之前，我应该先检查一下。但无论如何，关键是当你只能用纯文本描述正在发生的事情时，就不需要使用列表（甚至更多，无序列表）。如果有必要列出过去和将来的步骤，我只需再添加两个段落，一个在状态之前（“你已完成”开始“步骤'），一个之后（'下一步将是“结束”步骤'）。

但是，我承认这不是你问题的完整答案。

---

另外，我会说一些咏叹调属性对我来说是多余的。例如，aria-valuetext可能在交互式窗口小部件的上下文中更有意义，当时没有其他人性友好的状态描述。虽然我在这里可能错了。