Create and Style an Accessible Field Description

Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 4 years ago

Sometimes it's beneficial to add more context for a form field than can be provided by the label. In this lesson, we'll create the .field-description class to enable an additional field description. And we'll learn how to ensure users of assistive technology also receive the description in context by associating the description to the field with aria-describedby. This text span can also be used to provide validation messages.

Instructor: [0:00] Sometimes, when creating a group of form-fields you may find yourself needing to add a bit more information than the label alone can provide. Let's create a new partial called descriptions.njk. From our existing fieldset groups we'll grab out the address fields. Then for our templating we just need to add a title. Then we will visit our new descriptions page on our local server.

[0:24] Addresses can be tricky because you may have to deal with internationalization. It's a good example where you might need to add an extra description of the format you expect in this field. Within our form-group, we're going to add a span. First, we're going to give it a class of FieldDescription, which will be our new component class.

[0:44] Then we can add our relevant description, which in this case will show the street address format we expect.

[0:50] While a sighted user would be likely to associate this description to the field, we need an additional way to associate it for users of assistive technology, such as screen readers.

[1:00] For this, we need to first add a unique id attribute to the span. Since we already have an id in use for the input field, we'll simply reuse this and add -description. This id will be used on a new aria property on the input itself called aria-describedby. This will contain the value of that description id.

[1:23] When a screen reader user approaches the field, they'll be read both the field label and the field description. They get the full context, just like a sighted user, of what's required for the field.

[1:34] The other field in our form where it would be useful to have this behavior is our ZIP field. We'll say that the required format here is five digits. We'll add our class and id, as well.

[1:45] Because of the behavior we added in our previous lesson about form layout and the fact that a span is inherently an inline element, it's now time to resolve the behavior and add a little bit of custom formatting to our field description class. We'll create the new Sass file of form-field description. We'll add this as the last item in our main Sass file.

[2:08] Now, in our field description class, we'll first resolve that display by setting display of block and that resolves it for our ZIP. It also enables us to add a margin-top. We'll use the value of .5m. That way it's still quite close to the field to maintain a visual association.

[2:24] We'll complete adding a little bit of visual distinction by lowering the opacity of it and spreading out the letters with letter spacing and reducing the font size to .9m.

[2:33] In this lesson, we learned how to add an additional field description, and associate it to the input by way of adding an id to the span holding the description and using that id as the value of the aria-describedby attribute directly on the associated input.

[2:49] We then added a small class that set some display properties and visual properties to adjust the visual hierarchy of the description versus the label.

egghead
egghead
~ 24 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