< Back to Guides | Learn more at PaulJAdam.com >

Labels - Accessibility Quick Guide

Labels are used to identify the purpose of a form control. If the label is programmatically associated with the input then it will be spoken to the screen reader user when they tab to the input. Placeholders cannot be used as labels as they disappear and have very low contrast.

Guidance

1. All form controls must have a <label>.
2. Label must always be visible, placeholder can't be used as a label!
3. Set the <label> FOR attribute to equal the ID value of the input it controls.
4. <label> tags wrapping the input and label text are acceptable but not preferred.
5. There should be no orphaned <label> tags that are not connected to an input.
6. <select> controls must have a <label>, their <option> text does not count as the label.
7. Always use native <label> and <input> controls rather than custom ARIA controls! First rule of ARIA is DON'T USE ARIA! (unless you really need to)
8. Make sure when you click the <label> text that the keyboard focus moves to the connected input.