I'm running an automated accessibility test on my site and getting an error for a tooltip element which uses Zurb Foundation's tooltip (v6.2.3).
The issue is noted as "This element has an aria-describedby attribute value that includes one or more invalid ids." As far as I can tell, the div that it's described by does have a valid id, but since it's generated by JavaScript, perhaps that's causing the issue?
Here's what the code looks like in my editor:
<span data-tooltip aria-haspopup="true" class="has-tip" title="I'm on bottom and the default position.">"tip-bottom"</span><br>
And on render, Foundation's JavaScript changes it to:
<span data-tooltip="77rhf0-tooltip" aria-haspopup="true" class="has-tip" title="" aria-describedby="vd07t8-tooltip" data-yeti-box="vd07t8-tooltip" data-toggle="vd07t8-tooltip" data-resize="vd07t8-tooltip">"tip-bottom"</span>
Foundation's JavaScript also generates at the bottom of the document:
<div class="tooltip" role="tooltip" aria-hidden="true" data-is-active="false" data-is-focus="false" id="vd07t8-tooltip" style="display: none; top: 421.812px; left: 410.766px; opacity: 1;">I'm on bottom and the default position.</div>
Where the ID of the tooltip is randomly generated.
From zurb's JS Tooltip, where it's using a plugin to create the ID name:
var elemId = this.$element.attr('aria-describedby') || Foundation.GetYoDigits(6, 'tooltip');
As far as I can tell, it is a valid ID and should be working correctly. I assume if my testing tool has trouble picking up the ID, assistive technology would also run into an issue.
My question is: would this OK to leave as is, or is there genuinely an error here that would cause an issue with assistive technology?
I am fairly new to using ARIA attributes, so apologies if this question is confusing or poorly worded. Thank you!
My question is: would this OK to leave as is, or is there genuinely an error here that would cause an issue with assistive technology?
Your aria-describedby is added with javascript, and so is the div. Screenreaders read the generated DOM. So everything is ok.
It would have helped if you had indicated which tool you use because, the error might be that this tool is not capable to retrieve the div due to its hidden state, but this is not a problem from a screenreader point of view. Note that having aria-hidden=true does not make any difference.