Testing & Remediation
How to test: Open your website in your browser of choice and examine each page for the presence of content that requires user input. For each input, does it have an appropriate label? For inputs that have restrictions/requirements, are there instructions provided for the user? How to remediate: All content that requires user input must have an appropriate label or instructions for the user. There are a number of ways to accomplish this:- Provide instructions at the beginning of the form
- Use the aria-describedby property to provide a descriptive label
- Use aria-labelledby to concatenate a label from several text nodes
- Position labels to maximize predictability of relationships
- Indicate required form controls using labels or a legend
- Use label elements to associate text labels with form controls
Questions and Answers
What is the difference between legend and label elements?
I'm working on updating my site and have become a little confused abut the differences between legend and label elements. Can you explain?
How do I know if my websites structure is layed out correctly?
My page looks good visually, but am not sure if it's structure is layed out properly, or if I used the right elements. How am I supposed to know, or is there not 'one right way' to do it?
Is there a form element meant to provide instruction?
I know how to add labels to form inputs to 'label' what they are. I am wondering if there is something similar for describing what a field is in more details? I want to there to be little text under a text field but don't...
What is an orphaned form label?
When using the Wave Scanner to repair my website I saw the warning "Orphaned Form Label", with the description was “a form label is present but it is not correctly associated with a form control”. What is this?