When developing web applications, they should be accessible to all. When you want to ensure your web application is accessible a check you will want to do is to ensure each form input element has established label relationship.
“When labels for form elements are absent, screen reader users do not know the input data expectations. Screen readers cannot programmatically determine information about input objects without an established label relationship (or redundant text serving as a label).” - Deque University
Identifying inputs with no established label relationship
- Open DevTools within Chrome :
- Paste the following snippet into the console tab and press
Enteron your keyboard to execute the snippet on the web page you are currently viewing
The above snippet find’s all inputs and labels within the currently loaded document (web page). For each input which is found, we then loop through each label on the loaded document and check it’s for attribute. If we do not find any labels that have a for attribute that matches any input id we then know we’ve found a form input without a corresponding label. The for attribute’s value of a label must be the id of the input it is associated with.
Find this useful?
Why not check out the UsefulJsSnippetExtension.