E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 11 (In chronological order)

From: Greg Gamble
Date: Fri, May 10 2013 11:18AM
Subject: The aria-labelledby attribute must point to an element in the same document.
No previous message | Next message →

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

From: Jukka K. Korpela
Date: Sat, May 11 2013 2:42AM
Subject: Re: The aria-labelledby attribute must point to an element in the same document.
← Previous message | Next message →

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

From: Greg Gamble
Date: Mon, May 13 2013 4:51PM
Subject: Re: The aria-labelledby attribute must point to an element in the same document.
← Previous message | Next message →

The other errors are cut and paste errors ... nothing real. And I'm going to assume, since the span tag is in the DOM and just set to display: none that its fine. Just a Validator glitch, along the lines of adding the meta tag for " X-UA-Compatible".

This brings up a clarification question ... are span tags or labels with display: none read by screen readers?

Greg

From: Dave Merrill
Date: Tue, May 14 2013 5:30AM
Subject: Re: The aria-labelledby attribute must point to an element in the same document.
← Previous message | Next message →

I'm not an expert in this area, but my understanding is this:

- Screen readers generally don't read text set to display: none or hidden,
via either inline styling or css classes.

- They generally DO read text that's positioned off-screen, say above or to
the left 3000px, so that's what you want if you want to hide something for
sighted users, but expose it to assistive technologies.

- That said, it's generally best to strive for content that works for both
sighted and assisted users, wherever possible.

- Labels are much preferred over spans for identifying fields, because the
association to a field is baked into the label element. The tie to a field
can be done either by wrapping the label around it, or by pointing to the
field's id with the 'for' attribute, which I don't believe is valid for any
other tags.

Hope that helps, others please correct me if I'm wrong about any of this.

Dave Merrill

From: Greg Gamble
Date: Tue, May 14 2013 9:08AM
Subject: Re: The aria-labelledby attribute must point to an element in the same document.
← Previous message | Next message →

Thanks Dave,
I'm working with Asp.Net validators using Visual Studio 2010.

Last question ... When a span tag with role="Alert" goes from display:none to visible, is it supposed to be perceived by the Screen Reader?

I have NVDA installed on my local computer but cannot find a Forms mode. When I trigger the validators to show an error they visibly show but there is no indication from NVDA that anything happened. What should happen?

From: Dave Merrill
Date: Tue, May 14 2013 10:21AM
Subject: Re: The aria-labelledby attribute must point to an element in the same document.
← Previous message | Next message →

Sorry, but I'm a ColdFusion/JS/SQL/CSS guy, zero experience in the .Net
world, so no direct help there.

I'm also very inexperienced with NVDA, and moderately new to accessibility
in general, so I'm afraid I have no real answers for you on this level.

From: Jonathan C. Cohn
Date: Tue, May 14 2013 3:34PM
Subject: Re: The aria-labelledby attribute must point to an element in the same document.
← Previous message | Next message →

What are your expectations? Do you want immediate feedback when the visibility is changed? If that is what you are looking for them you should look at active regions or setting focus on the now visible span.

From: Steve Faulkner
Date: Tue, May 14 2013 4:18PM
Subject: Re: The aria-labelledby attribute must point to an element in the same document.
← Previous message | Next message →

hi greg this post may be of help:
http://blog.paciellogroup.com/2012/06/html5-accessibility-chops-aria-rolealert-browser-support/

--

Regards

SteveF

From: Greg Gamble
Date: Tue, May 14 2013 4:34PM
Subject: Re: The aria-labelledby attribute must point to an elementin the same document.
← Previous message | Next message →

My expectations? Just that a user be notified of a form error. My skills on hearing this from NVDA are either extremely lacking or I'm not doing it right.

My starting form markup is good ... that I know. It's when a user is filling out a form and either enters a bad value and/or does not enter a required one, and gets a submission error ... do they see it or are they even notified of it?

It was my understanding that when an error message is displayed it needed to be tied to the input field that caused the error. That is why I have role='alert' on the error message to get the attention, and an aria-labelledby='errormessageID' on the input field to tie the now visible error message to the input field.

From: Greg Gamble
Date: Tue, May 14 2013 4:41PM
Subject: Re: The aria-labelledby attribute must point to an element in the same document.
← Previous message | Next message →

SteveF,

Thanks for the link ... that’s one of the resources I used when I first started working on this issue ... and what I'm doing is close to method 3.

Not 100%, but darn close. Now if I can just verify its working ... I'll be a happy camper.

Greg

From: Bryan Garaventa
Date: Tue, May 14 2013 4:58PM
Subject: Re: The aria-labelledby attribute must point to an element in the same document.
← Previous message | No next message

Hi,
This recently came up with a client, so if it's helpful, I've pasted the
response below.


Since attachments aren't allowed, the script referred to in the message is
at
http://whatsock.com/tmp/unobtrusive_announce.js.txt
If it's of help.

I've verified this method works correctly using JAWS 12 through 14 in IE8
and 9, in Firefox, and in Chrome;
Using NVDA in IE 8 and 9, in Firefox, and in Chrome;
And using Voiceover in iOS Safari for both iPad/iPhone.

----- Original Message -----
Sent: Friday, May 10, 2013 10:25 AM
Subject: Re: Cross-browser error messaging


That's no problem.

Actually I've stopped developing the external announce method, since this
is already built into AccDC with a more powerful feature set. I've attached
the old method though in a zip, which is the shortened version of what used
to be in AccDC a few years back.

You can read about what it does and how it works at
http://whatsock.com/tsg
Within the section "Web Chat" under Accessible Component Modules.

This uses a concept I refer to as Unobtrusive Announcement, meaning that
what is announced is not bound to the element that is being referenced.

This makes it possible to announce anything, no matter where it is or what
it is, as long as it is textual.

You can see an example of why this is useful by visiting
http://whatsock.com/modules/form_validator_module/demo.htm

Using an iOS touch screen device like an iPhone with Voiceover running,
tap the field "What is the Latin name for our planet?" to start editing. As
you type letters, you will hear Voiceover announce the dynamic help text
that can guide your responses.