E-mail List Archives
Thread: Off-screen form label not read by Screen reader
Number of posts in this thread: 9 (In chronological order)
From: Maraikayar Prem Nawaz
Date: Thu, Aug 02 2012 4:58AM
Subject: Off-screen form label not read by Screen reader
No previous message | Next message →
Hi,
I have a simple form where I have off-screen labels
Example here : http://jsfiddle.net/HMDpw/
It didn't work with NVDA on FireFox (FF14) . The form fields are read as
"Edit Auto complete Blank"
Not sure if this is problem with the code /browser/ NVDA..
Anyhelp would be great
Thanks
-Nawaz
From: Pratik Patel
Date: Thu, Aug 02 2012 5:07AM
Subject: Re: Off-screen form label not read by Screen reader
← Previous message | Next message →
Maraikayar Prem Nawaz Wrote:
I have a simple form where I have off-screen labels
Example here : http://jsfiddle.net/HMDpw/
It didn't work with NVDA on FireFox (FF14) . The form fields are read as
"Edit Auto complete Blank"
Not sure if this is problem with the code /browser/ NVDA..
Anyhelp would be great
Can you provide the actual code/css examples you're using to:
1. put your labels off screen?
2. associate your labels with the input fields?
Pratik
From: Rick Hill
Date: Thu, Aug 02 2012 10:07AM
Subject: Re: Off-screen form label not read by Screen reader
← Previous message | Next message →
Although I personally prefere a CSS method to move lables off creen, according to WCAG 2 you can also omit the <label> and use the title attribute to attach a label to a form input. True?
Rick Hill, Web CMS Administrator
University Communications, UC Davis
From: Pratik Patel < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
Reply-To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
Date: Thursday, August 2, 2012 4:07 AM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
Subject: Re: [WebAIM] Off-screen form label not read by Screen reader
Maraikayar Prem Nawaz Wrote:
I have a simple form where I have off-screen labels
Example here : http://jsfiddle.net/HMDpw/
It didn't work with NVDA on FireFox (FF14) . The form fields are read as
"Edit Auto complete Blank"
Not sure if this is problem with the code /browser/ NVDA..
Anyhelp would be great
Can you provide the actual code/css examples you're using to:
1. put your labels off screen?
2. associate your labels with the input fields?
Pratik
From: Steve Faulkner
Date: Thu, Aug 02 2012 10:17AM
Subject: Re: Off-screen form label not read by Screen reader
← Previous message | Next message →
hi Rick,
> Although I personally prefere a CSS method to move lables off creen, according to WCAG 2 you can also omit the <label> and use the title attribute to attach a >label to a form input. True?
only in cases where there is a visible label but it is not
programmatically associated.
regards
SteveF
On 2 August 2012 17:07, Rick Hill < = EMAIL ADDRESS REMOVED = > wrote:
> Although I personally prefere a CSS method to move lables off creen, according to WCAG 2 you can also omit the <label> and use the title attribute to attach a label to a form input. True?
>
> Rick Hill, Web CMS Administrator
> University Communications, UC Davis
>
>
>
> From: Pratik Patel < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
> Reply-To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
> Date: Thursday, August 2, 2012 4:07 AM
> To: 'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
> Subject: Re: [WebAIM] Off-screen form label not read by Screen reader
>
> Maraikayar Prem Nawaz Wrote:
>
> I have a simple form where I have off-screen labels
> Example here : http://jsfiddle.net/HMDpw/
>
> It didn't work with NVDA on FireFox (FF14) . The form fields are read as
> "Edit Auto complete Blank"
> Not sure if this is problem with the code /browser/ NVDA..
> Anyhelp would be great
> Can you provide the actual code/css examples you're using to:
> 1. put your labels off screen?
> 2. associate your labels with the input fields?
>
> Pratik
>
>
> > > >
> > > --
with regards
Steve Faulkner
Technical Director - TPG
www.paciellogroup.com | www.HTML5accessibility.com |
www.twitter.com/stevefaulkner
HTML5: Techniques for providing useful text alternatives -
dev.w3.org/html5/alt-techniques/
Web Accessibility Toolbar - www.paciellogroup.com/resources/wat-ie-about.html
From: Jared Smith
Date: Thu, Aug 02 2012 11:08AM
Subject: Re: Off-screen form label not read by Screen reader
← Previous message | Next message →
Nawaz-
There were a few issues with the code you provided. Of primary note is
that the Middle Name label was associated with the Last Name text box.
Once the code issues were fixed, I still experienced the same behavior
in NVDA and Firefox of the hidden label not being read (though the
ARIA label is correctly read). In debugging I found that this is due
to the use of the overflow:hidden style. When this style is removed,
the labels read appropriately. This is most certainly a bug because
overflow should have no bearing on whether content is read. Of note is
that the labels do read correctly in NVDA with IE, so it may be a
Firefox issue rather than NVDA.
This style is a standard part of most off-screen text styles. We've
recommended using it for about a decade
(http://webaim.org/techniques/css/invisiblecontent/) and I found in my
last code search that these exact styles were being used in many 10's
of thousands of web sites.
Jared
From: Rick Hill
Date: Thu, Aug 02 2012 11:09AM
Subject: Re: Off-screen form label not read by Screen reader
← Previous message | Next message →
Not according to WCAG 20 HTML technique "H65: Using the title attribute to identify form controls when the label element cannot be used" http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/H65
"Description :The objective of this technique is to use the title attribute to label form controls when the visual design cannot accommodate the label (for example, if there is no text on the screen that can be identified as a label) or where it might be confusing to display a label. User agents, including assistive technology, can speak the title attribute."
Rick
From: Steve Faulkner < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
Reply-To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
Date: Thursday, August 2, 2012 9:17 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
Subject: Re: [WebAIM] Off-screen form label not read by Screen reader
hi Rick,
Although I personally prefere a CSS method to move lables off creen, according to WCAG 2 you can also omit the <label> and use the title attribute to attach a >label to a form input. True?
only in cases where there is a visible label but it is not
programmatically associated.
regards
SteveF
On 2 August 2012 17:07, Rick Hill < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >> wrote:
Although I personally prefere a CSS method to move lables off creen, according to WCAG 2 you can also omit the <label> and use the title attribute to attach a label to a form input. True?
Rick Hill, Web CMS Administrator
University Communications, UC Davis
From: Pratik Patel < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = ><mailto: = EMAIL ADDRESS REMOVED = >>
Reply-To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = ><mailto: = EMAIL ADDRESS REMOVED = >>
Date: Thursday, August 2, 2012 4:07 AM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = ><mailto: = EMAIL ADDRESS REMOVED = >>
Subject: Re: [WebAIM] Off-screen form label not read by Screen reader
Maraikayar Prem Nawaz Wrote:
I have a simple form where I have off-screen labels
Example here : http://jsfiddle.net/HMDpw/
It didn't work with NVDA on FireFox (FF14) . The form fields are read as
"Edit Auto complete Blank"
Not sure if this is problem with the code /browser/ NVDA..
Anyhelp would be great
Can you provide the actual code/css examples you're using to:
1. put your labels off screen?
2. associate your labels with the input fields?
Pratik
--
with regards
Steve Faulkner
Technical Director - TPG
www.paciellogroup.com | www.HTML5accessibility.com |
www.twitter.com/stevefaulkner
HTML5: Techniques for providing useful text alternatives -
dev.w3.org/html5/alt-techniques/
Web Accessibility Toolbar - www.paciellogroup.com/resources/wat-ie-about.html
From: John Foliot
Date: Thu, Aug 02 2012 12:16PM
Subject: Re: Off-screen form label not read by Screen reader
← Previous message | Next message →
Jared Smith wrote:
>
> Once the code issues were fixed, I still experienced the same behavior
> in NVDA and Firefox of the hidden label not being read (though the
> ARIA label is correctly read). In debugging I found that this is due
> to the use of the overflow:hidden style. When this style is removed,
> the labels read appropriately. This is most certainly a bug because
> overflow should have no bearing on whether content is read. Of note is
> that the labels do read correctly in NVDA with IE, so it may be a
> Firefox issue rather than NVDA.
>
> This style is a standard part of most off-screen text styles. We've
> recommended using it for about a decade
> (http://webaim.org/techniques/css/invisiblecontent/) and I found in my
> last code search that these exact styles were being used in many 10's
> of thousands of web sites.
Coming late to this discussion, if this is indeed a bug in Firefox then it
should be reported to them as such. While I lack the cycles personally to do
so, if either you Jared, or Nawaz want to take that on, it would be
beneficial to all. I am copying David Bolter from Mozilla on this note, as
hopefully he can either indicate that this is a logged (known) bug, or
provide some gentle assistance to get this bug filed.
Cheers!
JF
Maraikayar Prem Nawaz
> Sent: Thursday, August 02, 2012 3:58 AM
> To: WebAIM Discussion List
> Subject: [WebAIM] Off-screen form label not read by Screen reader
>
> Hi,
> I have a simple form where I have off-screen labels
> Example here : http://jsfiddle.net/HMDpw/
>
> It didn't work with NVDA on FireFox (FF14) . The form fields are read
> as
> "Edit Auto complete Blank"
> Not sure if this is problem with the code /browser/ NVDA..
> Anyhelp would be great
>
> Thanks
> -Nawaz
From: Maraikayar Prem Nawaz
Date: Fri, Aug 03 2012 5:40AM
Subject: Re: Off-screen form label not read by Screen reader
← Previous message | Next message →
Hi Jared, Steve, Rick and John,
Thank you :-)
Jared,
Yes, overflow:hidden worked like magic , surprised on how overflow property
can affect text being read.
Next steps: File Bug with Mozilla. Hope David Bolter can help on this.
Warmest Regards
-Nawaz
On Thu, Aug 2, 2012 at 11:46 PM, John Foliot < = EMAIL ADDRESS REMOVED = > wrote:
> Jared Smith wrote:
> >
> > Once the code issues were fixed, I still experienced the same behavior
> > in NVDA and Firefox of the hidden label not being read (though the
> > ARIA label is correctly read). In debugging I found that this is due
> > to the use of the overflow:hidden style. When this style is removed,
> > the labels read appropriately. This is most certainly a bug because
> > overflow should have no bearing on whether content is read. Of note is
> > that the labels do read correctly in NVDA with IE, so it may be a
> > Firefox issue rather than NVDA.
> >
> > This style is a standard part of most off-screen text styles. We've
> > recommended using it for about a decade
> > (http://webaim.org/techniques/css/invisiblecontent/) and I found in my
> > last code search that these exact styles were being used in many 10's
> > of thousands of web sites.
>
> Coming late to this discussion, if this is indeed a bug in Firefox then it
> should be reported to them as such. While I lack the cycles personally to
> do
> so, if either you Jared, or Nawaz want to take that on, it would be
> beneficial to all. I am copying David Bolter from Mozilla on this note, as
> hopefully he can either indicate that this is a logged (known) bug, or
> provide some gentle assistance to get this bug filed.
>
> Cheers!
>
> JF
>
>
> Maraikayar Prem Nawaz
> > Sent: Thursday, August 02, 2012 3:58 AM
> > To: WebAIM Discussion List
> > Subject: [WebAIM] Off-screen form label not read by Screen reader
> >
> > Hi,
> > I have a simple form where I have off-screen labels
> > Example here : http://jsfiddle.net/HMDpw/
> >
> > It didn't work with NVDA on FireFox (FF14) . The form fields are read
> > as
> > "Edit Auto complete Blank"
> > Not sure if this is problem with the code /browser/ NVDA..
> > Anyhelp would be great
> >
> > Thanks
> > -Nawaz
>
> > > >
From: Maraikayar Prem Nawaz
Date: Tue, Aug 07 2012 10:22PM
Subject: Re: Off-screen form label not read by Screen reader
← Previous message | No next message
Hi John,
Have filed a bug https://bugzilla.mozilla.org/show_bug.cgi?idx0854..
Regards
-Nawaz
On Fri, Aug 3, 2012 at 5:10 PM, Maraikayar Prem Nawaz < = EMAIL ADDRESS REMOVED = >wrote:
> Hi Jared, Steve, Rick and John,
> Thank you :-)
>
> Jared,
> Yes, overflow:hidden worked like magic , surprised on how overflow
> property can affect text being read.
>
>
> Next steps: File Bug with Mozilla. Hope David Bolter can help on this.
>
>
>
> Warmest Regards
> -Nawaz
>
>
>
>
>
> On Thu, Aug 2, 2012 at 11:46 PM, John Foliot < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Jared Smith wrote:
>> >
>> > Once the code issues were fixed, I still experienced the same behavior
>> > in NVDA and Firefox of the hidden label not being read (though the
>> > ARIA label is correctly read). In debugging I found that this is due
>> > to the use of the overflow:hidden style. When this style is removed,
>> > the labels read appropriately. This is most certainly a bug because
>> > overflow should have no bearing on whether content is read. Of note is
>> > that the labels do read correctly in NVDA with IE, so it may be a
>> > Firefox issue rather than NVDA.
>> >
>> > This style is a standard part of most off-screen text styles. We've
>> > recommended using it for about a decade
>> > (http://webaim.org/techniques/css/invisiblecontent/) and I found in my
>> > last code search that these exact styles were being used in many 10's
>> > of thousands of web sites.
>>
>> Coming late to this discussion, if this is indeed a bug in Firefox then it
>> should be reported to them as such. While I lack the cycles personally to
>> do
>> so, if either you Jared, or Nawaz want to take that on, it would be
>> beneficial to all. I am copying David Bolter from Mozilla on this note,
>> as
>> hopefully he can either indicate that this is a logged (known) bug, or
>> provide some gentle assistance to get this bug filed.
>>
>> Cheers!
>>
>> JF
>>
>>
>> Maraikayar Prem Nawaz
>> > Sent: Thursday, August 02, 2012 3:58 AM
>> > To: WebAIM Discussion List
>> > Subject: [WebAIM] Off-screen form label not read by Screen reader
>> >
>> > Hi,
>> > I have a simple form where I have off-screen labels
>> > Example here : http://jsfiddle.net/HMDpw/
>> >
>> > It didn't work with NVDA on FireFox (FF14) . The form fields are read
>> > as
>> > "Edit Auto complete Blank"
>> > Not sure if this is problem with the code /browser/ NVDA..
>> > Anyhelp would be great
>> >
>> > Thanks
>> > -Nawaz
>>
>> >> >> >>
>
>