Aria-hidden là gì

I have been seeing the aria attribute all over while working with Angular Material. Can someone explain lớn me, what the aria prefix means? but most importantly what I"m trying lớn underst& is the difference between aria-hidden và hidden attribute.

Bạn đang xem: Aria-hidden là gì


*

*

ARIA (Accessible Rich Internet Applications) defines a way to make Web nội dung & Web applications more accessible lớn people with disabilities.

The hidden attribute is new in HTML5 và tells browsers not khổng lồ display the element. The aria-hidden property tells screen-readers if they should ignore the element. Have sầu a look at the w3 docs for more details:

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


*

*

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

Example:

You can"t see this

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

Example:

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


Share
Follow
edited Jul 4 "17 at 9:44
*

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

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 lượt thích to lớn hotline 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 h&, ARIA 1.1 says:

indicates whether an element is exposed to lớn the accessibility API.

In other words, elements with aria-hidden="true" are removed from the accessibility tree, which most assistive giải pháp công nghệ 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 lớn remove it if its text color matches its background color.

Now let’s compare semantics. It’s appropriate to lớn 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 lớn remove sầu the hidden attribute). Conversely, it’s appropriate khổng lồ use aria-hidden, but not hidden, on an element that is always relevant, but with which you don’t want lớn clutter the accessibility API; such elements might include “visual flair”, lượt thích icons and/or imagery that are not essential for the user lớn consume.

Effective sầu 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 & screen readers (assuming these devices honor the HTML specs). If you want to remove sầu an element from the accessibility tree as well as visual truyền thông, hidden would do the triông xã. However, vày 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 lớn the accessibility tree, so for example, screen readers won’t announce them. This technique should be used carefully, as it will provide different experiences lớn 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 lớn 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—& 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 recommover hidden="true" because someone reading/updating your code might infer that hidden="false" would have sầu the opposite effect, which is simply incorrect.

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 các mục 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:https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content


Chuyên mục: Blogs