Create and Style an Accessible Field Description
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.