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

我在我的网站上有一个进度条，可以直观地向用户显示他们在流程中的哪个点。共有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>

或者你认为第一个标题是所有使用屏幕阅读器的人都需要听到的，而添加进度条只是让人困惑，我应该对他们隐藏它吗？在这种情况下，我该怎么做

---

提前感谢您的帮助

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

这有点棘手；ARIA progressbar角色通常用于桌面样式的进度条，即您在Windows文件复制对话框中看到的那种，它在操作完成时填充（并指示系统进度，而不是用户进度）。OP所描述的有点不同；它更像是一个面包屑条，描述已经取得的进展和尚未取得的进展——这些在您进行交易（如购买书籍或预订航班）的网站上相当常见。从视觉上看，它们根本不像进度条，因此使用该角色可能会让用户感到困惑……这里的部分问题是，ARIA的词汇表基于桌面习惯用法，因此它没有任何角色完全适合这种习惯用法，这种习惯用法在某种程度上特定于HTML/web。您可能可以让progressbar角色在这里工作；把它放在一个环绕整个东西的div上；并使用aria valuetext属性指示当前项。我需要用几个屏幕阅读器来测试它，看看它工作得有多好——特别是他们是否会在阅读栏的同时阅读栏内的文本内容。我知道这是一个古老的主题，但有人能做到这一点吗。我试过了，但运气不好。

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