E-mail List Archives
Thread: Forms Accessibility Question
Number of posts in this thread: 3 (In chronological order)
From: Monica
Date: Mon, Feb 10 2014 10:11AM
Subject: Forms Accessibility Question
No previous message | Next message →
I am trying to build an accessible form and having trouble trying to get
JAWS 15 to relate each part of it/ read it all as "one" area to fill.
I am trying to get the end result to look like this:
Label name: [_____Input_____]
Error message (that shows up ONLY if the above text input did not meet
requirements)
*Help text*
I was advised to put the help text and error messages *inside *the label
tag. However, this would mean that the above look like this instead:
Label name:* Help text* [_____Input_____]
Error message (that shows up ONLY if the above text input did not meet
requirements)
...which wouldn't work very easily with my fluid layout, as it is difficult
to style the Label name and help text to look as the ideal, visual end
result.
Is there any way, using ARIA labels, to allow the Label name and Help text
to not be in the same label tag *but* still relate them?
Help would be greatly appreciated.
From: Paul J. Adam
Date: Mon, Feb 10 2014 10:17AM
Subject: Re: Forms Accessibility Question
← Previous message | Next message →
Sure, you can use aria-describedby for help text and aria-labelledby for the shorter, accessible name text. By pointing those attribute values to the separate text element's ID reference(s), theyre programmatically associated and should be spoken by the users screen reader.
Paul J. Adam
Accessibility Evangelist
www.deque.com
On Feb 10, 2014, at 11:11 AM, Monica < = EMAIL ADDRESS REMOVED = > wrote:
> I am trying to build an accessible form and having trouble trying to get
> JAWS 15 to relate each part of it/ read it all as "one" area to fill.
>
> I am trying to get the end result to look like this:
> Label name: [_____Input_____]
> Error message (that shows up ONLY if the above text input did not meet
> requirements)
> *Help text*
>
> I was advised to put the help text and error messages *inside *the label
> tag. However, this would mean that the above look like this instead:
> Label name:* Help text* [_____Input_____]
> Error message (that shows up ONLY if the above text input did not meet
> requirements)
>
> ...which wouldn't work very easily with my fluid layout, as it is difficult
> to style the Label name and help text to look as the ideal, visual end
> result.
>
> Is there any way, using ARIA labels, to allow the Label name and Help text
> to not be in the same label tag *but* still relate them?
>
> Help would be greatly appreciated.
> > >
From: Karl Groves
Date: Mon, Feb 10 2014 11:25AM
Subject: Re: Forms Accessibility Question
← Previous message | No next message
Monica:
Take a look at example #7 here: http://karlgroves-sandbox.com/multilabel.php
On Mon, Feb 10, 2014 at 12:11 PM, Monica < = EMAIL ADDRESS REMOVED = > wrote:
> I am trying to build an accessible form and having trouble trying to get
> JAWS 15 to relate each part of it/ read it all as "one" area to fill.
>
> I am trying to get the end result to look like this:
> Label name: [_____Input_____]
> Error message (that shows up ONLY if the above text input did not meet
> requirements)
> *Help text*
>
> I was advised to put the help text and error messages *inside *the label
> tag. However, this would mean that the above look like this instead:
> Label name:* Help text* [_____Input_____]
> Error message (that shows up ONLY if the above text input did not meet
> requirements)
>
> ...which wouldn't work very easily with my fluid layout, as it is difficult
> to style the Label name and help text to look as the ideal, visual end
> result.
>
> Is there any way, using ARIA labels, to allow the Label name and Help text
> to not be in the same label tag *but* still relate them?
>
> Help would be greatly appreciated.
> > > >
--
Karl Groves
www.karlgroves.com
@karlgroves
http://www.linkedin.com/in/karlgroves
Phone: +1 410.541.6829