Aria 完成状态？

Question

Aria 完成状态？

5

当进行无障碍编程/设计时，有没有适当的方法来表达特定项目已“完成”？当前正在构建一些无障碍的电子学习内容。在特定活动中，有许多必须按下的按钮，每个按钮的激活会在单独的面板中显示更多信息。在这个特定的示例中，我使用了一个选项卡列表。一旦所有选项卡都被访问过，用户就可以向前移动到下一个活动。将aria-label更改为类似于“选项卡1-完成”或“选项卡1-未完成”是否足以表示它们的状态？更新1：为了澄清，在这个特定的示例中，我使用了一个选项卡列表，使用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>

- slopps

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JazzBrotha · Accepted Answer

您可以通过添加 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" 属性可以确保用户在每个步骤完成后通过 Tab 键切换到它，从而获取新信息。

一定要为非当前内容部分添加 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 =“完成3个步骤中的第1步”。
希望这能帮助您！