WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Jukka K. Korpela
Date: May 11, 2013 2:42AM

2013-05-10 20:18, Greg Gamble wrote:

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

You are apparently referring to the message "The aria-labelledby
attribute must point to an element in the same document", which is an
error message issued by an HTML5 validator, i.e. the page violates the
rules defined in an HTML5 draft. Beware that HTML5 is work in progress
and tends to change daily and HTML5 validators are experimental software.

In this case, the error message is appropriate; it is based on WAI-ARIA
1.0 CR, where the value of the aria-labelledby attribute is defined as
an ID reference list:
http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby
And an ID reference must refer to the ID attribute value of another
element in the same document.

> 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?

The validator error message is based purely on syntax and does not refer
to any visibility issues. It simply says that when you have
aria-labelledby="rfvFName", then some element on the page must have the
attribute id="rfvFName".

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

The syntax rule does not prevent that in any way.

> *** 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>

An HTML5 validator should report other syntax errors here, too. There
are two <div> start tags and only one </div> end tag, though this might
be just a copy and paste error. But http://validator.nu also says:

QUOTE
Error: Bad value rfvFName for attribute id on element span: An ID must
not contain whitespace.

From line 11, column 3; to line 11, column 66

"text">↩ <span id=" rfvFName" class="label label-important"
role="alert">First

Syntax of id:
An ID consists of at least one character but must not contain any
whitespace.
UNQUOTE

So the syntax error is caused just by the leading space character in the
attribute value " rfvFName". By HTML5 rules, a space is not allowed in
an id attribute value.

Yucca