What is ARIA?
WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make web content and web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with HTML, JavaScript, and related technologies.
Without WAI-ARIA, certain functionality used on websites is not available to some users with disabilities — especially people who rely on screen readers and people who cannot use a mouse. WAI-ARIA addresses these accessibility challenges, for example, by defining ways for functionality to be provided to assistive technology. With WAI-ARIA, developers can make advanced web applications accessible and usable to people with disabilities.
- from the W3C Web Accessibility Initiative ARIA Overview
First Rule of ARIA
Ensure that you understand the first rule:
If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
Adhering to this rule may not be possible when:
If the feature is available in HTML but it is not implemented or it is implemented, but accessibility support is not.
Design constraints prevent the use of a particular native element, because it can't be styled as needed.
The needed role or property is not currently available in HTML.
Example
Below you will find basic ARIA use on a link. The aria-label adds meaningful context for assistive technology users.
<a href="https://example.com/download" aria-label="Download the annual report PDF">
<img src="download-icon.svg" alt="">
</a>
Learn More from DubBot
Check out the listing of all articles in the DubBot ARIA collection.
Outside Resources
If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!