Create an Accessible Group of Form Fields

Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 2 years ago

Learn how to ensure form text inputs are accessible by using semantic HTML. See how to use a fieldset to group related form fields together. Then, preview how proper HTML helps assistive technology like screen readers in identifying form field relationships and purpose.

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.

egghead
egghead
~ 17 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today