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

html

accessibility

aria-hidden

web-development

byNikita Barsukov·Oct 21, 2024

The hidden attribute essentially makes element disappear — it's equivalent to applying display: none; in CSS. However, the aria-hidden attribute only instructs screen readers to ignore the element, while it remains fully visible to users who aren't using assistive technology.

Here's the they work:

<!-- Invisible to all: Poof, like a magician's trick -->
<div hidden>I'm like a ninja, invisible!</div>

<!-- Invisible to screen readers: Ignored like the last piece of broccoli -->
<div aria-hidden="true">I'm here, but for screen readers, I'm on a stealth mission.</div>

Unpacking the implications: Accessibility

When choosing between hidden and aria-hidden, accessibility should be your priority. If an element should be neither seen nor heard use hidden. If it's part of the visible scene but wouldn't make sense to a screen reader, go for aria-hidden.

Instances where `hidden` shines:

An inactive modal dialog: hidden sends it off-stage.
Conditional content: If the element isn't relevant at the moment, for example, hidden tabs in a tab interface.

Where `aria-hidden` stands out:

Decorative images: Tagging with aria-hidden="true" keeps screen readers from announcing them.
Non-interactive visual containers: Elements that don't serve any purpose other than visual aesthetics.

'aria' attributes: Interpreting the lingo

Web accessibility is a crucial aspect of web development, and ARIA (Accessible Rich Internet Applications) plays a significant role in this. The aria- prefix signals attributes meant to enhance the usability of web content for those relying on assistive technologies.

aria-hidden and other ARIA attributes need to be implemented correctly for an enhanced user experience. Misplaced or misused, they can lead to content being inaccessible to some users.

Misuses and remedy: Real-world examples

Misusing hidden and aria-hidden can lead to accessibility issues or cause confusion for certain users.

Misuse of `aria-hidden`

Setting aria-hidden="true" on a focusable element makes it invisible to screen readers but it can still receive focus, which can confuse users relying on keyboard navigation.

Avoid `hidden` misuse

Make sure elements with the hidden attribute do not contain interactive content. If interactive elements need to be conditionally hidden, it's often more safe to manage their visibility with CSS and JavaScript.

Words of advice: A developer's checklist

In implementing hidden or aria-hidden, these points are worth considering:

Test with real screen readers: Tools like NVDA or VoiceOver give you a sense of how your implementation affects end-users.
Responsive behavior: How do your hidden elements behave on different screen sizes? Have you considered that?
Consider CSS alternatives, like off-screen placement (position: absolute; left: -9999px;) for cases where hidden isn't the best option, maintaining accessibility.
Examine user experience: Always weigh how the use of these attributes impacts users, disabled or otherwise.