6

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

在此处输入图像描述

鉴于 HTML 中的新进度标签，我的第一个想法是做这样的事情：

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

...但是由于 <progress> 只接受使用列表的短语内容并不是一个真正的选择。所以现在我可能会使用这样的东西，整合 ARIA进度条-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 通过这种方式，我们应该在语义标记（我认为状态继承实际上是一个有序列表 ;-)）和可访问性之间取得很好的折衷，这要归功于每个步骤的附加标题和状态文本。

4

1 回答 1

2

根据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，当没有其他对人类友好的状态描述时，也许在交互式小部件的上下文中更有意义。虽然我可能在这里错了。

于 2011-06-01T11:06:13.553 回答