# ARIA has perfect support

DevFeed: [ARIA has perfect support](<https://devfeed.tech/articles/aria-has-perfect-support-9371.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/aria-has-perfect-support/>)

Author: Eric Bailey

Published: 2020-05-13T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [aria](<https://devfeed.tech/topics/aria.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [browser](<https://devfeed.tech/topics/browser.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Frameworks](<https://devfeed.tech/topics/frameworks.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [aria](<https://devfeed.tech/tags/aria.md>), [browser](<https://devfeed.tech/tags/browser.md>), [frameworks](<https://devfeed.tech/tags/frameworks.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [web-apps](<https://devfeed.tech/tags/web-apps.md>)

## AI overview

The article explains ARIA as an HTML extension that adds roles, states, and properties to improve communication between websites or web apps, browsers, and assistive technology. It describes dynamic JavaScript usage, framework compatibility, and compatibility limitations involving browsers, operating systems, and assistive technology.

## Source excerpt

Accessible Rich Internet Applications (ARIA) is an extension of HTML. It is a technology that adds roles, states, and properties that are designed to help with the accessibility of websites and web apps. Background ARIA works by supplementing, adding, removing, or overriding information the browser uses to communicate with assistive technology. For example, adding aria-hidden="true" to a HTML element will tell the browser not to report the element, or any of its children to assistive technology. aria-hidden="true" can be useful for situations where you want to remove something that might normally get reported, such as a SVG icon inside a button. If the button already has a text label, removing the icon helps make sure that the experience is easy to understand by removing unnecessary information that would otherwise be exposed by the decorative icon: <button type="button"> <svg aria-hidden="true" focusable="false"> <!-- SVG code --> </svg> Save </button> ARIA can also be used for interactive controls such as an accordions, tabs, and modals. A thoughtful, skilled application of ARIA can help communicate things like if an accordion panel is in an expanded state, which tab's corresponding tab panel is currently visible, or what is and is not modal content. Nearly all ARIA should be inserted and updated dynamically via JavaScript. Very little of it is "hard coded" into the HTML it is manipulating. There are many ways to add ARIA to your website or web app using JavaScript. You can use "vanilla" JavaScript, or specialized frameworks such as Ember, Angular, React, Vue, Svelte, etc. ARIA is compatible with all these frameworks because it is a standard they observe. Compatibility issues All web technology has compatibility issues. Compatibility issues are created when there is an interaction between: The kind of operating system, The version of the operating system, The kind of browser running on the operating system, The version of browser running on the operating system, A