Проблемы доступности - Ссылки не будут перемещаться или расширяться, чтобы показать скрытый контент

Question

Я создал пошаговый компонент скрытия / раскрытия, который отображает содержимое, если щелкнуть номер шага.

Он работает, как задумано, но у меня возникают проблемы с обеспечением его доступности.

• Кажется, я не могу использовать табуляции с помощью клавиатуры над 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> tags.

Вот мой код: https://codepen.io/ckatz/pen/gJmgbq

Я хочу убедиться, что любой, кто использует клавиатуру, может эффективно использовать этот компонент.

Answer 1

Мне удалось пролистать, добавив tabindex="0" к каждой из ссылок.Это включает в себя ссылки на вкладки в обычном потоке при переходе по сайту.

Я также читал, что на самом деле не следует использовать aria-selected="true" для всех навигационных ссылок, только выбранные в данный моментодин.Узнайте больше здесь: stefanjudis.com / blog / aria-selected-and-when-to-use-it

Так что ваш селектор шагов будет выглядеть так:

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

Хотя я не мог выбрать выделенный элемент с пробелом или ввод.Мне придется провести еще какое-то исследование, чтобы выяснить, что с этим случилось!