可访问性问题 - 链接不会跳转或展开以显示隐藏内容
Accessibility Issues - Links won't tab through or expand to reveal hidden content
我创建了一个 hide/reveal 分步组件,如果您单击步骤编号,它会显示内容。
它按预期工作,但我无法确保其可访问性。
- 我似乎无法在 1-4 个链接上使用键盘切换,即使它们是
<a>
个标签。
<div class="progress-steps">
<a class="showSingle" target="1"></a>
<a class="showSingle" target="2"></a>
<a class="showSingle" target="3"></a>
<a class="showSingle" target="4"></a>
</div>
- 我还想确保用户也可以通过键盘激活隐藏内容。
<section id="progress-content" class="hide">
<div id="div1" class="targetDiv"><h3>Initiation</h3>
<p><strong>Fill out the </strong><a class="bold-link" href="https://app.smartsheet.com/b/form?EQBCT=b6923f4b9dc347f384936e342e5d2b58" target="_blank" rel="noopener">Project Request Form</a>: Each request goes through a review process to determine if the project is ready to be worked on.</p>
</div>
<div id="div2" class="targetDiv"><h3>Planning</h3>
<p><strong>Kickoff</strong>: After approval, we will schedule a meeting between all involved parties to discuss the scope and direction of the project.</p>
</div>
<div id="div3" class="targetDiv"><h3>Execution</h3>
<p><strong>We get to work!</strong> The plan will be carried out — involving all key stakeholders. The final product will be tested and implemented.</p>
</div>
<div id="div4" class="targetDiv"><h3>Assessment</h3>
<p><strong>Metrics for Success</strong>: After completion of the project, we will obtain sign-off of deliverables and revisit in 6-12 months to ensure stakeholders needs are met.</p>
</div>
</section>
我试过 :focus
并将 role="tab" aria-selected="true"
插入 <a>
标签。
这是我的代码笔:https://codepen.io/ckatz/pen/gJmgbq
我想确保任何使用键盘的人都能有效地使用这个组件。
我可以通过向每个链接添加 tabindex="0"
来切换。这包括正常流程中的选项卡链接,同时在站点中使用选项卡。
我还读到您实际上不应该对所有导航链接使用aria-selected="true"
,只有当前selected 的链接。在此处了解更多信息:stefanjudis.com/blog/aria-selected-and-when-to-use-it
所以你的步骤 select 或者看起来像这样:
<div class="progress-steps">
<a class="showSingle" target="1" role="tab" tabindex="0" aria-controls="nils-tab"></a>
<a class="showSingle" target="2" role="tab" tabindex="0" aria-controls="nils-tab"></a>
<a class="showSingle" target="3" role="tab" tabindex="0" aria-controls="nils-tab"></a>
<a class="showSingle" target="4" role="tab" tabindex="0" aria-controls="nils-tab"></a>
</div>
尽管我无法通过 space 或输入将其转到 select 焦点元素。我将不得不做更多的研究来弄清楚这是怎么回事!
我创建了一个 hide/reveal 分步组件,如果您单击步骤编号,它会显示内容。
它按预期工作,但我无法确保其可访问性。
- 我似乎无法在 1-4 个链接上使用键盘切换,即使它们是
<a>
个标签。
<div class="progress-steps">
<a class="showSingle" target="1"></a>
<a class="showSingle" target="2"></a>
<a class="showSingle" target="3"></a>
<a class="showSingle" target="4"></a>
</div>
- 我还想确保用户也可以通过键盘激活隐藏内容。
<section id="progress-content" class="hide">
<div id="div1" class="targetDiv"><h3>Initiation</h3>
<p><strong>Fill out the </strong><a class="bold-link" href="https://app.smartsheet.com/b/form?EQBCT=b6923f4b9dc347f384936e342e5d2b58" target="_blank" rel="noopener">Project Request Form</a>: Each request goes through a review process to determine if the project is ready to be worked on.</p>
</div>
<div id="div2" class="targetDiv"><h3>Planning</h3>
<p><strong>Kickoff</strong>: After approval, we will schedule a meeting between all involved parties to discuss the scope and direction of the project.</p>
</div>
<div id="div3" class="targetDiv"><h3>Execution</h3>
<p><strong>We get to work!</strong> The plan will be carried out — involving all key stakeholders. The final product will be tested and implemented.</p>
</div>
<div id="div4" class="targetDiv"><h3>Assessment</h3>
<p><strong>Metrics for Success</strong>: After completion of the project, we will obtain sign-off of deliverables and revisit in 6-12 months to ensure stakeholders needs are met.</p>
</div>
</section>
我试过 :focus
并将 role="tab" aria-selected="true"
插入 <a>
标签。
这是我的代码笔:https://codepen.io/ckatz/pen/gJmgbq
我想确保任何使用键盘的人都能有效地使用这个组件。
我可以通过向每个链接添加 tabindex="0"
来切换。这包括正常流程中的选项卡链接,同时在站点中使用选项卡。
我还读到您实际上不应该对所有导航链接使用aria-selected="true"
,只有当前selected 的链接。在此处了解更多信息:stefanjudis.com/blog/aria-selected-and-when-to-use-it
所以你的步骤 select 或者看起来像这样:
<div class="progress-steps">
<a class="showSingle" target="1" role="tab" tabindex="0" aria-controls="nils-tab"></a>
<a class="showSingle" target="2" role="tab" tabindex="0" aria-controls="nils-tab"></a>
<a class="showSingle" target="3" role="tab" tabindex="0" aria-controls="nils-tab"></a>
<a class="showSingle" target="4" role="tab" tabindex="0" aria-controls="nils-tab"></a>
</div>
尽管我无法通过 space 或输入将其转到 select 焦点元素。我将不得不做更多的研究来弄清楚这是怎么回事!