WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Greg Gamble
Date: May 10, 2013 11:18AM

I was validating a new page (It's an .aspx page) and I received the above error, which brings up the question ...

When using the aria-labelledby, does the referenced id(s) need to be visible to the user, like in an error message that has not been triggered yet?

Some code:
Before the validator rfvFName is fired it is hidden with display: none;

*** Before Error Fired ***

<div class="control-group">
<label for=" txtFName" id="lblFName" class="control-label"><span class="text-error" style="font-size: large;">*</span> First Name:</label>
<div class="controls">
<input maxlength="15" id="txtFName" placeholder="required" aria-required="true" aria-labelledby="rfvFName" type="text">
<span id="rfvFName" class="label label-important" role="alert" style="display:none;">First name required</span>
</div>
</div>

*** After Error Fired ***

<div class="control-group">
<label for="txtFName" id="lblFName" class="control-label"><span class="text-error" style="font-size: large;">*</span> First Name:</label>
<div class="controls">
<input maxlength="15" id="txtFName" placeholder="required" aria-required="true" aria-labelledby="rfvFName" type="text">
<span id=" rfvFName" class="label label-important" role="alert">First name required</span>
</div>


Greg Gamble
SBCTC - Olympia | Information Services