Skip to main content
W
Weat01
Inspiring
June 14, 2021
Answered

Aria controls error

  • June 14, 2021
  • 2 replies
  • 3983 views

Hi,

I get a lot of these errors on W3 validation:

The aria-controls attribute must point to an element in the same document.

 

It relates to my tabbed panels - some missing connection between the tabs and the panels, but i am not sure what needs to be corrected? It is the same error on all pages/ tabbed panels.

 

<li class="nav-item"> <a class="nav-link" href="#pane6" role="tab" id="hatstab6" data-toggle="tab" aria-controls="hats">Intro to Philosophy</a></li>

 

The corresponding panel content is

 

<div role="tabpanel" class="tab-pane fade" id="pane6" aria-labelledby="hatstab6">
	       <br> <p class="panelcontent"><h6 class="panelh6">Intro to Philosophy</h6></p><br/>

 

 

    This topic has been closed for replies.
    Correct answer BenPleysier

    Whatever you name the 'tab-pane' id should be what you name the 'aria-controls' and the href should also be named the same - Bootstrap js/jQuery uses this to find and open the correct tab-pane with the matching id.

     

    Check out the default Bootstrap 4 code/documentation listed at the website:

     

    <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
    </ul>
    <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
    </div>


    Am I missing the point? The subject of this topic is

    Aria controls error

    how can you continue to ignore this issue?

     

    The following is cited in the linked document that I quoted:

    Note that navigation bars, even if visually styled as tabs with the .nav-tabs class, should not be given role="tablist", role="tab" or role="tabpanel" attributes.

     

    For a nore elaborate explanation: https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html

    2 replies

    BenPleysier
    BenPleysier
    Adobe Expert
    June 15, 2021

    See https://getbootstrap.com/docs/5.0/components/navs-tabs/#regarding-accessibility

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      O
      osgood_
      Brainiac
      June 14, 2021

       

       

      aria-controls="hats"

       

       

      Should be:

       

       

      aria-controls="pane6"

       

       

      Same as your panel ID

       

      Although 'hats' is probably more descriptive than 'pane6' so you could change your naming so its the other way around, then change <a href="#pane6'> to <a href="#hats">

      W
      Weat01Author
      Inspiring
      June 15, 2021

      Hi Ben,

      Thank you for this - just to clarify - for both the tabs and the dropdown tabs -  then do I change as follows (the code below is the original code, for reference):

      For the second tab:

      href changes to #hats, id changes to pane2

      For the panel content correponding to the second tab:

       id changed to pane2 and aria-labelled changes to pane2

      <li class="nav-item"> <a class="nav-link" href="#paneTwo1" role="tab" id="hatstab1" data-toggle="tab" aria-controls="hats">Tab 2</a> </li>

 <div role="tabpanel" class="tab-pane fade" id="paneTwo1" aria-labelledby="hatstab1">
	      <p>Content 2</p>

      And for the drop down - let's say it's the THIRD dropdown tab pane, already having two previous dropdown panes before it:

      in the li class, href remains as it is

      in the div class, and the first <a class>, href changes to pane3dropdown1, id changes to dropdownshoestab3

      in the second <a class>, href changes to pane3dropdown2, id changes to dropdownboots3

      (if there was a 3rd class, href would change to pane3dropdown3, and id change to dropdownboots4?)

       

      in the 1st corresponding tabcontent pane,

      id changes to pane3dropdown1, aria-labelled by dropdownshoestab3

      and for the 2nd corresponding dropdown pane,

      id changes to pane3dropdown2, aria-labelled by dropdownbootstab3

      (and a third dropdown pane 

      id changes to pane3dropdown3, aria-labelled by dropdownbootstab4  )?

      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Tab 3 Dropdown </a>
	      <div class="dropdown-menu"> <a class="dropdown-item" href="#tabDropDownOne1" role="tab" id="dropdownshoestab1" data-toggle="tab" aria-controls="dropdownShoes">Dropdown Link 1</a> <a class="dropdown-item" href="#tabDropDownTwo1" role="tab" id="dropdownbootstab1" data-toggle="tab" aria-controls="dropdownBoots">Dropdown Link 2</a> </div>

  <div role="tabpanel" class="tab-pane fade" id="tabDropDownOne1" aria-labelledby="dropdownshoestab1">
	      <p>Dropdown content#1</p>
        </div>
	    <div role="tabpanel" class="tab-pane fade" id="tabDropDownTwo1" aria-labelledby="dropdownbootstab1">
	      <p>Dropdown content#2</p>

       

      BenPleysier
      BenPleysier
      Adobe Expert
      June 16, 2021

      Then it must appear in 2 locations on the website where the code differs and where aria is used supposedly incorrectly according to the w3.org website. I'll try and locate it later, going for a beer now for a couple of hours while we still have good weather.

       

      The problem when deploying aria it has to be introduced professional by an accessibility expert which costs more money. I would not trust a framework to get it right and if its not right then its pointless to include it.


      Enjoy!

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices