E-mail List Archives
Thread: aria-describedby
Number of posts in this thread: 8 (In chronological order)
From: Jesse Hausler
Date: Fri, Feb 10 2012 6:12PM
Subject: aria-describedby
No previous message | Next message →
Having troubles with aria-describedby. Maybe someone here can help.
I have a form that has a label, help text, and depending on validation rules it may have an error message as well.
I've read through ARIA spec and blogs etc and came up with this:
<label for="dname">Domain name</label>
<input id="dname" type="text" aria-describedby="helptext win">
<span id="helptext">use format: something.com</span>
<div id="win">Success! Domain name available</div>
The problem is, it doesn't work. JAWS13 with FF10 or Chrome16 only reads the label text: Domain Name. I can't actually get IE to work with JAWS, so no luck there either.
It has to do with the second value in the aria-describedby attribute. When I remove "win", then it reads my helptext (and vice-versa).
Thanks,
Jesse
---
Jesse Hausler
Sr. Accessibility Specialist | salesforce.com<http://www.salesforce.com/>;
Tel (415) 536-8902 | Fax (415) 944-1762
From: Ryan Hemphill
Date: Fri, Feb 10 2012 6:21PM
Subject: Re: aria-describedby
← Previous message | Next message →
You might try aria-labelledby.
Ryan
On Fri, Feb 10, 2012 at 8:11 PM, Jesse Hausler < = EMAIL ADDRESS REMOVED = >wrote:
> Having troubles with aria-describedby. Maybe someone here can help.
>
> I have a form that has a label, help text, and depending on validation
> rules it may have an error message as well.
>
> I've read through ARIA spec and blogs etc and came up with this:
> <label for="dname">Domain name</label>
> <input id="dname" type="text" aria-describedby="helptext win">
> <span id="helptext">use format: something.com</span>
> <div id="win">Success! Domain name available</div>
>
> The problem is, it doesn't work. JAWS13 with FF10 or Chrome16 only reads
> the label text: Domain Name. I can't actually get IE to work with JAWS, so
> no luck there either.
>
> It has to do with the second value in the aria-describedby attribute. When
> I remove "win", then it reads my helptext (and vice-versa).
>
> Thanks,
> Jesse
>
> ---
> Jesse Hausler
> Sr. Accessibility Specialist | salesforce.com<http://www.salesforce.com/>;
> Tel (415) 536-8902 | Fax (415) 944-1762
>
>
From: Jesse Hausler
Date: Fri, Feb 10 2012 6:45PM
Subject: Re: aria-describedby
← Previous message | Next message →
I looked into that and read that it's poor form to use a <label> and aria-labbeledby at the same time. Even so, I tried using both, each getting one item per attribute. This didn't work either, as it only announced, "Success! ..."
<label for="dname">Domain name</label>
<input id="dname" type="text" aria-describedby="helptext" aria-labelledby="win">
<span id="helptext">use format: something.com</span>
<div id="win">Success! Domain name available</div>
Thanks for the reply.
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Ryan Hemphill
Sent: Friday, February 10, 2012 5:21 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] aria-describedby
You might try aria-labelledby.
Ryan
On Fri, Feb 10, 2012 at 8:11 PM, Jesse Hausler < = EMAIL ADDRESS REMOVED = >wrote:
> Having troubles with aria-describedby. Maybe someone here can help.
>
> I have a form that has a label, help text, and depending on validation
> rules it may have an error message as well.
>
> I've read through ARIA spec and blogs etc and came up with this:
> <label for="dname">Domain name</label>
> <input id="dname" type="text" aria-describedby="helptext win">
> <span id="helptext">use format: something.com</span>
> <div id="win">Success! Domain name available</div>
>
> The problem is, it doesn't work. JAWS13 with FF10 or Chrome16 only reads
> the label text: Domain Name. I can't actually get IE to work with JAWS, so
> no luck there either.
>
> It has to do with the second value in the aria-describedby attribute. When
> I remove "win", then it reads my helptext (and vice-versa).
>
> Thanks,
> Jesse
>
> ---
> Jesse Hausler
> Sr. Accessibility Specialist | salesforce.com<http://www.salesforce.com/>;
> Tel (415) 536-8902 | Fax (415) 944-1762
>
>
From: Vincent Young
Date: Fri, Feb 10 2012 7:24PM
Subject: Re: aria-describedby
← Previous message | Next message →
I'd probably do something like this:
<label for="input" id="label">Input Label</label>
<input id="input" role="input" aria-describedby="help success" />
<label for="input" id="help">Help Text</label>
<div><label for="input" id="success">Success Text</label></div>
Decent support, but it all depends on your AT requirements. Form is
important and yeah you always want to try to achieve standards, but often
what is the most important is the here and now and how users are able to
perceive your content.
On Fri, Feb 10, 2012 at 5:45 PM, Jesse Hausler < = EMAIL ADDRESS REMOVED = >wrote:
> I looked into that and read that it's poor form to use a <label> and
> aria-labbeledby at the same time. Even so, I tried using both, each getting
> one item per attribute. This didn't work either, as it only announced,
> "Success! ..."
>
> <label for="dname">Domain name</label>
> <input id="dname" type="text" aria-describedby="helptext"
> aria-labelledby="win">
> <span id="helptext">use format: something.com</span>
> <div id="win">Success! Domain name available</div>
>
> Thanks for the reply.
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = [mailto:
> = EMAIL ADDRESS REMOVED = ] On Behalf Of Ryan Hemphill
> Sent: Friday, February 10, 2012 5:21 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] aria-describedby
>
> You might try aria-labelledby.
>
> Ryan
>
> On Fri, Feb 10, 2012 at 8:11 PM, Jesse Hausler < = EMAIL ADDRESS REMOVED =
> >wrote:
>
> > Having troubles with aria-describedby. Maybe someone here can help.
> >
> > I have a form that has a label, help text, and depending on validation
> > rules it may have an error message as well.
> >
> > I've read through ARIA spec and blogs etc and came up with this:
> > <label for="dname">Domain name</label>
> > <input id="dname" type="text" aria-describedby="helptext win">
> > <span id="helptext">use format: something.com</span>
> > <div id="win">Success! Domain name available</div>
> >
> > The problem is, it doesn't work. JAWS13 with FF10 or Chrome16 only reads
> > the label text: Domain Name. I can't actually get IE to work with JAWS,
> so
> > no luck there either.
> >
> > It has to do with the second value in the aria-describedby attribute.
> When
> > I remove "win", then it reads my helptext (and vice-versa).
> >
> > Thanks,
> > Jesse
> >
> > ---
> > Jesse Hausler
> > Sr. Accessibility Specialist | salesforce.com<http://www.salesforce.com/
> >
> > Tel (415) 536-8902 | Fax (415) 944-1762
> >
> >
From: Jeevan Reddy
Date: Mon, Feb 13 2012 3:30AM
Subject: Re: aria-describedby
← Previous message | Next message →
probably it seems to be a bug in JAWS 12/13 in handling multiple
values for the aria-describedby.
in the context of the example, the user requires label text to be
read, help text is optional to be read(some times optional text is
critical), and once the user finishes inputing the status should be
read.
so my suggestion is to use help text with the aria-describedby and use
aria-live regions to update the status to the user as follow.
<label for="dname">Domain name</label>
<input id="dname" type="text" aria-describedby="helptext">
<span id="helptext">use format: something.com</span>
<div id="win" aria-live="assertive" aria-atomic="true">Success!
Domain name available</div>
Best Regards,
Jeevan reddy.
On 2/11/12, Vincent Young < = EMAIL ADDRESS REMOVED = > wrote:
> I'd probably do something like this:
>
> <label for="input" id="label">Input Label</label>
> <input id="input" role="input" aria-describedby="help success" />
> <label for="input" id="help">Help Text</label>
> <div><label for="input" id="success">Success Text</label></div>
>
> Decent support, but it all depends on your AT requirements. Form is
> important and yeah you always want to try to achieve standards, but often
> what is the most important is the here and now and how users are able to
> perceive your content.
>
> On Fri, Feb 10, 2012 at 5:45 PM, Jesse Hausler
> < = EMAIL ADDRESS REMOVED = >wrote:
>
>> I looked into that and read that it's poor form to use a <label> and
>> aria-labbeledby at the same time. Even so, I tried using both, each
>> getting
>> one item per attribute. This didn't work either, as it only announced,
>> "Success! ..."
>>
>> <label for="dname">Domain name</label>
>> <input id="dname" type="text" aria-describedby="helptext"
>> aria-labelledby="win">
>> <span id="helptext">use format: something.com</span>
>> <div id="win">Success! Domain name available</div>
>>
>> Thanks for the reply.
>>
>> -----Original Message-----
>> From: = EMAIL ADDRESS REMOVED = [mailto:
>> = EMAIL ADDRESS REMOVED = ] On Behalf Of Ryan Hemphill
>> Sent: Friday, February 10, 2012 5:21 PM
>> To: WebAIM Discussion List
>> Subject: Re: [WebAIM] aria-describedby
>>
>> You might try aria-labelledby.
>>
>> Ryan
>>
>> On Fri, Feb 10, 2012 at 8:11 PM, Jesse Hausler < = EMAIL ADDRESS REMOVED =
>> >wrote:
>>
>> > Having troubles with aria-describedby. Maybe someone here can help.
>> >
>> > I have a form that has a label, help text, and depending on validation
>> > rules it may have an error message as well.
>> >
>> > I've read through ARIA spec and blogs etc and came up with this:
>> > <label for="dname">Domain name</label>
>> > <input id="dname" type="text" aria-describedby="helptext win">
>> > <span id="helptext">use format: something.com</span>
>> > <div id="win">Success! Domain name available</div>
>> >
>> > The problem is, it doesn't work. JAWS13 with FF10 or Chrome16 only reads
>> > the label text: Domain Name. I can't actually get IE to work with JAWS,
>> so
>> > no luck there either.
>> >
>> > It has to do with the second value in the aria-describedby attribute.
>> When
>> > I remove "win", then it reads my helptext (and vice-versa).
>> >
>> > Thanks,
>> > Jesse
>> >
>> > ---
>> > Jesse Hausler
>> > Sr. Accessibility Specialist | salesforce.com<http://www.salesforce.com/
>> >
>> > Tel (415) 536-8902 | Fax (415) 944-1762
>> >
>> >
From: Steve Faulkner
Date: Mon, Feb 13 2012 4:27AM
Subject: Re: aria-describedby
← Previous message | Next message →
Hi Jesse,
I tested your code with Firefox 9.01 and JAWS 13, worked fine.
Chrome has a known bug with describedby.(
http://code.google.com/p/chromium/issues/detail?id=89195)
Also note that descibedby ONLY works with IE9+ and mulitple values for
aria-labelledby only works with IE9+
Furthermore IE requires that the referenced elements are either 'accessible
elements' (
http://msdn.microsoft.com/en-us/library/gg701963%28v=vs.85%29.aspx#Accessible_HTML_Elements
) or have tabdindex"-1" added.
so for your example you could do:
<label for="dname">Domain name</label>
<input id="dname" type="text" aria-describedby="helptext win">
<span id="helptext" tabindex="-1">use format: something.com</span>
<div id="win" tabindex="-1">Success! Domain name available</div>
or
<label for="dname">Domain name</label>
<input id="dname" type="text" aria-describedby="helptext win">
<label id="helptext">use format: something.com</label>
<label id="win">Success! Domain name available</label>
regards
stevef
On 11 February 2012 01:11, Jesse Hausler < = EMAIL ADDRESS REMOVED = > wrote:
> Having troubles with aria-describedby. Maybe someone here can help.
>
> I have a form that has a label, help text, and depending on validation
> rules it may have an error message as well.
>
> I've read through ARIA spec and blogs etc and came up with this:
> <label for="dname">Domain name</label>
> <input id="dname" type="text" aria-describedby="helptext win">
> <span id="helptext">use format: something.com</span>
> <div id="win">Success! Domain name available</div>
>
> The problem is, it doesn't work. JAWS13 with FF10 or Chrome16 only reads
> the label text: Domain Name. I can't actually get IE to work with JAWS, so
> no luck there either.
>
> It has to do with the second value in the aria-describedby attribute. When
> I remove "win", then it reads my helptext (and vice-versa).
>
> Thanks,
> Jesse
>
> ---
> Jesse Hausler
> Sr. Accessibility Specialist | salesforce.com<http://www.salesforce.com/>;
> Tel (415) 536-8902 | Fax (415) 944-1762
>
>
From: Jesse Hausler
Date: Thu, Feb 16 2012 11:57AM
Subject: Re: aria-describedby
← Previous message | Next message →
Thanks everyone for your advise on this problem. I'll play around and let you know what I come up with.
Jesse
On 2/13/12 3:28 AM, "Steve Faulkner" < = EMAIL ADDRESS REMOVED = > wrote:
Hi Jesse,
I tested your code with Firefox 9.01 and JAWS 13, worked fine.
Chrome has a known bug with describedby.(
http://code.google.com/p/chromium/issues/detail?id=89195)
Also note that descibedby ONLY works with IE9+ and mulitple values for
aria-labelledby only works with IE9+
Furthermore IE requires that the referenced elements are either 'accessible
elements' (
http://msdn.microsoft.com/en-us/library/gg701963%28v=vs.85%29.aspx#Accessible_HTML_Elements
) or have tabdindex"-1" added.
so for your example you could do:
<label for="dname">Domain name</label>
<input id="dname" type="text" aria-describedby="helptext win">
<span id="helptext" tabindex="-1">use format: something.com</span>
<div id="win" tabindex="-1">Success! Domain name available</div>
or
<label for="dname">Domain name</label>
<input id="dname" type="text" aria-describedby="helptext win">
<label id="helptext">use format: something.com</label>
<label id="win">Success! Domain name available</label>
regards
stevef
On 11 February 2012 01:11, Jesse Hausler < = EMAIL ADDRESS REMOVED = > wrote:
> Having troubles with aria-describedby. Maybe someone here can help.
>
> I have a form that has a label, help text, and depending on validation
> rules it may have an error message as well.
>
> I've read through ARIA spec and blogs etc and came up with this:
> <label for="dname">Domain name</label>
> <input id="dname" type="text" aria-describedby="helptext win">
> <span id="helptext">use format: something.com</span>
> <div id="win">Success! Domain name available</div>
>
> The problem is, it doesn't work. JAWS13 with FF10 or Chrome16 only reads
> the label text: Domain Name. I can't actually get IE to work with JAWS, so
> no luck there either.
>
> It has to do with the second value in the aria-describedby attribute. When
> I remove "win", then it reads my helptext (and vice-versa).
>
> Thanks,
> Jesse
>
> ---
> Jesse Hausler
> Sr. Accessibility Specialist | salesforce.com<http://www.salesforce.com/>;
> Tel (415) 536-8902 | Fax (415) 944-1762
>
>
From: Jesse Hausler
Date: Thu, Feb 16 2012 1:48PM
Subject: Re: aria-describedby
← Previous message | No next message
Steve,
You're right, my original code does appear to be working now. Strange, but satisfying.
I'll add the tabindex="-1" and go with that.
Thanks again,
Jesse
On 2/13/12 3:28 AM, "Steve Faulkner" < = EMAIL ADDRESS REMOVED = > wrote:
Hi Jesse,
I tested your code with Firefox 9.01 and JAWS 13, worked fine.
Chrome has a known bug with describedby.(
http://code.google.com/p/chromium/issues/detail?id=89195)
Also note that descibedby ONLY works with IE9+ and mulitple values for
aria-labelledby only works with IE9+
Furthermore IE requires that the referenced elements are either 'accessible
elements' (
http://msdn.microsoft.com/en-us/library/gg701963%28v=vs.85%29.aspx#Accessible_HTML_Elements
) or have tabdindex"-1" added.
so for your example you could do:
<label for="dname">Domain name</label>
<input id="dname" type="text" aria-describedby="helptext win">
<span id="helptext" tabindex="-1">use format: something.com</span>
<div id="win" tabindex="-1">Success! Domain name available</div>
or
<label for="dname">Domain name</label>
<input id="dname" type="text" aria-describedby="helptext win">
<label id="helptext">use format: something.com</label>
<label id="win">Success! Domain name available</label>
regards
stevef
On 11 February 2012 01:11, Jesse Hausler < = EMAIL ADDRESS REMOVED = > wrote:
> Having troubles with aria-describedby. Maybe someone here can help.
>
> I have a form that has a label, help text, and depending on validation
> rules it may have an error message as well.
>
> I've read through ARIA spec and blogs etc and came up with this:
> <label for="dname">Domain name</label>
> <input id="dname" type="text" aria-describedby="helptext win">
> <span id="helptext">use format: something.com</span>
> <div id="win">Success! Domain name available</div>
>
> The problem is, it doesn't work. JAWS13 with FF10 or Chrome16 only reads
> the label text: Domain Name. I can't actually get IE to work with JAWS, so
> no luck there either.
>
> It has to do with the second value in the aria-describedby attribute. When
> I remove "win", then it reads my helptext (and vice-versa).
>
> Thanks,
> Jesse
>
> ---
> Jesse Hausler
> Sr. Accessibility Specialist | salesforce.com<http://www.salesforce.com/>;
> Tel (415) 536-8902 | Fax (415) 944-1762
>
>