Create an Accessible Group of Form Fields

Stephanie Eckles: [0:00] In our document, we have placed an <input> element, which the browser recognizes as an interactive input. The first improvement we can make is to explicitly define that this input is type of text, meaning we expect plain text data. However, there is no indication of the expected value for the data. To begin to resolve that, we add a <label> element. This field will be for a First Name.

[0:33] Inherited browser styles place the label in line with the text field. A sighted user is able to visually make the connection between First Name and its associated field. However, a user who may be using assistive technology, such as voiceover, will not have the same association, as the screen reader reads simply that this is a text field.

[0:59] To resolve this, we first define an id on the input, and we'll say firstname. Then we will use that as the for attribute value. Now, when a user with assistive technology interacts with the field, it is read as first Name and moves their focus to immediately begin inputting text.

[1:22] Use of the for attribute coupled with the id forms this relationship to help assistive tech identify the field with its label and enhances the field for all users as interacting with the label provides a larger hit target for bringing focus to the associated input.

[1:43] Often, you may want to group related fields together. We would want to add a Last Name. We'll update the label text as well as the for and id attributes, ensuring that they are unique for every field added to the document. By default, the browser has continued to align them.

[2:06] Let's wrap each label and its associated input with a simple <div>. I've used the class of field-group, and we will simply create a bit of padding around each field. Although we have used appropriate, clear labels and the for attribute to associate the label with the related input, we can go one step further with identifying these as related fields by using the <fieldset> element.

[2:38] Most browser native styles will include a border as part of the inherited fieldset styles. The fieldset by itself has given a visual cue but has not yet provided additional information for users of assistive technology.

[2:55] For that, we also need to create a legend. We'll use the label Full Name. Now, when a user of assistive technology interacts with the fields within the fieldset, their screen reader of choice identifies the field and that it is part of the Full Name group.