Test for Form Control Label Accessibility Issues
Our accessibility auditing toolkit makes it very easy for us to test for any form controls that are missing labels or are not correctly associated with their labels. Running Eslint with the eslint-plugin-jsx-a11y installed will show us any form controls with missing or unassociated labels. Running react-axe or using axe to audit a web page will similarly list any of these findings. Finally using tota11y we can annotate any form controls on a page that are missing labels. This is definitely some of the lower hanging fruit that we can easily find and fix when making our applications accessible!
Instructor: [0:00] When it comes to testing your application for issues concerning accessible labels, we can start right in our terminal by running ESLint. If you've got the eslint-plugin-jsx-a11y installed, then we will get some findings when we are missing appropriate labels.
[0:18] Right here, we've got a couple findings on one form and here we have a finding on another form where we are missing labels associated with their form controls. If you're using an IDE that's integrated with ESLint, then you can see right in the code if you have any of these findings.
[0:35] I'm running the same application right now with React aXe. It also will show me if we have any findings with labels. It will highlight each input that is missing an associated label. If we run Totally, we can annotate for missing labels.
[0:55] Right here, those same two form inputs are annotated. It shows me the source code right here as well. Our auditing tools make it really easy to find issues concerning form labels.