我目前正在尝试想出一种良好且易于访问的方式来格式化状态指示器,该指示器应在网站上的一组向导式页面中呈现。该网站应提供一个多页表单,并在其顶部显示状态指示器,如下面的线框图所示:
考虑到 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”类的元素将被定位在屏幕外。我认为这样我们应该可以很好地折衷语义标记(在我看来,状态演变真的是有序列表;-)),并且通过每个步骤的额外标题和状态文本实现可访问性。
aria-valuetext
,我理解它的意义,但是li.now
已经提供了用户友好形式的自然语言输出,而且还被aria-describedby
引用。虽然我不是这个领域的专家,但是这样的冗余对屏幕阅读器可能有用。 - Anton Strogonoff