咏叹调完成状态？

Question

在为可访问性编程/设计时，是否有适当的方法来传达特定项目已“完成”？

目前正在构建一些可访问的电子学习。在特定活动中，必须按下许多按钮，激活每个按钮会在单独的面板中显示更多信息。在这个特定的例子中，我使用的是一个表格列表。

访问完所有选项卡后，用户可以继续进行下一个活动。

将 aria-label 更改为“Tab 1 - complete”或“Tab 1 - not complete”之类的东西是否足以表明它们的状态？

更新一

为了澄清，在这个特定的例子中，我使用了一个选项卡列表，使用了 Inclusive Components - Tabbed Interfaces 中的方法。无序列表要求有一个

role="tablist"

，所以我不能使用

role="progressbar"

。 即：

<ul role="tablist">
  <li role="presentation"> <a role="tab" href="javascript:void(0)">Tab 1</a> </li>
  <li role="presentation"> <a role="tab" href="javascript:void(0)">Tab 2</a> </li>
</ul>

Answer 1

您可以告诉屏幕阅读器等辅助技术，通过给它

role="progressbar"

一个元素显示进度。然后，您可以分别使用

aria-valuemin

和

aria-valuemax

设置最小值和最大值，并使用

aria-valuenow

显示当前值。默认情况下，屏幕阅读器会根据最小值和最大值读出

aria-valuenow

作为百分比。但是，您可以设置

aria-valuetext

来告诉屏幕阅读器以不同的格式显示值。它看起来像这样：

<ol tabindex="0" role="progressbar" aria-valuemin="1" aria-valuemax="3" aria-valuenow="1" aria-valuetext="Step 1 of 3: First Step">
  <li>First Step</li>
  <li>Second Step</li>
  <li>Last Step</li>
</ol>

提供元素

tabindex="0"

将确保用户在每个完成的步骤后点击它，从而获得新信息。

一定要给出非当前内容部分

aria-hidden="true"

让屏幕阅读器跳过它们。

更新一

在

role="tablist"

的情况下，有几个不同的元素可以帮助你。在您的情况下，您可以使用

aria-hidden

和

aria-selected

作为您的状态，并使用

tabindex

控制焦点。因此，假设屏幕阅读器用户在第一个选项卡上，您的代码可能如下所示：

<ul role="tablist">
  <li role="presentation">
    <a role="tab" href="#section1" id="tab1" aria-selected="true" tabindex="0">Tab 1</a>
   </li>
   <li role="presentation">
     <a role="tab" href="#section2" id="tab2" aria-selected="false" tabindex="-1">Tab 2</a>
   </li>
</ul>

<section role="tabpanel" id="section1" aria-labelledby="tab1" aria-hidden="false">
// Tab1 content here
</section>  
<section role="tabpanel" id="section2" aria-labelledby="tab2" aria-hidden="true">
// Tab2 content here  
</section>  

使用此设置，您的屏幕阅读器用户无法切换到第二个选项卡，并且其内容也对屏幕阅读器隐藏。您可以在屏幕阅读器用户单击相应按钮时触发相应的选项卡，方法是更改

tabindex

、

aria-hidden

和

aria-selected

。

如果你想通知屏幕阅读器用户进度，你可以简单地给按钮

aria-label

。例如，选项卡 1 的按钮可以具有：

aria-label="Complete step 1 out of 3"

.

希望对您有所帮助！