Adding <p> or <li> semantics to forms
I'm confused 
We recived a comment yesterday regarding one of our forms saying it isn't accessible saying the use of the <p> tag doesn't get picked up by screenreaders in forms mode.
So I've done some research on this today and hense my confusion.....
I have seen some people using p's some using div's some spans and the odd lists also.
So which is best, do div's get picked up?
Eg
| Code: |
| form id="form" action="handler.php" method="post">
<fieldset> <legend>About you</legend> <div> <label for="name">Name:</label> <input type="text" name="name" id="name" value="" /> </div> <div> <input type="submit" value="submit" /> <input type="reset" value="reset" /> </div> </fieldset> </form> |
I then go onto read Johan's article in which he says:
| Quote: |
| Only use Label inputs with Label tags but do not use <DIV>s as they will not be read out in Forms mode. |
So, can anyonw give an answer?
Like I'm sure you all have, I looked toward the W3C for an answer or example code but nothing definate.......
I have also looked at some big named sites and some of the member sites from this forum, again some <p>'s, <div>'s etc
Share: 
The text inside a (div, p, li etc...) will not be read in forms mode however they will if inside these tags contain form tags (label, input etc...). Text not it any tag (other than body) will not get read. Apologies for the confusion I really should update my draft article that is now outdated. Your example is excellent and is how I currently do my forms.Johan De Silva / Portfolio
Share:
| Johan007 wrote: |
| The text inside a (div, p, li etc...) will not be read in forms mode however they will if inside these tags contain form tags (label, input etc...). Text not it any tag (other than body) will not get read. Apologies for the confusion I really should update my draft article that is now outdated. Your example is excellent and is how I currently do my forms. |
OK, thanks for the clarification.
So the following code is OK and would get read out?
| Code: |
|
<p> <label for="name">Name:</label> <input type="text" name="name" id="name" value="" /> </p> |
and is perfectley OK and valid?
Whereas the following code wouldn't get read out in a form:
| Code: |
|
<p> All fields are required</p> |
Share:
That is correct. I have updated the article to be clear and want to add so much more however I have to get back to my new born!
Share:
| Johan007 wrote: |
| That is correct. I have updated the article to be clear and want to add so much more however I have to get back to my new born! |
OK then, so if I wanted to have a question / statment with in the form and a <p> isn't the go, what are the alternatives?
| Code: |
| <label>Some text instruction</label> |
Congrats on the new born btw
Share:
I must be going senile. I thought the article I mentioned in a previous reply showed that <div> was read correctly by JAWS whilst in Form mode...?
Who knows...maybe the old cognitive disorder has finally caught up with me for good.
[edit]Errr...just had a quick look at former posts. I think I've now got the hang of it! My apologies to Johan and Adrian.
[/edit]
Share:
| Adrian Rayfield wrote: |
| OK then, so if I wanted to have a question / statment with in the form and a <p> isn't the go, what are the alternatives? |
This is a question I've asked at least twice on these forums, and I don't recall if I got a response. (Although I remember at least one other person saying at the time that it was causing him some confusion, too.)
If you are just asking a simple question which applies to only one input, wrapping the whole question (or just enough of it for the field to make sense) in a label will work. Problems arise when you have a question or some instructions which apply to more than one input; the issue being that, as it is implemented, "forms mode" cuts out all non-form elements. Here's an example of such a form:
| Code: |
| <p>Which newsletters would you like to subscribe to?
<ul> <li> <input type="checkbox" name="newsletters" id="msleaks" value="Microsoft Leaks"> <label for="msleaks">Microsoft Leaks</label> <li> <input type="checkbox" name="newsletters" id="drevil" value="Doctor Evil's Hot Stock Tips"> <label for="drevil">Doctor Evil's Hot Stock Tips</label> ... </ul> |
In forms mode, AT users will only hear the labels for the checkboxes, one after the other, without the paragraph explaining what they represent.
One possibility is to wrap the elements in a fieldset and use the legend to indicate the context:
| Code: |
| <fieldset>
<legend>Subscribe to newsletter</legend> <p>Which newsletters would you like to subscribe to? <ul> <li> <input type="checkbox" name="newsletters" id="msleaks" value="Microsoft Leaks"> <label for="checkbox">Microsoft Leaks</label> <li> <input type="checkbox" name="newsletters" id="drevil" value="Doctor Evil's Hot Stock Tips"> <label for="drevil">Doctor Evil's Hot Stock Tips</label> ... </ul> </fieldset> |
Pros: Most screenreaders will read the legend before each input label in forms mode.
Cons: Apart from the fact that legends are a pain to style, at least one widely-used screenreader ignores the legend tag in forms mode. There are some rules you should follow regarding legends—for example, try to keep the legend short, since those that do read the legend tag will read it out before every single label in the fieldset.
Another alternative is to use the title attribute to provide fuller information without formally marking up the label:
| Code: |
| <p>Which newsletters would you like to subscribe to?
<ul> <li> <input type="checkbox" name="newsletters" value="Microsoft Leaks" title="Subscribe to the Microsoft Leaks newsletter."> Microsoft Leaks <li> <input type="checkbox" name="newsletters" value="Doctor Evil's Hot Stock Tips" title="Subscribe to Doctor Evil's Hot Stock Tips."> Doctor Evil's Hot Stock Tips ... </ul> |
Pros: Many screenreaders will read the title if you omit the label, so you can contextualise the items properly this way.
Cons: You will need to construct an accurate title for each element to ensure that it is read out properly. As the above link indicates, some screenreaders will not read out the title, although I think they constitute a minority compared to the fieldset solution. Finally, it seems incorrect not to explicitly mark up the label; certainly, explicit association of labels with controls is a WCAG priority 2 checkpoint, and depending upon how you style the radio buttons you may find yourself wrapping them in a <span> anyway.
It's up to you which method you choose, if any. I seem to recall Cerbera suggesting that it should not be our job to jump through hoops like this because of a well-intentioned, but nonetheless broken, implementation; so perhaps you might choose to stick with just the paragraph and depend upon screenreaders improving in the near future (or, at least, on their users knowing to suspend forms mode when occasion calls for it). Personally I edge towards the fieldset solution, but there are specific circumstances in which this may not be feasible.
Share:
Good post.
| jordan wrote: |
| Cons: Apart from the fact that legends are a pain to style, at least one widely-used screenreader ignores the legend tag in forms mode. |
Johan De Silva / Portfolio
Share:
Thanks for your replies 
Share:
Hi Johan,
You're right that JAWS users outnumber those of Windows-Eyes: according to market share statistics from the USNFB, "JAWS commands 65 percent of the market [while] Window-Eyes has 35 percent[.]"
Adrian: I hope they helped!
Share:
| Quote: |
| Adrian: I hope they helped! |
Yes they did, although still no definitive answer on the 'you need to do this in the following field' issue.
I may well stick with using <p>'s although they aren't read out I'll ensure the title tags are as descriptive, which they always are
I have also used the fieldset / legend route making the nested fieldset have no border.
Share:
Hello folks,
Can I offer this code as something of an alternative for you to pick the bones out of...
| Code: |
|
<div class="cfc btb"> <h6>There is little or no risk of "spamming" by sending this form.</h6> <p class="plnav"> <em>Please Note:</em><br /> Titles marked with a <em>¶</em> suffix require a valid entry! <br /> Use [Tab] to move from box to box (FireFox / Opera).</p> <div id="fbk1"> <form action="em2pete2.php" method="post" id="fm2"> <fieldset><legend>My Personal Details</legend> <label class="plnav big" for="vname">Name <em>¶</em></label> <input tabindex="11" type="text" name="vname" id="vname" size="30" maxlength="30" title="Required - Enter your name here" onfocus='this.value=""' value=" My name is..." onblur='if(this.value=="")this.value=" My name is...";' /> <label class="plnav big" for="from">From - Your home town - helps assess response needs <em>¶</em> </label> <input tabindex="12" type="text" name="from" id="from" size="20" maxlength="35" title="Required - Enter your location here" onfocus='this.value=""' value=" I come from..." onblur='if(this.value=="")this.value=" I come from...";' /> <label class="plnav big" for="email">Email address <em>¶</em></label> <input tabindex="13" type="text" name="email" id="email" size="30" maxlength="40" title="Required - Enter your email address here" onfocus='this.value=""' value=" Enter a Valid Email Address" onblur='if(this.value=="")this.value=" Enter a Valid Email Address";' /> <p class="plnav big">In your own interests, before you proceed...<br /> Please, <em>double-check</em> your email address entry above.<br /> A wrongly entered email address prevents <em>you</em> from getting my reply !</p></fieldset> <fieldset><legend>My Feedback</legend> <label class="plnav big" for="topic">Topic <em>¶</em></label> <input tabindex="14" type="text" name="topic" id="topic" size="30" maxlength="40" title="Required - Enter topic title here" onfocus='this.value=""' value=" My Topic Title is..." onblur='if(this.value=="")this.value=" My Topic Title is...";' /> <label class="plnav big" for="comments">Comments</label> <textarea tabindex="15" name="comments" id="comments" rows="10" cols="65" title="Type your feedback information here"> Comments...</textarea></fieldset> <fieldset> <legend>My Web Site Details</legend> <label class="plnav big" for="webname">Web Site Name</label> <input tabindex="16" type="text" name="webname" id="webname" size="40" maxlength="70" title="Enter your web site name here - no URL's allowed!" onfocus='this.value=""' value=" My Web Site Name" onblur='if(this.value=="")this.value=" My Web Site Name";' /> <label class="plnav big" for="weburl">Web Site URL</label> <input tabindex="17" type="text" name="weburl" id="weburl" size="50" maxlength="70" title="Enter web site address here - only URL!" value=" My Web Site address" onfocus='this.value="http://"' onblur='if(this.value=="http://")this.value=" My Web Site address";' /></fieldset> <div class="ltimg w49"> <fieldset><legend>Arrival Source</legend> <label class="plnav big" for="source">How did you first arrive at the Timeline?</label> <select class="cntr" tabindex="18" title="Please select one of these options" name="source" id="source" size="7"> <option selected="selected">Select from list below...</option> <option>Regular Visitor</option> <option>Link from another Web site / Web Blog</option> <option>Search engine</option> <option>Printed Source e.g. Magazine</option> <option>Reputation / Word of mouth</option> <option>Spotted while looking for something else</option></select></fieldset></div> <div class="ltimg w49"> <fieldset> <legend>For Site-Link Requests Only!</legend> <label class="plnav big" for="category">Specify Your Site's Category</label> <select class="cntr" tabindex="19" title="Select only for Link-Exchange" name="category" id="category" size="7"> <option selected="selected">No site-link requested</option> <option>General maritime site</option> <option>Historical reference / Research</option> <option>Link / Portal / Gateway site</option> <option>Nautical collectors' sites</option> <option>Personal home page</option> <option>Site about a specific port</option> <option>Site about a specific ship</option> <option>Site about a specific shipping company</option> <option>Site for contacting old shipmates</option> <option>Society or eMail discussion group</option></select></fieldset></div> <div class="clr"></div> <div class="ltimg w49"> <fieldset><legend>Send This Information</legend> <p class="pcnav big"> Before you send your Feedback,<br /> Did you <span class="em">double-check</span> your<br /> eMail address entry?</p> <p class="cntr"> <input class="sbmt" tabindex="20" type="submit" value=" Send My Feedback »» " title="Click just ONCE to send your message" /></p> <input type="hidden" name="process" value="1" /> <p class="sml cntr">[An acknowledgement will appear shortly]</p></fieldset></div> <div class="ltimg w49"> <fieldset><legend>Notes for Site-Link Requests</legend> <p class="plnav big"> If you are requesting a link-exchange with the Caronia Timeline, you must make a selection from the box above. The webmaster reserves the right to decline a link exchange request at his discretion.</p></fieldset></div> <div class="clr"></div> <noscript> <p>Javascript elements are used on this form only for functional purposes.</p></noscript> </form></div> </div> |
I should add that the field contents are controlled by a PHP validation
system, so that if an error occurs, the values entered by the visitor are
preserved and displayed. All I have done is copied the default PHP
generated code for your observations.
Link to live feedback page
With Season's Greetings,
Share:
| Code: |
| Feedback »» " title="Click just ONCE to send your message"
/></p> <input type="hidden" name="process" value="1" /> <p class="sml cntr">[An acknowledgement will appear shortly]</p></fieldset></div> <div class="ltimg w49"> <fieldset><legend>Notes for Site-Link Requests</legend> <p class="plnav big"> If you are requesting a link-exchange with the Caronia Timeline, you must make a selection from the box above. The webmaster reserves the right to decline a link exchange request at his discretion.</p></fieldset></div> <div class="clr"></div> <noscript> <p>Javascript elements are used on this form only for functional purposes.</p></noscript> </form></div> </div> |
I think the code should make some changes on the
| Code: |
| <div class="ltimg w49">
<fieldset><legend>Notes for Site-Link Requests<legend> |
Share:
Thank you Local for digging this 3 year old topic up I am somewhat embarrassed by how arrogant and wrong I was back then. It is good to see after 3 years no one is using <p> to separate forms and <div> has become standard. Actually the whole standards based approach has been well received and adopted and web site creation on the whole has got allot more efficient.Johan De Silva / Portfolio
Share:
Wow 3 years ago, how time flies!
Things have improved I feel on the whole and finding standards compliant sites and also software has much improved.
Share: