HTML Course 11.5 Introduction to ARIA (roles, aria-label, aria-labelledby, aria-describedby)

Introduction to ARIA

Accessible Rich Internet Applications (ARIA) provides a way to enhance the semantics of HTML elements, making dynamic content and custom UI components usable for people who rely on assistive technologies. ARIA attributes, combined with roles, help expose widgets, regions, and relationships to screen readers, speech input software, and other tools.

1. ARIA Roles

A role informs assistive technologies about the purpose of an element. Native HTML elements have implicit roles (for example, <button> has role=’button’). When you create a custom control or non-semantic element (e.g., <div>), assigning a role lets AT (Assistive Technology) identify it correctly.

Common Landmark Roles

• banner: Page header region
• navigation: Site or page navigation area
• main: Main content of the document
• complementary: Sidebar or complementary section
• contentinfo: Footer of the document

Example: Defining a custom toolbar

  
  <div role='toolbar' aria-label='Text formatting options'>
    <button type='button'>Bold</button>
    <button type='button'>Italic</button>
    <button type='button'>Underline</button>
  </div>
  

2. aria-label

The aria-label attribute provides an explicit, invisible label for an element when a visible label is not present or is insufficient. Screen readers read aria-label in place of any visible text.

When to use

• No visible label exists (e.g., icon-only buttons).
• Visible text is not descriptive enough.

Example: Icon button with aria-label

  <!-- Icon-only button for closing a dialog -->
  <button type='button' aria-label='Close dialog'>
    <svg width='16' height='16'>
      <path d='M1,1 L15,15 M15,1 L1,15' stroke='black'/>
    </svg>
  </button>
  

3. aria-labelledby

aria-labelledby references the id of another element (or a space-separated list of ids) whose visible text will serve as this element’s accessible label. This is useful when you already have one or more elements in the page providing human-readable text.

Key points

• References one or more elements by id.
• Accessible name is the concatenation (in DOM order) of referenced elements’ texts.
• Take care not to create circular references.

Example: Form input with external label

  <label id='emailLabel'>Email Address:</label>
  <input type='email' aria-labelledby='emailLabel' name='email'>
  

Here, the input’s accessible name becomes “Email Address:”, as read from the element with id='emailLabel'.

4. aria-describedby

aria-describedby references elements that provide additional descriptive text (instructions, hints, error messages). Screen readers announce this description after the element’s accessible name.

Use cases

• Form inputs with help text or validation messages.
• Complex widgets requiring more context.

Example: Input with help text and error message

  <p>Enter your birth date in YYYY-MM-DD format.</p>

  <label id='dobLabel'>Date of Birth:</label>
  <input 
    type='text' 
    aria-labelledby='dobLabel' 
    aria-describedby='dobHelp dobError' 
    id='dobInput'
  />

  <small id='dobHelp'>For example: 1980-12-31</small>
  <div id='dobError' role='alert'>Invalid date format</div>
  

5. Accessible Name Computation

When determining an element’s accessible name, user agents follow a defined algorithm:

6. Best Practices

• Avoid redundant labels: don’t use aria-label when native <button> text suffices.
• Do not hide visible labels and replace them with aria-label; this may confuse sighted users.
• Ensure referenced ids in aria-labelledby/aria-describedby are unique and valid.
• Test with multiple screen readers (NVDA, VoiceOver, JAWS) to confirm announce order.
• Use role only when no semantic HTML element exists for your widget. Prefer native elements (<button>, <nav>, etc.).

Summary

ARIA roles and attributes—role, aria-label, aria-labelledby, aria-describedby—are powerful tools to make dynamic and custom components accessible. Use them thoughtfully, follow the accessible name computation order, and always prefer native HTML semantics when available.