Search code examples
jquerycssaccessibilitywai-ariawcag

Accessibility Issues - Links won't tab through or expand to reveal hidden content

I created a hide/reveal step-by-step component that shows content if you click on the step number.

It works as intended, but I'm having trouble ensuring its accessible.

  • I can't seem to tab using my keyboard over the 1-4 links, even though they are <a> tags.
<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>
  • I also want to ensure that the user can also activate the hidden content via the keyboard.
<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>

I've tried playing around with the :focus and inserting role="tab" aria-selected="true" into the <a> tags.

Here's my code pen: https://codepen.io/ckatz/pen/gJmgbq

I want to make sure that anyone using a keyboard can use this component effectively.

Solution

  • I was able to tab through by adding tabindex="0" to each of the links. This includes the tab links in the normal flow while tabbing through the site.

    I also read that you actually shouldn't be using aria-selected="true" for all navigation links, only the currently selected one. Find out more here: stefanjudis.com/blog/aria-selected-and-when-to-use-it

    So your step selector would look like this instead:

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

    Although I couldn't get it to select the focused element with space or enter. I'll have to do some more research to figure out what's up with that!