As an alternative to putting label text in acclabels
, you may choose to avoid the use of label
items to display text on your forms. Instead, you can use specially formatted field
items to display label text.
This practice involves creating read-only fields that receive the focus. This is fine if the majority of your users have vision impairments. However, keep in mind that this can reduce the usability of the form for sighted users.
This practice is necessary because screen readers only read text from items that receive the input focus. Because label items are not designed to accept input from the user, they never receive the focus. As a result, the screen reader cannot read a label’s text. For example, if you use labels to give text instructions for completing a form, users with visual disabilities will be unaware of those instructions. By using fields instead of labels, you are ensuring that the information is available to all users. When properly formatted, such fields are virtually indistinguishable from the labels that they replace and will not affect the overall layout of your form.
If sighted users tab through a form formatted this way, they will find that the tab order includes items that appear to be labels, and that a cursor appears when that item has the focus. This may reduce the usability of the form for sighted users.
When a field receives the focus (for example, by using the tab key to navigate to the field), the screen reader first announces the accessibility message for the field, followed by its contents. The following diagram shows part of a form in which a field
item creates a section heading and gives instructions to the user:
In this case, when screen reader users tab into a read-only field, they hear the reader announce the contents of the field, general field information, and any additional acclabel
the field may have.
The ability to provide extra information through an item's accessibility message is an important part of making a form accessible.
When you replace a regular label with a field, remember to:
- Not specify a label option for the field.
- Set the field as read-only.
- Set the field as active.
- Disable the border around the field's contents.
- Specify a custom acclabel item for the field. As a minimum, the accessibility message should repeat the text that appears on the form. However, it is usually desirable to make the audible message more descriptive than the text it supports.
The following code creates an acclabel
item for the "Select Items for Purchase" heading shown in the previous diagram:
This section of the form allows you to select the type and
amount of the items you want to purchase. The price is
automatically calculated for you.
When this item receives the input focus, screen reader users hear: "This section of the form allows you to select the type and amount of the items you want to purchase. The price is automatically calculated for you. Edit field contains Select Items for Purchase. Read-only
If you use labels to identify other items, such as fields, check boxes, or radio buttons, you may not need to exchange read-only fields for labels, as these items can contain their own accessibility messages that describes their function. As a rule of thumb, simply ensure that the screen readers pronounces all visible text on the form whether it be through read-only fields or accessibility messages.
Exceptions to this practice
Sighted users may find it distracting to see the cursor tab into items that do not require user input. As a result, you may prefer to put label text into the acclabel
of the first item in the section.
Back to: Accessible forms