ARIA Properties — Attributes That Describe Element Characteristics

In this tutorial, you will learn about ARIA Properties. We cover key concepts, practical examples, and best practices to help you master this topic.

ARIA properties are attributes that describe the nature and characteristics of elements, including aria-label, aria-describedby, aria-controls, aria-owns, aria-flowto, and many others.

In this tutorial, you'll learn the most important ARIA properties and how to use them correctly.

What You'll Learn

By the end of this lesson, you'll understand the difference between ARIA properties and states, know the most commonly used properties, and be able to apply them correctly in HTML.

Why It Matters

Properties provide essential context to screen readers. Missing properties mean missing information, making your interface harder or impossible to use.

Real-World Use

Form validation in Durga Antivirus Pro uses aria-describedby to link error messages to invalid fields, ensuring screen reader users hear the error after the field label.

Properties vs States

flowchart LR
  A[ARIA Attributes] --> B[Properties]
  A --> C[States]
  B --> D[Describe nature]
  B --> E[Stable over time]
  C --> F[Describe condition]
  C --> G[Change with interaction]

Understanding ARIA Properties

Properties are attributes that describe the nature of an element and tend to be stable. They do not change based on user interaction.

Common ARIA properties:

• aria-label: Provides an accessible name for an element.
• aria-labelledby: References another element for the accessible name.
• aria-describedby: References another element for the description.
• aria-controls: Indicates which element a control operates on.
• aria-owns: Establishes a parent-child relationship in the Accessibility tree.
• aria-flowto: Defines the next element in a custom reading order.
• aria-haspopup: Indicates that an element triggers a popup.
• aria-keyshortcuts: Exposes keyboard shortcuts to assistive technology.

<!-- Properties in action -->
<button aria-label="Close dialog" aria-controls="dialog-1">
  X
</button>

<div aria-describedby="help-text">
  <input type="email" aria-required="true" />
  <p id="help-text">Enter your email address.</p>
</div>

Labeling Properties

aria-label and aria-labelledby both provide accessible names. Use aria-label for short, invisible labels. Use aria-labelledby to reference existing visible text.

<!-- aria-label for icon-only buttons -->
<button aria-label="Search">
  <svg><!-- search icon --></svg>
</button>

<!-- aria-labelledby referencing visible heading -->
<div role="region" aria-labelledby="region-heading">
  <h2 id="region-heading">Scan Results</h2>
</div>

Relationship Properties

aria-controls, aria-owns, and aria-flowto define relationships between elements:

<!-- aria-controls: tab controls its panel -->
<button role="tab" aria-controls="panel-1">Quick Scan</button>
<div role="tabpanel" id="panel-1">...</div>

<!-- aria-owns: redefine parent-child in the accessibility tree -->
<div role="menu" aria-owns="menuitem-1 menuitem-2"></div>
<div id="menuitem-1" role="menuitem">Scan</div>
<div id="menuitem-2" role="menuitem">Quarantine</div>

Common Mistakes

• Confusing aria-label with aria-labelledby: aria-label provides the label value directly; aria-labelledby references an element ID.
• Using aria-controls without implementing the relationship: The attribute only announces the relationship; you must implement the behavior.
• Omitting aria-label on icon-only buttons: Icon-only elements need an accessible name.
• Applying properties to elements that do not support them: Not all properties work with all roles.
• Using aria-describedby when aria-labelledby is more appropriate: Descriptions are supplemental; labels are primary.

Practice and Challenge

1. What is the difference between ARIA properties and states? Properties describe nature and are stable; states describe conditions that change with interaction.

2. When would you use aria-label vs aria-labelledby? Use aria-label for invisible labels and aria-labelledby when visible text exists.

3. What does aria-controls indicate? Which element the current control operates on, such as a button controlling a panel.

4. What is aria-flowto used for? Defining a custom reading order different from DOM order.

5. Challenge: In a form with an icon-only submit button, what aria property should you add? Add it and test.

FAQ

Mini Project

Take a simple form with three fields and add the appropriate ARIA properties: aria-label for the submit button, aria-describedby for help text, and aria-required for required fields.

What's Next

Continue to ARIA States to learn about dynamic attributes that change with user interaction.