如何让使用屏幕阅读器的人可以访问我的进度条?

时间:2011-11-23 13:02:10

标签: progress-bar accessibility

我的网站上有一个进度条,可以直观地向用户显示他们所处的过程中的哪一点。有3个步骤,他们需要完成每个步骤,以便完成。

进度条上方有一个标题 输入详细信息(第1步,共3步)或确认详细信息(第2步,共3步)或续订完成(第3步,共3步)

假设您正在第一步,屏幕阅读器会读出标题,然后是进度条文本,然后是以下标题,如下所示:

输入详细信息(第1步,共3步) 输入详细信息确认详细信息续订完成 输入您的详细信息 所有标有(*)的文件都是必需的

我不认为进度条有助于向屏幕阅读器的用户指示他们当前处于什么时间点以及他们需要做多少(这是整个目的进度条!) 人们认为将文本添加到进度条然后直观地隐藏它会是一件好事吗? 我在考虑做这样的事情:

Enter details <span class="hidden">Active</span> Confirm details<span class="hidden">Incomplete</span> Renewal complete<span class="hidden">Incomplete</span>

然后添加css

.hidden { text-indent:-3000px; 
or
  font-size:0px; }

或者您认为第一个标题是所有使用屏幕阅读器的人都需要听到并且添加进度条只是令人困惑,我应该将它们隐藏起来吗?在哪种情况下,我该怎么做?

提前感谢您提供任何帮助

1 个答案:

答案 0 :(得分:1)

使用WAI-ARIA属性。 Progressbar role似乎正是你所需要的。然后,屏幕阅读器可以使用这些属性准确地表示您的意图。