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

Question

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

6

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

enter image description here

考虑到 HTML 中的新 progress 标签，我的第一个想法是像这样做：

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

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

另一个问题是，在Opera中，<progress>被呈现为进度条，因此>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”类的元素将被定位在屏幕外。我认为这样我们应该可以很好地折衷语义标记（在我看来，状态演变真的是有序列表;-)），并且通过每个步骤的额外标题和状态文本实现可访问性。

- Horst Gutmann

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anton Strogonoff · Accepted Answer

根据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属性看起来有些冗余。例如，aria-valuetext可能更适合交互式小部件的上下文，当其状态没有其他人类可读的描述时。不过我可能错了。