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

Question

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

给定新的 progress -HTML 中的标记我的第一个想法是做这样的事情:

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

...但是因为 只接受使用列表的短语内容并不是一个真正的选择。所以现在我可能会选择这样的东西，整合 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>

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

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

谁能推荐一个不仅依赖于使用单个图像的可访问状态栏？

当前解决方案

现在我将使用以下标记:

<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>

“supportive”类的所有元素都将放置在屏幕外。 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不适合这里，它更像是一个交互式表单小部件。在从您的第一个示例中获取之前，我应该先检查一下。但无论如何，关键是没有必要使用列表(更不用说无序列表)，当您可以用纯文本描述正在发生的事情时。如果需要列出过去和 future 的步骤，我会再添加两段，一段在状态之前('你已经完成了“开始”步骤')，一段之后('下一步将是“结束”步骤)。

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

---

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