咏叹调完成状态?
Aria completed state?
当 programming/designing 用于可访问性时,是否有适当的方法来传达特定项目是 "completed"?
目前正在构建一些易于访问的电子学习。在特定的 activity 中,有许多按钮必须按下,激活每个按钮会在单独的面板中显示更多信息。在此特定示例中,我使用的是表格列表。
访问完所有选项卡后,用户可以前进到下一个 activity。
将 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>
您可以告诉辅助技术,例如屏幕 readers,通过给它 role="progressbar"
元素显示进度。然后,您可以分别用aria-valuemin
和aria-valuemax
设置最小值和最大值,并用aria-valuenow
显示当前值。默认情况下,屏幕 reader 显示 aria-valuenow
基于最小值和最大值的百分比。但是,您可以设置 aria-valuetext
来告诉屏幕 reader 以不同的格式显示值。它看起来像这样:
<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"
以使屏幕 reader 跳过它们。
更新 1
在 role="tablist"
的情况下,有几个不同的元素可以帮助您。在您的情况下,您可以使用 aria-hidden
和 aria-selected
作为状态并使用 tabindex
控制焦点。所以假设屏幕 reader 用户在第一个选项卡上,您的代码可能如下所示:
<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>
使用此设置,您的屏幕 reader 用户无法切换到第二个选项卡,其内容也隐藏在屏幕上 reader。您可以通过更改 tabindex
、aria-hidden
和 aria-selected
.
来在屏幕 reader 用户单击相应按钮时触发相应的选项卡
如果您想通知屏幕 reader 用户进度,您只需提供按钮 aria-label
。例如,选项卡 1 的按钮可以具有:aria-label="Complete step 1 out of 3"
.
希望对您有所帮助!
当 programming/designing 用于可访问性时,是否有适当的方法来传达特定项目是 "completed"?
目前正在构建一些易于访问的电子学习。在特定的 activity 中,有许多按钮必须按下,激活每个按钮会在单独的面板中显示更多信息。在此特定示例中,我使用的是表格列表。
访问完所有选项卡后,用户可以前进到下一个 activity。
将 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>
您可以告诉辅助技术,例如屏幕 readers,通过给它 role="progressbar"
元素显示进度。然后,您可以分别用aria-valuemin
和aria-valuemax
设置最小值和最大值,并用aria-valuenow
显示当前值。默认情况下,屏幕 reader 显示 aria-valuenow
基于最小值和最大值的百分比。但是,您可以设置 aria-valuetext
来告诉屏幕 reader 以不同的格式显示值。它看起来像这样:
<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"
以使屏幕 reader 跳过它们。
更新 1
在 role="tablist"
的情况下,有几个不同的元素可以帮助您。在您的情况下,您可以使用 aria-hidden
和 aria-selected
作为状态并使用 tabindex
控制焦点。所以假设屏幕 reader 用户在第一个选项卡上,您的代码可能如下所示:
<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>
使用此设置,您的屏幕 reader 用户无法切换到第二个选项卡,其内容也隐藏在屏幕上 reader。您可以通过更改 tabindex
、aria-hidden
和 aria-selected
.
如果您想通知屏幕 reader 用户进度,您只需提供按钮 aria-label
。例如,选项卡 1 的按钮可以具有:aria-label="Complete step 1 out of 3"
.
希望对您有所帮助!