gpt4 book ai didi

javascript - 咏叹调完成状态?

转载 作者:搜寻专家 更新时间:2023-10-31 08:13:36 26 4
gpt4 key购买 nike

在针对可访问性进行编程/设计时,是否有适当的方法来传达特定项目已“完成”?

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

访问完所有选项卡后,用户可以前进到下一个事件。

将 aria-label 更改为“Tab 1 - complete”或“Tab 1 - not complete”之类的内容是否足以表明其状态?

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

最佳答案

您可以通过给元素 role="progressbar" 来告诉屏幕阅读器等辅助技术元素显示进度。然后,您可以分别使用aria-valueminaria-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-hiddenaria-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>

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

如果你想通知屏幕阅读器用户你可以简单地给按钮aria-label。例如,选项卡 1 的按钮可以具有:aria-label="Complete step 1 out of 3"

希望对您有所帮助!

关于javascript - 咏叹调完成状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48172286/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com