Accessibility: the proper html code to pronounce the <form> description by screen readers-CodePudding

Suppose you have a form:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

How to make it accessible so that the accessibility screen reader pronounces the form name "this is my form about the customers:" when appears on the form? If Bootstrap is available with its sr-only class, should it be

 <form action="/action_page.php">
      <legend class="sr-only">this is my form about the customers:</legend>
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="John"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Doe"><br><br>
      <input type="submit" value="Submit">
    </form>

Should <fieldset> be added as well? Thank you.

CodePudding user response：

The most efficient for such a quite general description like "this is my form about the customers" is probably not <legend>, but simply an heading or paragraph just before the beginning of the form.

A very important feature of <legend> to keep in mind is that its text is repeated before the label of each field. This is extremely powerful, and so has to be used very carefully.

This repeatition feature implies that legend's text has to be extremely concise and precise, meaning that it should only be used for field very closely related together.

It is typically used for radio button options, like this:

<fieldset>
<legend>Gender</legend>
<input id="m1" type="radio"/><label for="m1">Male</label>
<input id="m2" type="radio"/><label for="m2">Female</label>
<input id="m3" type="radio"/><label for="m3">Other</label>
</fieldset>

Here, as a screen reader, you will hear "Gender male", "Gender female" and "Gender other" as you navigate to the radio buttons. This is quick, efficient, and reminding "Gender" is quite useful.

If the text of the <legend> is long or not really local to a few fields, the fact that it is repeated before each field may quickly become more annoying than really useful. For example, using it for a multiple choice question is a bad idea because of the length:

<!-- Bad example -->
<fieldset>
<legend>When the first web accessibility guidelines version 1 has been published ?</legend>
<input id="m1" type="radio"/><label for="m1">1995</label>
<input id="m2" type="radio"/><label for="m2">1998</label>
<input id="m3" type="radio"/><label for="m3">2001</label>
</fieldset>

Here you have quite a long question repeated before each answer, so as a screen reader user you can't really be quick and efficient, potentially slightly augmenting the handicap in time limited exams for example. The question would better be in a heading, which will be read only once when reading with arrow keys. Note that it is completely skipped when navigating only with tab though, but it is'nt usually a big problem since most users don't only rely on tab alone.

<fieldset>
<h1>When the first web accessibility guidelines version 1 has been published ?</h1>
<input id="m1" type="radio"/><label for="m1">1995</label>
<input id="m2" type="radio"/><label for="m2">1998</label>
<input id="m3" type="radio"/><label for="m3">2001</label>
</fieldset>

Coming back to your case, your text "this is my form about the customers" isn't really short either, and especially it's extremely general. The fieldset can cover dozends of fields and will even probably stay for the whole form. So having it repeated before each field is probably much more annoying than useful.