It's important that elements such as <input>
have labels so that users know how to fill them in.
The simplest and most accessible way to to label an input is by including a <label>
with a for
attribute that points to the <input>
. <label>
elements have an implicit role.
For example:
<label for="emailField">Email</label>
<input id="emailField" type="email">
Field Controls always output a label linked to the input element if the Field has Label text provided. Even if the Field Control is configured to hide the label, the label is written out to the page with display:none
, this way screen readers can still read the label for your field.
<label>
elements are automatically understood by assistive technologies, you shouldn't provide ARIA Label attributes in addition to providing Label text.
For interactive features that would benefit from having a label for users of assistive techologies (e.g. buttons that contain no text), you can use a control's ARIA properties: