E-mail List Archives
Thread: form select dropdown - label, title or aria?
Number of posts in this thread: 13 (In chronological order)
From: Diane.Tomlins@hcahealthcare.com
Date: Tue, Sep 08 2015 1:49PM
Subject: form select dropdown - label, title or aria?
No previous message | Next message →
I have a form that I'm working on to make it more accessible and it has a select box on it like this:
<select class="form-control" name="quality_reporting_facility" id="quality_reporting_facility" aria-labelledby="Please Choose a Facility">
Example of the form is here: http://regionalhospital-hut.ehctest.com/about/quality-safety/
We don't want a separate visible label that repeats the same as what's there for the default option value - Please Choose a Facility or Please Choose a Category
Digging around, I find that I can use the title attribute, aria-label, or aria-labelledby.
Which is better, or does it really matter? The WAVE tool complains there is no <label>, but doesn't recognize either the aria-label nor the aria-labelledby when I add one or the other, although the both are noted as acceptable in the additional information.
I know I could also add the label and pull it off-screen with css, but I'd rather avoid that if possible.
Thanks!
From: Aaron Cannon
Date: Tue, Sep 08 2015 2:16PM
Subject: Re: form select dropdown - label, title or aria?
← Previous message | Next message →
Forget the title, at least for screen reader users. Many screen
readers will ignore it in certain circumstances. If you use
aria-labelledby, you will need to give it an ID of an HTML element
that contains the label of the field. At that point, you might as
well just use a label.
If you're absolutely certain you don't want to move the label off
screen, then you're only real option is to use an aria-label
attribute.
Aaron
On 9/8/15, = EMAIL ADDRESS REMOVED =
< = EMAIL ADDRESS REMOVED = > wrote:
> I have a form that I'm working on to make it more accessible and it has a
> select box on it like this:
>
> <select class="form-control" name="quality_reporting_facility"
> id="quality_reporting_facility" aria-labelledby="Please Choose a Facility">
> Example of the form is here:
> http://regionalhospital-hut.ehctest.com/about/quality-safety/
>
> We don't want a separate visible label that repeats the same as what's there
> for the default option value - Please Choose a Facility or Please Choose a
> Category
>
> Digging around, I find that I can use the title attribute, aria-label, or
> aria-labelledby.
>
> Which is better, or does it really matter? The WAVE tool complains there is
> no <label>, but doesn't recognize either the aria-label nor the
> aria-labelledby when I add one or the other, although the both are noted as
> acceptable in the additional information.
>
> I know I could also add the label and pull it off-screen with css, but I'd
> rather avoid that if possible.
>
> Thanks!
>
>
> > > > >
From: Moore,Michael (Accessibility) (HHSC)
Date: Tue, Sep 08 2015 2:32PM
Subject: Re: form select dropdown - label, title or aria?
← Previous message | Next message →
Aaron,
Which screen readers do not support the title in form fields when there is not another means of determining the accessible label for the item? I thought that this was universally supported and provided more backwards compatibility than aria-label.
Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Aaron Cannon
Sent: Tuesday, September 08, 2015 3:17 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] form select dropdown - label, title or aria?
Forget the title, at least for screen reader users. Many screen readers will ignore it in certain circumstances. If you use aria-labelledby, you will need to give it an ID of an HTML element that contains the label of the field. At that point, you might as well just use a label.
If you're absolutely certain you don't want to move the label off screen, then you're only real option is to use an aria-label attribute.
Aaron
On 9/8/15, = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = > wrote:
> I have a form that I'm working on to make it more accessible and it
> has a select box on it like this:
>
> <select class="form-control" name="quality_reporting_facility"
> id="quality_reporting_facility" aria-labelledby="Please Choose a
> Facility"> Example of the form is here:
> http://regionalhospital-hut.ehctest.com/about/quality-safety/
>
> We don't want a separate visible label that repeats the same as what's
> there for the default option value - Please Choose a Facility or
> Please Choose a Category
>
> Digging around, I find that I can use the title attribute, aria-label,
> or aria-labelledby.
>
> Which is better, or does it really matter? The WAVE tool complains
> there is no <label>, but doesn't recognize either the aria-label nor
> the aria-labelledby when I add one or the other, although the both are
> noted as acceptable in the additional information.
>
> I know I could also add the label and pull it off-screen with css, but
> I'd rather avoid that if possible.
>
> Thanks!
>
>
> > > archives at http://webaim.org/discussion/archives
> >
From: Aaron Cannon
Date: Tue, Sep 08 2015 2:52PM
Subject: Re: form select dropdown - label, title or aria?
← Previous message | Next message →
That's the problem I have with it. It is too fragile and
unpredictable IMHO. I've seen too many people add titles, assuming
that a screen reader would read them, but often screen readers do not.
This is generally because there is some other label, that is
ambiguous, that causes it not to be read.
Still, you're probably right, and for the sake of compatibility, she
should probably use both a title and an aria-label.
Aaron
On 9/8/15, Moore,Michael (Accessibility) (HHSC)
< = EMAIL ADDRESS REMOVED = > wrote:
> Aaron,
>
> Which screen readers do not support the title in form fields when there is
> not another means of determining the accessible label for the item? I
> thought that this was universally supported and provided more backwards
> compatibility than aria-label.
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission
> Civil Rights Office
> (512) 438-3431 (Office)
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Aaron Cannon
> Sent: Tuesday, September 08, 2015 3:17 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] form select dropdown - label, title or aria?
>
> Forget the title, at least for screen reader users. Many screen readers
> will ignore it in certain circumstances. If you use aria-labelledby, you
> will need to give it an ID of an HTML element that contains the label of the
> field. At that point, you might as well just use a label.
>
> If you're absolutely certain you don't want to move the label off screen,
> then you're only real option is to use an aria-label attribute.
>
> Aaron
>
> On 9/8/15, = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
> wrote:
>> I have a form that I'm working on to make it more accessible and it
>> has a select box on it like this:
>>
>> <select class="form-control" name="quality_reporting_facility"
>> id="quality_reporting_facility" aria-labelledby="Please Choose a
>> Facility"> Example of the form is here:
>> http://regionalhospital-hut.ehctest.com/about/quality-safety/
>>
>> We don't want a separate visible label that repeats the same as what's
>> there for the default option value - Please Choose a Facility or
>> Please Choose a Category
>>
>> Digging around, I find that I can use the title attribute, aria-label,
>> or aria-labelledby.
>>
>> Which is better, or does it really matter? The WAVE tool complains
>> there is no <label>, but doesn't recognize either the aria-label nor
>> the aria-labelledby when I add one or the other, although the both are
>> noted as acceptable in the additional information.
>>
>> I know I could also add the label and pull it off-screen with css, but
>> I'd rather avoid that if possible.
>>
>> Thanks!
>>
>>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > http://webaim.org/discussion/archives
> > > > > >
From: Steve Faulkner
Date: Tue, Sep 08 2015 3:42PM
Subject: Re: form select dropdown - label, title or aria?
← Previous message | Next message →
On 8 September 2015 at 22:52, Aaron Cannon < = EMAIL ADDRESS REMOVED = >
wrote:
> Still, you're probably right, and for the sake of compatibility, she
> should probably use both a title and an aria-label.
>
then you get the accessible name from aria label and accessible description
repeated from the title.
In the abssence of any other source of an accessible name for a control
title works well across browsers and AT.
aria-label is the more semantically correct method and also works well, but
older browsers (IE< 9 or 10) don't support.
details of how it works in browsers are available:
http://www.w3.org/TR/html-aam-1.0/#accessible-name-and-description-calculation
--
Regards
SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;
From: Diane.Tomlins@hcahealthcare.com
Date: Wed, Sep 09 2015 12:35PM
Subject: Re: form select dropdown - label, title or aria?
← Previous message | Next message →
On 8 September 2015 at 3:52pm, Steve Faulkner < <EMAIL REMOVED> >
wrote:
>In the abssence of any other source of an accessible name for a control
>title works well across browsers and AT.
>aria-label is the more semantically correct method and also works well, but
>older browsers (IE< 9 or 10) don't support.
Thanks for the feedback and the link.
For the sites we're currently building, we don't support anything below IE9 anyway (and that will change to 10 soon), and visitors will get an 'outdated browser' message if they land on our sites using an unsupported browser version, so they are notified immediately.
Given that, I think I'll go with the aria-label :)
Regards,
DianeT
(hope I did this right, it's been a really long time since I used a list like this)
From: Jonathan Avila
Date: Wed, Sep 09 2015 1:14PM
Subject: Re: form select dropdown - label, title or aria?
← Previous message | Next message →
[DianeT wrote] Given that, I think I'll go with the aria-label :)
I have two comments that are food for thought and not a criticism. I hope they don't complicate the situation but it's important to consider the non-screen reader implications of the situation.
Currently Dragon Naturally Speaking does not support the aria-label property. So people who use Dragon may not be able to speak the name of the field to focus it. This is a common issue and Dragon users often rely on spoken keyboard interface commands or may be able to use other direct voice commands such as "click list" to focus a select box. Title is better supported by Dragon as far as I know.
When the select field contains a value other than the default explainer value there may be no visual label for the field. WCAG SC 3.3.2 requires visual labels for all user input. It is worth considering this as a potential reason to have a label that is always visually available.
Best Regards,
Jonathan
--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of = EMAIL ADDRESS REMOVED =
Sent: Wednesday, September 09, 2015 2:36 PM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] form select dropdown - label, title or aria?
On 8 September 2015 at 3:52pm, Steve Faulkner < <EMAIL REMOVED> >
wrote:
>In the abssence of any other source of an accessible name for a control
>title works well across browsers and AT.
>aria-label is the more semantically correct method and also works well,
>but older browsers (IE< 9 or 10) don't support.
Thanks for the feedback and the link.
For the sites we're currently building, we don't support anything below IE9 anyway (and that will change to 10 soon), and visitors will get an 'outdated browser' message if they land on our sites using an unsupported browser version, so they are notified immediately.
Given that, I think I'll go with the aria-label :)
Regards,
DianeT
(hope I did this right, it's been a really long time since I used a list like this)
From: Diane.Tomlins@hcahealthcare.com
Date: Wed, Sep 09 2015 2:25PM
Subject: Re: form select dropdown - label, title or aria?
← Previous message | Next message →
September 09, 2015 2:15 PM
[Jonathan wrote]
> Title is better supported by Dragon as far as I know.
>When the select field contains a value other than the default explainer value there may be no visual label for the field.
Good point. Not having actual visual labels for these types of select dropdowns is in a lot of our forms, so adding them now means getting creative so that the default option value and the label aren't redundant. Those that designed and built these forms were thinking the default value would be sufficient, but they were also not well informed about accessibility either.
What kind of usage saturation does Dragon have? I'll need to make my case for changing the way the <select> formatting is done to get actual labels in.
Thanks!
DianeT
From: James Nurthen
Date: Thu, Sep 10 2015 4:18AM
Subject: Re: form select dropdown - label, title or aria?
← Previous message | Next message →
Dragon 13 supports aria-label for some field types (checkboxes, radio
buttons, links, buttons) but does not seem to support it on Inputs and
Selects. It does support aria-labelledby on these types though. Hopefully
Nuance will fix this oversight soon.
On Thu, Sep 10, 2015 at 12:44 AM, Jonathan Avila < = EMAIL ADDRESS REMOVED =
> wrote:
> [DianeT wrote] Given that, I think I'll go with the aria-label :)
>
> I have two comments that are food for thought and not a criticism. I hope
> they don't complicate the situation but it's important to consider the
> non-screen reader implications of the situation.
>
> Currently Dragon Naturally Speaking does not support the aria-label
> property. So people who use Dragon may not be able to speak the name of
> the field to focus it. This is a common issue and Dragon users often rely
> on spoken keyboard interface commands or may be able to use other direct
> voice commands such as "click list" to focus a select box. Title is better
> supported by Dragon as far as I know.
>
> When the select field contains a value other than the default explainer
> value there may be no visual label for the field. WCAG SC 3.3.2 requires
> visual labels for all user input. It is worth considering this as a
> potential reason to have a label that is always visually available.
>
> Best Regards,
>
> Jonathan
>
> --
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group
> = EMAIL ADDRESS REMOVED =
>
> 703-637-8957 (o)
> Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of = EMAIL ADDRESS REMOVED =
> Sent: Wednesday, September 09, 2015 2:36 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: Re: [WebAIM] form select dropdown - label, title or aria?
>
> On 8 September 2015 at 3:52pm, Steve Faulkner < <EMAIL REMOVED> >
> wrote:
> >In the abssence of any other source of an accessible name for a control
> >title works well across browsers and AT.
> >aria-label is the more semantically correct method and also works well,
> >but older browsers (IE< 9 or 10) don't support.
>
> Thanks for the feedback and the link.
>
> For the sites we're currently building, we don't support anything below
> IE9 anyway (and that will change to 10 soon), and visitors will get an
> 'outdated browser' message if they land on our sites using an unsupported
> browser version, so they are notified immediately.
>
> Given that, I think I'll go with the aria-label :)
>
> Regards,
> DianeT
> (hope I did this right, it's been a really long time since I used a list
> like this) > > at http://webaim.org/discussion/archives
> > > > > >
From: deborah.kaplan@suberic.net
Date: Fri, Sep 11 2015 11:38AM
Subject: Re: form select dropdown - label, title or aria?
← Previous message | Next message →
Though sadly, Dragon 14, which was just released, appears to be entirely skin changes, with no new functionality in the engine. It mostly seems to be a release to enable portability and inter-version compatibility, as well as Windows 10 improvements. If they are working on improving recognition and web interoperability, they're not talking about it publicly.
Nuance has a somewhat impenetrable public relations field, so I'm not sure if we can get past it to find out the details.
To be fair, the improvements they've made in aria support a couple of versions ago (from none at all to some) are a pretty major improvement from the point of view of an end-user, so I will come my blessings.
Deborah
On Thu, 10 Sep 2015, James Nurthen wrote:
> Dragon 13 supports aria-label for some field types (checkboxes, radio
> buttons, links, buttons) but does not seem to support it on Inputs and
> Selects. It does support aria-labelledby on these types though. Hopefully
> Nuance will fix this oversight soon.
>
>
From: Maxability Accessibility for all
Date: Mon, Sep 14 2015 3:50AM
Subject: Re: form select dropdown - label, title or aria?
← Previous message | Next message →
I second Jonathan asking to have a visual label. Web accessibility just
does not mean for those who use screen readers or voice recognition
software. Many other individuals such as cognitive difficulties and more
for people without disability also benefit with visual labels. On the other
hand 3.3.2 Labels and Instructions ask to have them.
Make sens?
Thanks & Regards
RP
On Fri, Sep 11, 2015 at 11:08 PM, < = EMAIL ADDRESS REMOVED = > wrote:
> Though sadly, Dragon 14, which was just released, appears to be entirely
> skin changes, with no new functionality in the engine. It mostly seems to
> be a release to enable portability and inter-version compatibility, as well
> as Windows 10 improvements. If they are working on improving recognition
> and web interoperability, they're not talking about it publicly.
>
> Nuance has a somewhat impenetrable public relations field, so I'm not sure
> if we can get past it to find out the details.
>
> To be fair, the improvements they've made in aria support a couple of
> versions ago (from none at all to some) are a pretty major improvement from
> the point of view of an end-user, so I will come my blessings.
>
> Deborah
>
> On Thu, 10 Sep 2015, James Nurthen wrote:
>
> Dragon 13 supports aria-label for some field types (checkboxes, radio
>> buttons, links, buttons) but does not seem to support it on Inputs and
>> Selects. It does support aria-labelledby on these types though. Hopefully
>> Nuance will fix this oversight soon.
>>
>>
>> > > > >
From: Diane.Tomlins@hcahealthcare.com
Date: Mon, Sep 14 2015 7:50AM
Subject: Re: form select dropdown - label, title or aria?
← Previous message | Next message →
[Monday, September 14, 2015 4:51 AM]
RP wrote
> Web accessibility just does not mean for those who use screen readers or voice recognition software.
I know that it's not just about screen readers. The challenge lies in the size of our platform and our process. Pretty much anything that affects the visual appearance has to go thru a design review. It's not as simple as me just adding the labels, which is easy to do by itself. It also involves changing the 'default' options that show in the select so there isn't undue repetition. These forms appear on nearly 500 websites, so it's affect is widespread and I can't just arbitrarily change it.
Thanks,
DianeT
From: Maxability Accessibility for all
Date: Mon, Sep 14 2015 10:14PM
Subject: Re: form select dropdown - label, title or aria?
← Previous message | No next message
Hello Diane,
Do you have a possibility to have a place holder for your form elements?
Placeholders that do not disappear even after filling the field is a good
solution I can see as a work around in this case.
I think it's possible to make the placeholder available all the time using
scripts.
Thanks and Regards
RP
On Mon, Sep 14, 2015 at 7:20 PM, < = EMAIL ADDRESS REMOVED = > wrote:
> [Monday, September 14, 2015 4:51 AM]
> RP wrote
> > Web accessibility just does not mean for those who use screen readers or
> voice recognition software.
>
> I know that it's not just about screen readers. The challenge lies in the
> size of our platform and our process. Pretty much anything that affects the
> visual appearance has to go thru a design review. It's not as simple as me
> just adding the labels, which is easy to do by itself. It also involves
> changing the 'default' options that show in the select so there isn't undue
> repetition. These forms appear on nearly 500 websites, so it's affect is
> widespread and I can't just arbitrarily change it.
>
> Thanks,
> DianeT
> > > > >