Question

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

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

访问完所有标签后，用户可以继续前进到下一个活动。

将aria-label更改为＆＃34; Tab 1 - 完成＆＃34;或者＆＃34;标签1 - 不完整＆＃34;足以表明他们的状态？

更新1

为了澄清，在这个特定的例子中，我使用了一个tablist，使用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"的非当前部分，以便屏幕阅读器跳过它们。

更新1

在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"。

希望它有所帮助！

咏叹调完成了州？

更新1

1 个答案:

更新1