10. Forms

HTML forms can be made more accessible. The A11Y checklist states:

• All inputs in a form are associated with a corresponding <label> element.

For example, the following is visually okay:

<div>
      <p>Name:</p>
      <input type="text" name="yourName" id="yourName">
</div>

But the above can be made more accessible with the use of <label>:

<div>
      <label for="yourName">Name:</label>
      <input type="text" name="yourName" id="yourName">
</div>

This is likely to impact on your page's appearance as we have swapped a block element <p> for an inline element <label>. How could you fix this?