In web development, it's common to need to hide elements from being displayed on the screen. However, there are different ways to achieve this, and it's important to understand the difference between them. In this blog post, we will explore the difference between the hidden attribute, aria-hidden attribute, and the role attribute with values presentation and none.
In HTML, there are a few different ways to hide elements from being displayed on the screen:
- hidden: The hidden attribute is a boolean attribute that can be added to any HTML element. When present, it indicates that the element should not be displayed on the screen. However, it is not a standard ARIA attribute and it is not supported by all browsers.
- aria-hidden="true": The aria-hidden attribute is an ARIA (Accessible Rich Internet Applications) attribute that can be added to any HTML element. When set to true, it indicates that the element should not be exposed to assistive technologies such as screen readers. However, the element will still be rendered and visible on the screen. This attribute can be useful for hiding elements that are not important for accessibility but still need to be present in the page's source code.
- role="presentation" or role="none": The role attribute is an ARIA attribute that can be added to any HTML element. It is used to indicate the purpose and function of an element to assistive technologies such as screen readers. When set to presentation or none, it indicates that the element should not be exposed to assistive technologies and should be treated as if it does not exist. This attribute can be useful for hiding elements that are not important for accessibility and should be completely removed from the accessibility tree. This attribute can be useful for hiding elements that are used for visual styling or layout purposes and do not have any semantic meaning.
It is important to note that while all of these attributes can be used to hide elements from being displayed on the screen, they have different effects on accessibility. The hidden attribute only affects visual display, whereas the aria-hidden attribute and role attribute also affect accessibility by hiding the element from assistive technologies. It's also important to use the correct attribute for the intended purpose, for example, if you want to hide an element from both sighted users and assistive technologies, it is recommended to use both hidden and aria-hidden or role="none" attributes.
In conclusion, the hidden attribute is a boolean attribute that can be used to hide elements from being displayed on the screen, the aria-hidden attribute is used to hide elements from assistive technologies, and the role="presentation" or role="none" attribute is used to hide elements from assistive technologies and remove it from the accessibility tree. It's important to use the correct attribute for the intended purpose and in combination with other accessibility features to provide a more comprehensive and user-friendly experience for all users.