What's the Difference Between HTML 'Hidden' and 'Aria-Hidden' Attributes

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

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.

What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?

The key difference seems to be that hidden elements are always hidden regardless of the presentation:

The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.

http://dev.w3.org/html5/spec/Overview.html#the-hidden-attribute

Since CSS can target different media/presentation types, display: none will be dependent on a given presentation. E.g. some elements might have display: none when viewed in a desktop browser, but not a mobile browser. Or, be hidden visually but still available to a screen-reader.

Can I use aria-label and aria-hidden= true on the same element?

aria-hidden will hide the element completely to assistive technology, such as screen readers and braille devices. The element will not be in the accessibility tree (kind of like the DOM tree) so a screen reader user will not know the element is there. The aria-label will be ignored because it's hidden.

If you want to ignore the contents of an element, then it would be the nested element that you put aria-hidden on.

<span aria-label="Favourite">
  ...
  <span aria-hidden="true">you can't see me</span>
  ...
</span>

However, even that example isn't quite right because it has an aria-label on an element that has no semantic meaning. Many screen readers will ignore the aria-label (it won't be read) if the html tag you're using doesn't have any semantic meaning unless you also specify a role.

A <span> doesn't mean anything to a screen reader. Semantic tags such as <h1>, <li>, <table>, <section>, <header>, <footer>, etc all have meaning to a screen reader. Those tags will be announced as a heading or a list or a table or a region, etc. A <span> isn't announced as anything. If the screen reader is walking through the accessibility tree using the up/down arrow keys, if the <span> contains text, the text will be read but that's it.

Is presence of aria-hidden sufficient or is value set to true required (aria-hidden= true )

aria-hidden must have a value of true|false. Note, however, that aria-hidden is not needed if you are using the hidden attribute or if you are using CSS visibility:none or display:hidden. All three of these latter three ways to hide will also hide the element from a screen reader. You only need aria-hidden="true" if there's something on the display that you want to hide from a screen reader, such as a decorative element that does not add meaning to the page.

If you are "hiding" an object by setting its font size to 0 or using a clipping rectangle or "pushing" the element off the screen with x or y, then you will need to set aria-hidden="true" on that element because the former techniques are only visually hiding the element and not truly hiding the element.

Do I need to use aria-hidden on an element whose visibility is hidden?

I've linked to a few posts that will answer your questions in more detail, but to quickly answer them:

1. The modal won't need aria-hidden=true if it is already hidden with visibility: hidden as this will also remove it from the accessibility tree. See this blog post: https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html

2. Yes, you should add aria-hidden=true to your .page if you're not hiding it with css, but just obscuring it with like z-index. The WAI documentation from https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box says the following:

In order to ensure proper focus handling on mobile devices it is also advisable to mask the page background (i.e. all page elements except the content of the modal custom dialog) by setting its aria-hidden attribute to true once the dialog is displayed (and back to false when the dialog is closed). Note that this masking should happen after the script has moved the focus to the dialog.

Does aria-hidden need a value?

The current version of spec indicates that "aria-hidden" is a state, and it could have three values:

false: The element is exposed to the accessibility API as if it was rendered.

true: The element is hidden from the accessibility API.

undefined (default): The element's hidden state is determined by the user agent based on whether it is rendered.

This means that when aria-hidden attribute is set on an element without an explicit true or false value, it will be considered hidden if it is not rendered.

Can I do <div aria-hidden> instead of <div aria-hidden="true"> or should I always do <div aria-hidden="true">?

<div aria-hidden> and <div aria-hidden="true"> are not equivalent, and you must set aria-hidden="true" if the element is visible on screen but you wish to hide it from the accessibility API.

What are these attributes: `aria-labelledby` and `aria-hidden`

HTML5 ARIA attribute is what you're looking for. It can be used in your code even without bootstrap.

Accessible Rich Internet Applications (ARIA) defines ways to make Web
content and Web applications (especially those developed with Ajax and
JavaScript) more accessible to people with disabilities.

To be precise for your question, here is what your attributes are called as ARIA attribute states and model

aria-labelledby: Identifies the element (or elements) that labels the current element.

aria-hidden (state): Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented
by the author.

---

Related Topics