Menu icon Foundation
Accessible responsive tab accordion content

Hi again.

 

I am creating a web Site and I have a secondary section that use responsive tab accordion plugin. My site need to be 100% (or as close as possible) accessible.

 

The keyboard and accessibility features work great for the accordion part but for the tabs part, I am having issues.

When navigate through the tabs and open them, I can’t go into the content that has links in it. Its simply goes to the next tab. If I put a Tabindex=”0” on the content or the link it works but only AFTER I have gone through all the tabs at the top.

 

Is there a function I am missing or a line of code I need to add?

 

 

Help me incredible awesome Zurb team and fans

accessibilityresponsive tab accoridion

Hi again.

 

I am creating a web Site and I have a secondary section that use responsive tab accordion plugin. My site need to be 100% (or as close as possible) accessible.

 

The keyboard and accessibility features work great for the accordion part but for the tabs part, I am having issues.

When navigate through the tabs and open them, I can’t go into the content that has links in it. Its simply goes to the next tab. If I put a Tabindex=”0” on the content or the link it works but only AFTER I have gone through all the tabs at the top.

 

Is there a function I am missing or a line of code I need to add?

 

 

Help me incredible awesome Zurb team and fans

Benoit champagne over 2 years ago

Anyone?!?!

 

Really need help with this issue do to the accessibility laws in Canada

 

Help!

Benoit champagne over 2 years ago

Hi, me again.

I'm really hoping that someone can help me with this.

You see the issues is not the accordion part of the responsive accordion tabs but the tabs themselves.

when i use my keyboard to go through my tabs to open the content, i have to go through all the tabs to then go to the content of the open panel and click on links. When i was in the tab section of the foundation site, this was not issue it seemed. Having done some research on line the issues seem to be with the aria elements themselves (can't 100% confirm this) that causes the tabindex and focus issues. 

here is some of my code (sorry for the french terms riddled in it)

<ul id="accueil" class="tabs-milieu tabs" data-responsive-accordion-tabs="tabs medium-accordion small-accordion large-tabs" data-allow-all-closed="true" data-active-collapse="true" role="tablist" data-tabs="23u5ki-tabs">

     <li class="ac-ed tabs-title" role="presentation">

    <a  href="#org4fg-accordion" class="" role="tab" aria-controls="org4fg-accordion" aria-selected="false" id="org4fg-accordion-label">Édition</a>

 

   

  </li>

   <li class="ac-fp tabs-title is-active" role="presentation">

    <a  href="#obt4ng-accordion" class="" role="tab" aria-controls="obt4ng-accordion" aria-selected="true" id="obt4ng-accordion-label">Formation et  accompagnement</a>

 

   

  </li>

   <li class="ac-ldc tabs-title" role="presentation">

    <a  href="#bwbv4h-accordion" class="" role="tab" aria-controls="bwbv4h-accordion" aria-selected="false">Libriairie du Centre</a>

 

   

  </li>

   <li class="ac-ap tabs-title" role="presentation">

    <a  href="#p5ghr8-accordion" class="" role="tab" aria-controls="p5ghr8-accordion" aria-selected="false" id="p5ghr8-accordion-label">Appui  technologique</a>

 

   

  </li>

   <li class="ac-sos tabs-title" role="presentation">

    <a href="#frbsn8-accordion" class="" role="tab" aria-controls="frbsn8-accordion" aria-selected="false" id="frbsn8-accordion-label">SOS Devoirs</a>

 

   

  </li>

</ul>

 

Here is an example of the code of the Second panel when it is open

-----------------------------------------------------

<div class="tabs-panel is-active" data-tab-content  id="obt4ng-accordion" role="tabpanel" aria-hidden="false" aria-labelledby="obt4ng-accordion-label">

       <!-- rubrique -->

  <div class="row " data-equalizer="mklnhb-equalizer" data-equalize-on="large" data-resize="j6kvms-eq" data-mutate="k0zrmf-eq" data-events="mutate">  <div class=" large-2 medium-4 small-12 column acess-r-divider" data-equalizer-watch="" style="height: 265px;">

<div>

 

<div class="rubrique-icone">

<img src="http://www.cforp.ca/cforp-17/wp-content/uploads/sites/25/2017/06/auto-form-logo-accrap.png?1502290846887" alt="Logo - Autoformation sur mesure" class="aligncenter">

 

</div>

<div class="column lien-secondaire"></div>

<div class=" card-section "><a role="button" class="button large-12" href="http://formapro.cforp.ca/autoformation/" target="_blank">Accédez à nos capsules d’autoformation gratuites</a></div>

</div>

 

</div>

    </div>

        <!--fin  rubrique -->

    </div>

 

_______________________________________________

 

So can some one send me a miracle code that can reorder the sequence of tabindex when a panel is open.

 

thank you in advance