a11y tabs from https://experience.videotron.com/helix/television/telecommande-vocale

tabs.html

<div class="layout--onecol layout-container py-section">
    <div class="container-fluid">
      
      
      
        <div class="row">
    <div class="col-12 layout__region--content">
                                                                                                                                                                                                                                                        

<div class="tab ">
    <div class="tab__header  border-bottom">
        <div class="position-relative">
            <ul class="nav nav-tabs fade-in a--already-animated" id="807c7f21-f81e-4eaf-820b-f5c3120d0ccc-1441845687-tab-nav" role="tablist" data-animate="fade-in">
                                    <li class="nav-item">
                        <a class="nav-link vui--font-secondary font-weight-bold h4 mb-0 text-uppercase active show" id="807c7f21-f81e-4eaf-820b-f5c3120d0ccc-1441845687-0-tab" data-toggle="tab" href="#807c7f21-f81e-4eaf-820b-f5c3120d0ccc-1441845687-0" role="tab" aria-controls="807c7f21-f81e-4eaf-820b-f5c3120d0ccc-1441845687-0" aria-selected="true"><div class="nav-link__content">Thématiques</div></a>
                    </li>
                                    <li class="nav-item">
                        <a class="nav-link vui--font-secondary font-weight-bold h4 mb-0 text-uppercase" id="807c7f21-f81e-4eaf-820b-f5c3120d0ccc-1441845687-1-tab" data-toggle="tab" href="#807c7f21-f81e-4eaf-820b-f5c3120d0ccc-1441845687-1" role="tab" aria-controls="807c7f21-f81e-4eaf-820b-f5c3120d0ccc-1441845687-1" aria-selected="false"><div class="nav-link__content">CÉLÉBRITÉS</div></a>
                    </li>
                                    <li class="nav-item">
                        <a class="nav-link vui--font-secondary font-weight-bold h4 mb-0 text-uppercase" id="807c7f21-f81e-4eaf-820b-f5c3120d0ccc-1441845687-2-tab" data-toggle="tab" href="#807c7f21-f81e-4eaf-820b-f5c3120d0ccc-1441845687-2" role="tab" aria-controls="807c7f21-f81e-4eaf-820b-f5c3120d0ccc-1441845687-2" aria-selected="false"><div class="nav-link__content">CONTRÔLE DE LA TÉLÉ</div></a>
                    </li>
                            </ul>
        </div>
    </div>

    <section class="tab__section-content ">
        <div class="tab-content" id="807c7f21-f81e-4eaf-820b-f5c3120d0ccc-1441845687-content-tab">
                                                                    <div id="807c7f21-f81e-4eaf-820b-f5c3120d0ccc-1441845687-0" class="tab-pane fade active show" role="tabpanel" aria-labelledby="807c7f21-f81e-4eaf-820b-f5c3120d0ccc-1441845687-0-tab">
                  

        
<div data-layout-content-preview-placeholder-label="&quot;Thématiques&quot; block" data-block-plugin-id="inline_block:two_column_media_text" data-inline-block-uuid="445685ac-5687-45b3-b185-a7702ab98ed4" class="block block-layout-builder block-inline-blocktwo-column-media-text" id="">

  
  

  <div class="row align-items-center">
    <div class="col-md-6 order-first pb-6 pb-md-0">
      
                  <article class="media--type-image media--view-mode-default">
  
      
            <div class="field field--name-image field--type-image field--label-hidden field__item">    <picture>
                <!--[if IE 9]><video style="display: none;"><![endif]-->
              <source srcset="/sites/default/files/styles/cropped_small/public/image/helix_com_vocale_film_%402x_535x300.jpg?itok=5T2iGdcx 1x" media="(max-width: 767px)" type="image/jpeg">
              <source srcset="/sites/default/files/styles/cropped_medium/public/image/helix_com_vocale_film_%402x_535x300.jpg?itok=g0bCCzBn 1x" media="all and (min-width: 768px) and (max-width: 1199px)" type="image/jpeg">
              <source srcset="/sites/default/files/styles/cropped_large/public/image/helix_com_vocale_film_%402x_535x300.jpg?itok=hKrGSWNc 1x" media="all and (min-width: 1200px)" type="image/jpeg">
            <!--[if IE 9]></video><![endif]-->
            <img src="/sites/default/files/styles/cropped_small/public/image/helix_com_vocale_film_%402x_535x300.jpg?itok=5T2iGdcx" alt="Commande vocale action" typeof="foaf:Image" class="img-fluid">

  </picture>

</div>
      
  </article>

        
          </div>
    <div class="col-md-5 mb-4 mb-md-0 offset-md-1 order-last">
            <div class="field-rich-text-block"><h2>Prenez le contrôle</h2>

<p>Les possibilités de la commande vocale sont presque infinies. Demandez des suggestions de contenu. Enregistrez vos émissions favorites, avancez et reculez sur demande, activez le Contrôle parental, affichez les sous-titres, etc. Amusez-vous!</p></div>
    </div>
  </div>
</div>

                </div>
                                                                      <div id="807c7f21-f81e-4eaf-820b-f5c3120d0ccc-1441845687-1" class="tab-pane fade" role="tabpanel" aria-labelledby="807c7f21-f81e-4eaf-820b-f5c3120d0ccc-1441845687-1-tab">
                  

        
<div data-layout-content-preview-placeholder-label="&quot;CÉLÉBRITÉS&quot; block" data-block-plugin-id="inline_block:two_column_media_text" data-inline-block-uuid="805b5e9c-c4ec-4d8b-aa8c-134c54291c64" class="block block-layout-builder block-inline-blocktwo-column-media-text" id="">

  
  

  <div class="row align-items-center">
    <div class="col-md-6 order-first pb-6 pb-md-0">
      
                  <article class="media--type-image media--view-mode-default">
  
      
            <div class="field field--name-image field--type-image field--label-hidden field__item">    <picture>
                <!--[if IE 9]><video style="display: none;"><![endif]-->
              <source srcset="/sites/default/files/styles/cropped_small/public/image/helix_com_vocale_celebrites_%402x_535x300.jpg?itok=6qmfv_kM 1x" media="(max-width: 767px)" type="image/jpeg">
              <source srcset="/sites/default/files/styles/cropped_medium/public/image/helix_com_vocale_celebrites_%402x_535x300.jpg?itok=WExfasRW 1x" media="all and (min-width: 768px) and (max-width: 1199px)" type="image/jpeg">
              <source srcset="/sites/default/files/styles/cropped_large/public/image/helix_com_vocale_celebrites_%402x_535x300.jpg?itok=d1C-LeJS 1x" media="all and (min-width: 1200px)" type="image/jpeg">
            <!--[if IE 9]></video><![endif]-->
            <img src="/sites/default/files/styles/cropped_small/public/image/helix_com_vocale_celebrites_%402x_535x300.jpg?itok=6qmfv_kM" alt="Commande vocale robitaille" typeof="foaf:Image" class="img-fluid">

  </picture>

</div>
      
  </article>

        
          </div>
    <div class="col-md-5 mb-4 mb-md-0 offset-md-1 order-last">
            <div class="field-rich-text-block"><h2>Prenez le contrôle</h2>

<p>Les possibilités de la commande vocale sont presque infinies. Demandez des suggestions de contenu. Enregistrez vos émissions favorites, avancez et reculez sur demande, activez le Contrôle parental, affichez les sous-titres, etc. Amusez-vous!</p></div>
    </div>
  </div>
</div>

                </div>
                                                                      <div id="807c7f21-f81e-4eaf-820b-f5c3120d0ccc-1441845687-2" class="tab-pane fade" role="tabpanel" aria-labelledby="807c7f21-f81e-4eaf-820b-f5c3120d0ccc-1441845687-2-tab">
                  

        
<div data-layout-content-preview-placeholder-label="&quot;CONTRÔLE DE LA TÉLÉ&quot; block" data-block-plugin-id="inline_block:two_column_media_text" data-inline-block-uuid="04644d8b-7465-4994-88b7-91f9f108005b" class="block block-layout-builder block-inline-blocktwo-column-media-text" id="">

  
  

  <div class="row align-items-center">
    <div class="col-md-6 order-first pb-6 pb-md-0">
      
                  <article class="media--type-image media--view-mode-default">
  
      
            <div class="field field--name-image field--type-image field--label-hidden field__item">    <picture>
                <!--[if IE 9]><video style="display: none;"><![endif]-->
              <source srcset="/sites/default/files/styles/cropped_small/public/image/helix_com_vocale_commandes_%402x_535x300.jpg?itok=K9avQs78 1x" media="(max-width: 767px)" type="image/jpeg">
              <source srcset="/sites/default/files/styles/cropped_medium/public/image/helix_com_vocale_commandes_%402x_535x300.jpg?itok=BTYbng1K 1x" media="all and (min-width: 768px) and (max-width: 1199px)" type="image/jpeg">
              <source srcset="/sites/default/files/styles/cropped_large/public/image/helix_com_vocale_commandes_%402x_535x300.jpg?itok=hogKZH-X 1x" media="all and (min-width: 1200px)" type="image/jpeg">
            <!--[if IE 9]></video><![endif]-->
            <img src="/sites/default/files/styles/cropped_small/public/image/helix_com_vocale_commandes_%402x_535x300.jpg?itok=K9avQs78" alt="Commande vocale controle" typeof="foaf:Image" class="img-fluid">

  </picture>

</div>
      
  </article>

        
          </div>
    <div class="col-md-5 mb-4 mb-md-0 offset-md-1 order-last">
            <div class="field-rich-text-block"><h2>Prenez le contrôle</h2>

<p>Les possibilités de la commande vocale sont presque infinies. Demandez des suggestions de contenu. Enregistrez vos émissions favorites, avancez et reculez sur demande, activez le Contrôle parental, affichez les sous-titres, etc. Amusez-vous!</p></div>
    </div>
  </div>
</div>

                </div>
                                            </div>
    </section>
</div>
          </div>
  </div>
    </div>
  </div>