WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Off-screen form label not read by Screen reader

for

From: Rick Hill
Date: Aug 2, 2012 10:07AM

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 REMOVED> <mailto: <EMAIL REMOVED> >>
Reply-To: WebAIM Discussion List < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >>
Date: Thursday, August 2, 2012 4:07 AM
To: 'WebAIM Discussion List' < <EMAIL REMOVED> <mailto: <EMAIL 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