skip to content W3C SVG

Application

What is ARIA?

ARIA is a way for websites and web apps to communicate with screen readers. You can think of ARIA as an API for communicating information about an interactive HTML element / widget to a screen reader.

What ARIA isn’t

  • A programming language
  • Magic

What ARIA Communicates to Screen Readers

  • labels and names
  • roles
  • states
  • properties
  • relationships
  • live announcements

Accessible Name Calculation

Here is how the accessible name of an element is calculated:

  1. aria-labelledby : This attribute will override all of the others if present.
  2. aria-label : This attribute will override all of the others if no aria-labelledby is present. This attribute is only accessible to screen readers – it will not be displayed visually on the page.
  3. Native HTML text : If aria-labelledby and aria-label are missing, the native text of the HTML element will be used. Native text is the text between the opening and closing tags of the element. Ex:
<button>This is a button</button>