Skip to main content

ARIA

Accessible Rich Internet Applications (ARIA) is a set of HTML roles and attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

note

HTML5 already contains many accessibility features that can be surfaced by choosing the correct semantic HTML element over using ARIA. In a similar way Ionic Components provide accessibility features through ARIA. If you choose to create components you are responsible for using ARIA roles and attributes to make your application more accessible.

Common Uses

The best advice is to avoid using Aria attributes and instead use Semantic Elements. Aria attributes are useful when creating your own components but in general you should minimize the usage in your HTML templates.

There are a few common use cases for ARIA roles and attributes that you may come across in an Ionic application:

  • Using aria-hidden to prevent reading of the name of an ion-icon to screen readers (SR) and other assistive technologies (AT).
  • Using aria-label to read the action associated with clickable images to screen readers and other assistive technologies.
  • Using role of button to make elements like a behave like a button.
  • Using role of heading to specify a page title.
  • Using role of list when using the ul element.
  • Using role of list when using the ul element.
  • Using aria-level to create a level 1 heading for each page.
  • Using aria-expanded to indicate when a component is expanded or collapsed.