Aria-Hidden Là Gì : `Aria – Các Thuộc Tính Này Là Gì: `Aria

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.

Đang xem: Aria-hidden là gì



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:

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



A hidden attribute is a boolean attribute (True/False). When this attribute is used on an element, it removes all relevance to that element. When a user views the html page, elements with the hidden attribute should not be visible.


You can”t see this

Aria-hidden attributes indicate that the element and ALL of its descendants are still visible in the browser, but will be invisible to accessibility tools, such as screen readers.


You can”t see this

Take a look at this. It should answer all your questions.

Note: ARIA stands for Accessible Rich Internet Applications

Sources: Paciello Group

edited Jul 4 “17 at 9:44


Yangshun Tay
35.6k2626 gold badges105105 silver badges124124 bronze badges
answered Jun 29 “15 at 2:49
1,69611 gold badge1111 silver badges2626 bronze badges
Add a comment |
Semantic DifferenceAccording to HTML 5.2:

XEM THÊM:  Scroll Lock là gì? Chức năng và cách sử dụng Scroll Lock

When specified on an element,

Examples include a tab list where some panels are not exposed, or a log-in screen that goes away after a user logs in. I like to call these things “temporally relevant” i.e. they are relevant based on timing.

Xem thêm: Lý Do Sử Dụng Microsoft Power Query Là Gì ? Tại Sao Cần Học Power Query?

On the other hand, ARIA 1.1 says:

indicates whether an element is exposed to the accessibility API.

In other words, elements with aria-hidden=”true” are removed from the accessibility tree, which most assistive technology honors, and elements with aria-hidden=”false” will definitely be exposed to the tree. Elements without the aria-hidden attribute are in the “undefined (default)” state, which means user agents should expose it to the tree based on its rendering. E.g. a user agent may decide to remove it if its text color matches its background color.

Now let’s compare semantics. It’s appropriate to use hidden, but not aria-hidden, for an element that is not yet “temporally relevant”, but that might become relevant in the future (in which case you would use dynamic scripts to remove the hidden attribute). Conversely, it’s appropriate to use aria-hidden, but not hidden, on an element that is always relevant, but with which you don’t want to clutter the accessibility API; such elements might include “visual flair”, like icons and/or imagery that are not essential for the user to consume.

XEM THÊM:  Những icon FB cute, đẹp độc đáo và dễ thương nhất

Effective Difference

The semantics have predictable effects in browsers/user agents. The reason I make a distinction is that user agent behavior is recommended, but not required by the specifications.

The hidden attribute should hide an element from all presentations, including printers and screen readers (assuming these devices honor the HTML specs). If you want to remove an element from the accessibility tree as well as visual media, hidden would do the trick. However, do not use hidden just because you want this effect. Ask yourself if hidden is semantically correct first (see above). If hidden is not semantically correct, but you still want to visually hide the element, you can use other techniques such as CSS.

Elements with aria-hidden=”true” are not exposed to the accessibility tree, so for example, screen readers won’t announce them. This technique should be used carefully, as it will provide different experiences to different users: accessible user agents won’t announce/render them, but they are still rendered on visual agents. This can be a good thing when done correctly, but it has the potential to be abused.

Syntactic Difference

Lastly, there is a difference in syntax between the two attributes.

hidden is a boolean attribute, meaning if the attribute is present it is true—regardless of whatever value it might have—and if the attribute is absent it is false. For the true case, the best practice is to either use no value at all (
). I would not recommend hidden=”true” because someone reading/updating your code might infer that hidden=”false” would have the opposite effect, which is simply incorrect.

XEM THÊM:  6+ Cách Làm Bùa Omamori Nhật Bản, 6+ Cách Làm Bùa May Mắn 100%

Xem thêm: ” At Some Point Là Gì – At Some Point Có Nghĩa Là Gì

aria-hidden, by contrast, is an enumerated attribute, allowing one of a finite list of values. If the aria-hidden attribute is present, its value must be either “true” or “false”. If you want the “undefined (default)” state, remove the attribute altogether.

Further reading:

Vậy là đến đây bài viết về Aria-Hidden Là Gì : `Aria – Các Thuộc Tính Này Là Gì: `Aria đã dừng lại rồi. Hy vọng bạn luôn theo dõi và đọc những bài viết hay của chúng tôi trên website

Chúc các bạn luôn gặt hái nhiều thành công trong cuộc sống!

Related Articles

Trả lời

Email của bạn sẽ không được hiển thị công khai.

Back to top button