咏叹调完成了州？-Java 学习之路

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

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

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

将咏叹调标签更改为“选项卡1 - 完成”或“选项卡1 - 不完整”是否足以表明其状态？

更新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>

1 回答

4
你可以告诉屏幕阅读器这样的辅助技术元素通过给出它来显示进度 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" .

希望能帮助到你！
回复于 2024-04-27T01:06:42+08:00

咏叹调完成了州？

更新1

1 回答

更新1

相关问题