hub.eb?material_id=506&track_id=510

ARIA Labelling


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:

Steps


1

Create a form and add a Button Control with no text.

Add a Text Control with text &times; to the button (make sure Contains HTML is checked).

2

Add a Text Control called buttonLabel with the text Close.

3

Set the ARIA Labelled by property of the Button Control to use the buttonLabel Text Control.

You'll need to type in the HTML Element ID.

4

Run the form and inspect the button to see the aria-labelledby attribute.

Current Module

Related