Menu icon Foundation
F6 Sites Accordion aria errors

We are using accordion everywhere on our site and we keep getting aria errors when we run the checker.

The weird thing is that the checker says there is no ID corresponding to an aria-labelledby value.  But when I view the source the items match.

The weird thing is that my code has id="foo-heading" and arialabelledby="foo-heading'.  But what it says is missing is ID="foo-label".  There's no "foo-label" in my code anywhere.

The code:

 

<section id="acc1" class="accordion" data-accordion data-allow-all-closed="true">
				
 <div class="accordion-item" data-accordion-item role="tablist">
<a href="#forward" id="forward-heading" aria-controls="forward" role="tab" class="accordion-title">01-01-04 Forward</a>

    	<div id="forward" aria-labelledby="forward-heading" class="accordion-content" role="tabpanel" data-tab-content>
  	<p>content</p>
    	</div>
<!-- close the answer div -->
	</div>
</section>

 

So I assume the JS is adding the *-label somewhere.

 

ARIAF6 sitesaccordion

We are using accordion everywhere on our site and we keep getting aria errors when we run the checker.

The weird thing is that the checker says there is no ID corresponding to an aria-labelledby value.  But when I view the source the items match.

The weird thing is that my code has id="foo-heading" and arialabelledby="foo-heading'.  But what it says is missing is ID="foo-label".  There's no "foo-label" in my code anywhere.

The code:

 

<section id="acc1" class="accordion" data-accordion data-allow-all-closed="true">
				
 <div class="accordion-item" data-accordion-item role="tablist">
<a href="#forward" id="forward-heading" aria-controls="forward" role="tab" class="accordion-title">01-01-04 Forward</a>

    	<div id="forward" aria-labelledby="forward-heading" class="accordion-content" role="tabpanel" data-tab-content>
  	<p>content</p>
    	</div>
<!-- close the answer div -->
	</div>
</section>

 

So I assume the JS is adding the *-label somewhere.

 

Julie Lewis over 2 years ago

Now this is odd.  When I use inspector to look at the code, it has changed id="forward-heading" to id="forward-label" AND

aria-labelledby="forward-heading" to aria-labelledby="forward-label".

 

Why does it do that?