Create Semantic, Accessible HTML for Text Form Inputs
Learn how to ensure accessibility of text form inputs from the start by defining semantic HTML. To do this, we'll need a label for each input that we create. This label needs to be associated with the input through a for attribute which allows screen readers to know that a label is associated as well as allows a click of the label to focus the input.
We'll create HTML for text and textarea, as well as disabled versions of both.
Instructor: [0:00] It's time to add our first set of form fields, which will be text inputs and text area. In the includes directory we'll create the file textfields.njk, which will be our Nunjucks template partial.
[0:14] Before we forget, we'll go ahead and jump to the index and we'll do an include for our textfields file. Since we're using Eleventy as our build processor, it is aware of the includes directory and will look there to find this partial.
[0:27] To begin creating a text input, we'll use the tag of input, and we'll give it the type of text. This is a self-closing tag. If we save, we'll see that our field is rendered on the page.
[0:41] The first thing we need to do to improve accessibility and understanding for all users is to add a label for this field. We'll just call it "Our text input." While it's likely that sighted users will be able to identify that this label applies to this input, we haven't completed the semantics to tie the label to the input for users of assistive technology, such as screen readers.
[1:07] This has two parts. First, we need to add an id to our input. We'll simply use the id of textinput. Then, we need to use this same string as the value of the for attribute on the label.
[1:23] You'll see no visual differences, but if we turn on voice over, and you'll see that the screen reader first read the label and then let the user know they could edit text in this field. In addition, the for attribute also lets a mouse user click on the label to send focus to the related text input.
[1:40] The last attribute we need before we move on is the name attribute on the input. For simplicity, we'll again use the value textinput. By default, with static HTML, the name attribute is used when submitting a form. Therefore, you'll want to make it descriptive the type of data you're expecting for the field.
[2:01] For example, if the label was first name, you'd likely want the name to be first name. That way when you receive the data there's no question as to what the data was intended to represent.
[2:11] Now, we would like to add an additional wrapping element as a preference for helping us to style these form fields later. We're going to add a div and we'll give this the class of form-group.
[2:25] We'll go ahead and move the label and input into this div. Then we're going to duplicate this group because we'd also like to create a disabled version, so that we're ready to style it in a few lessons. To make a disabled input, we simply add the attribute of disabled. You'll see that the native browser styling has sort of grayed out this field.
[2:45] Now, of course, we need to update the label value. We'll update this to "Disabled input," and in addition to that, we'll need to update the for, id, and name. Once again, we'll keep it simple and simply change all instances of text to disabled.
[3:00] For general HTML semantics, the id must be unique on the page. It also must be unique because it is uniquely referenced by the for attribute on the label. In other words, you should not use the same id for multiple inputs.
[3:16] Next, we want to create a text area. We'll first create our form-group div and we'll, once again, add a label and for this we'll say, "Text area." Text areas are unique because they have their own HTML tag, which is textarea. It's also unique because rather than having a value attribute, the value goes between the tags. It is not self-closing like the text input.
[3:42] However, we still need to add our for attribute, so we'll say for textarea. You know the drill by now, we're going to add this as both the id and the name. You can see that that is now rendered to the page. Once more we'll duplicate this and update it to be the disabled version.
[4:00] In this lesson, we covered how to semantically create text inputs and text areas. We learned that the for attribute should contain the string value of the id to properly associate labels with their fields for users of assistive technology and also, to enable focusing on the field via interaction with the label.