0

I want to make a login form as:

<form>
<label>Username:<input type="text" name="username"></label>
<label>Password:<input type="password" name="password"></label>
</form>

but some people write it as:

<form>
<ul>
<li><label>Username:<input type="text" name="username"></label></li>
<li><label>Password:<input type="password" name="password"></label></li>
</ul>
</form>

OR

<form>
<p><label>Username:<input type="text" name="username"></label></p>
<p><label>Password:<input type="password" name="password"></label></p>
</form>

first question: which way is recommended and why ? second: does any of this method will hinder reading by 'screen readers' for blind ?

4
  • This question encourages opinion-only answers unfortunately. Regardless of what you do, make sure you have for attributes in each of your labels if you're worried about accessibility. Nov 26, 2014 at 8:35
  • I think the other way... there has to be a method which will recommended for better styling or good for screen readers
    – Alex Jones
    Nov 26, 2014 at 8:38
  • 1
    Please see this answer: stackoverflow.com/questions/8524087/… it demonstrates your problem and illustrates why there is no "recommended" solution Nov 26, 2014 at 8:44
  • Sounds like the only solution is research & discovery of what screen readers do in practice. I suspect that your first option might work best because, per mattytommo's link, semantically li and p have specific meanings that don't really match the purpose of form inputs, but that is speculation. I suggest you try those three blocks of code in a screen reader and see what happens. Post your answer. Nov 26, 2014 at 8:50

1 Answer 1

1

I would recommend the 2nd method and here's why: 1st, you have a <form> element which shows you have list of elements within it. Thus, proper nesting of your unordered list items. You would have to just make certain in a stylesheet to remove the decoration, so the <li> tags don't appear as bulleted.

ul li { list-style-type: none; }

Next, the <label> tags are proper enough for the associated input names... no need to have to extra block element space produced by the <p> tag. The label conveys the input has an identity of sorts.

Lastly, regarding the effect on screen readers, as I suspected, a screen reader must be able to identify what things are on the page being parsed. It doesn't know what elements are by default. Hence, if you have a list of things, what better way use an element which embodies what you're conveying... <ul><li></li></ul>

Here's a link and resource which explains more of the latter for you: https://webaccessibility.withgoogle.com/unit?unit=1&lesson=5

Not the answer you're looking for? Browse other questions tagged or ask your own question.