What is ARIA attribute?

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

It supplements HTML so that interactions and widgets commonly used in applications can be passed to assistive technologies when there is not otherwise a mechanism. For example, ARIA enables accessible navigation landmarks in HTML4, JavaScript widgets, form hints and error messages, live content updates, and more. ARIA was invented after HTML4, so does not validate in HTML4 or its XHTML variants.

What ARIA attributes to use on HTML elements?

aria-label: aria-label is used to add a label with any input field or CTA that will be identified by screen reader devices. This is helpful when we have any such form field that doesn't have a label and we are using a placeholder to describe the field. e.g. aria-label="Submit the application form"

aria-describedby

aria-required

aria-invalid

aria-hidden

aria-expended: aria-expended attribute is used with accordion where we set expended value true or false. When an accordion is open to read then set aria-expended="true" attribute otherwise aria-expended="false". 

Hope this ARIA article helps you to apply accessibility to your website and makes your site or portal accessible for all users. 

ARIA References

• ARIA Accessibility
• List of ARAI attributes