ARIA Labels

Section Label Examples

Sectioning elements (<article>, <aside>, <nav>, <section>, etc.) that are not the only one of its type on the page need a label, so screen reader users are able to easily understand the content and context of the section.

Labeling Sections with Visible Content

If the section you need to label is labelled by an existing visible element, you can use aria-labelledby referencing the ID of that label.

Note: as of this writing it appears a section element labelled this way does not appear in the VoiceOver Rotor, using aria-label noted below does.

Labeling Sections with aria-label

If the section you need to label doesn't have an existing visible label to use, you can manually add a label using aria-label.

General Label Examples

ARIA Labels are not limited to section elements, they can be used to add a descriptive label to any typical HTML element that needs better descriptive context.

Labeling a button with an icon

The button below uses a capital "X" to signify a close icon, to make this more approachable to screen reader users we can apply an aria-label to the button to be read aloud to screen reader users.

Multiple Labels

The fieldset below is using multiple IDs in an aria-labelledby, screen readers will pick up on this extra context and say "Billing First Name", and "Billing Last Name".

Billing
First Name
Address