What's the difference between HTML 'hidden' and 'aria-hidden' attributes?

html wai-aria
Daniel Kobe picture Daniel Kobe · Jun 29, 2015 · Viewed 271.7k times · Source

I have been seeing the aria attribute all over while working with Angular Material. Can someone explain to me, what the aria prefix means? but most importantly what I'm trying to understand is the difference between aria-hidden and hidden attribute.

Answer

Leo Farmer picture Leo Farmer · Jun 29, 2015

ARIA (Accessible Rich Internet Applications) defines a way to make Web content and Web applications more accessible to people with disabilities.

The hidden attribute is new in HTML5 and tells browsers not to display the element. The aria-hidden property tells screen-readers if they should ignore the element. Have a look at the w3 docs for more details:

https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden

Using these standards can make it easier for disabled people to use the web.

Related questions

What is HTML5 ARIA?

What is HTML5 ARIA? I do not understand how to implement it.

Read More
The purpose of using "aria-labelledby" on already labeled input elements?

Many ARIA demonstration websites use code such as: <label for="name" id="label-name">Your Name</label> <input id="name" aria-labelledby="label-name" type="text"> But what's the purpose of using aria-labelledby attribute in this case? …

Read More
Can someone explain the HTML5 aria-* attribute?

I wanted to know what the aria-* attributes are used for. What values can they have, and are they defined values or can I create my own values?

Read More