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

Question

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

鉴于HTML中的新进展标签,我首先想到的是做这样的事情:

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

...但是因为<progress>只接受使用列表的短语内容并不是一个真正的选择.所以现在我可能会用这样的东西,整合ARIA progressbar -role:

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

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

另一个问题是,例如,<progress>在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>

"支持"类的所有元素都将在屏幕外定位.IMO这样我们应该有一个很好的语义标记妥协(状态继承在我看来真的是一个有序列表;-))和可访问性,这要归功于每个步骤的附加标题和状态文本.

Answer 1

根据Whatwg，您不应该progressbar为元素分配角色<ul>。

\n\n

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

\n\n

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

\n\n

更新：你是对的，progress不适合这里，它更像是一个交互式表单小部件。在从你的第一个例子中获取之前，我应该先检查一下。但无论如何，重点是当您可以用纯文本描述正在发生的事情时，无需使用列表（更不用说无序列表）。如果需要列出过去和未来的步骤，我只需再添加两段，第一段在状态之前（\xe2\x80\x98你已完成“开始”步骤\xe2\x80\x99 ），后面的一个是（\xe2\x80\x98下一步将是“结束”步骤\xe2\x80\x99）。

\n\n

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

\n\n\n\n

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

\n