Accessibility of forms is an important and major concepts in web accessibility. In one or the other ways, every website will have at least one form. While most other elements on the web page allows the user to read the content or understand the visual presence or will allow the user to move between the websites and web pages, forms allow the users to interact with other parties either by sharing the feedback, contacting the web master, storing their data on the website etc.
Since the concept of forms have pre submission and post submission information, we have two different chapters on this concept. The current chapter talks about the pre submission and the next chapter Error handling for forms talks about the post submission.
Without further delay let’s get into the story.
Labels
Without a label one does not know what do I input heare? Every form element must have a label. According to W3C WCAG terminology, a label is a piece of information that is always visible on the screen. This implies that the information conveyed through HTML title attribute or aria-label cannot be considered as a label uhnless it is substituted with a visible context. This also stress the problems associated with placeholders instead of labels.
Most of the automation tools can identify missing labels. However in some cases the label might not be missing, the label might be wrapped in a different element such as a span, paragraph or td. Cross verify the defects thrown by automation tool manually.
Validation for missing labels
- Open the page in the browser.
- Run any automation tool such as aXe.
- Chek if the tool finds any violations of missing labels.
- If you find any violations of missing labels, cross verify if they realy are not available on the screen.
- If the identified defect is a true violation, then the success criteria is a failure.
To understand the concept better, navigate the entire web page using NVDA and tab key of the keyboard. The labels you see on the screen must be the same as what NVDA speaks out.
Clear Labels
Labels for the form elements must be clear enough for the user to fil in the data. A label for a form element that allows email address as the user name in the login form should be Email instead of user name. If User name is provided as the label, probability that user inputs some imaginary data considering the user name and email address are different. Either by providing email address as the label or providing User Name as the label and substituting an instruction that says “Your registered email address is the user name” wil avoid wrong input by the user.
In another instance of a travel booking, clearly distinguish between the From City and To city instead of providing the label as City in both the cases . Similarly Departure Date and Return date must be clearly labelled.
Validation for clear label.
- Open the page in the browser.
- Navigate to each form element on the page and read the label manually.
- Understand if the label is clear enough for the user to fill in the data.
- If step 3 is passed this success criteria is passed, else failed.
Note: No automation tool can identify the clarity of labels. This success criterian is subjective.
Label Association
Once you confirm that the labels are available on the screen and are unambiguous verify if the textual labels and the corresponding form elements are programmatically associated. A manual evaluation can be performed to check if the association is provided within the labels and form elements. If the association for labels is not provided screen readers will completely ignore the label while navigating with the tab key of the keyboard. This is equal to not having the labels for that set of users.
Validation for label association
- Open the page on a browser.
- Navigate to each form element and click the label with mouse.
- The action associated with the form should be performed on clicking the label. i.e. The text field should allow you to type, checkbox or radio button should be selected or deselected etc.
- If step 3 is passed this success criteria is passed else failed.
Validation of label association with screen reader.
- Open the page on the browser when the screen reader is switched on.
- Navigate the form elements on the page using tab key of the keyboard.
- When the keyboard reaches the form element, screen reader should announce the label along with the form element with its roles and other semantics.
- If the label is not announced it is an accessibility violation and the failure of the success criterian.
For testing the association of labels performing any one of the checks above is sufficient.
Group level labels
In certain cases where group of elements need a single label, a group level label called legend is provided and the same is wrapped with the group using fieldset. For instance, while signing up to a form, user is expected to inform the highest education attended. For this a group of radio buttons i.e. under graduation, Graduation, post graduation and Ph.D are provided on the form. All these educational qualifications aare the labels of the radio buttons. Then how does one know if these group of radio buttons are for the user to select their highest educational qualification or the educational qualification they are asprant or something else?
Validation for group labels.
- Open the page on the browser.
- Check the page if it contains any form elements that are grouped such as radio buttons or checkboxes.
- If such elements are available manually chek if a group level label is provided. It can be a heading or any other textual information on the screen.
- If such group level labels are available the success criterian is partialy passed. Check for the next validation method for complete conformance of group labels.
Validation of the association of group labels
- Open the page on the browser when the screen reader is switched on.
- Considering the validation in step 1 is passed, navigate the same group using the screen reader.
- Screen reader should announce the group label while entering into the group. This allow the screen reader users to form a relation between the group and the individual elements within the group.
Note : To pass the success criteria both the validations under Group label section should be markd pass.
Instructions for form elements
Without proper instructions filling up certain form elements might be difficult. Eg: While creating a new password, different applications may have different password criteria. Unless the content author provide an instruction users may not be able to accurately create a password for the application. The date format is another similar example.
Apart from the examples discussed, most of the forms have mandatory and non mandatory fields. Differentiating them with a proper instruction for the user that are not dependent on sensory characteristics is important
Validation of instructions
- Open the page on a browser.
- Identify the form elements that need additional instructions for the user.
- Verify if the fields that need additional instruction are provided with appropriate instruction that is clear and unambiguous.
- Ensure that sensory characteristics such as color , shape, size etc are not the only way to identify the associated instruction.
- If step 3 and 4 are passed, this success criteria is passed.