ARIA Rule 4 – Stop Hiding Interactive Elements from Screen Readers

The fourth rule of ARIA is don’t use role="presentation" or aria-hidden="true" on Focusable Elements.

Why? Because assistive technology (like screen readers) needs to interact with anything users can interact with. Hiding or stripping meaning from interactive elements creates major accessibility barriers.

What is role="presentation"?

• Removes semantic meaning from an element – turns it into a plain <div>.
• Does not inherit – nested elements don’t automatically lose meaning.
• Common use: stripping meaning from layout tables (especially in older HTML or email templates) without rebuilding the entire structure.
• If a table has role="presentation", nested tables must also have it manually applied.
• No need to apply it to elements like <thead>, <tbody>, or <tr> – those don’t carry standalone meaning.

What is aria-hidden="true"?

• Hides content from assistive technology.
• Does inherit – everything inside the element is hidden too.
• Ideal for non-interactive decorative elements that don’t provide useful information.
• Example: hiding a complex SVG used purely for decoration to avoid cluttering the screen reader experience.
• If you want to hide content visually and functionally (from everyone), use display: none instead.

Key takeaway:

• Never apply either role="presentation" or aria-hidden="true" to focusable or interactive elements – it prevents users of assistive tech from accessing crucial functionality.

By keeping interactive elements fully exposed to assistive technology, you ensure that everyone can use your site—keyboard, screen reader, and all.

Transcript

The fourth rule of ARIA is not to use role="presentation" or aria-hidden="true" on focusable elements. The reason is we need to make sure that things that are intended to be interacted with are available to assistive technology to interact with them.

role=”presentation”

What is  role="presentation"?  role="presentation" removes meaning from elements. It basically turns a semantic element into a <div>. It does not inherit, which means that if you have nested elements inside Inside of other elements, they will not inherit the  role="presentation".

When do we use  role="presentation"? It’s used when we had a meaningful element in the wrong place. One of the most common examples is when a table was used purely for layout purposes, especially in older email templates. We might not always want to completely rebuild older content. In this case, we can remediate it by adding  role="presentation".

Here I have a code sample of the most common use, <table role="presentation">. Again, if there were nested tables inside of this one, I would also need to add  role="presentation" on the nested tables. I don’t need to worry about elements such as <thead> or <tbody> or <tr> because those don’t really have meaning on their own.

Only the table element has the meaning that was associated. aria-hidden="true" hides elements from assistive technology. Technology. It does inherit. If I have a <div> with aria-hidden="true" on it, everything inside of that <div> will also be hidden.

aria-hidden=”true”

When should we use aria-hidden="true"? The most common time that I use it is for decorative elements that if I deleted this element completely, no information would be lost. Decorative elements are not interactive.

For example, let’s say I have an SVG. SVGs can be massive data structures, all sorts of nested content. I might apply SVG, aria-hidden="true", which would hide the SVG and all of the nested content.

This can be particularly helpful since sometimes in an SVG, Usually, letters or other characters are used, but the element still doesn’t have any meaning or any use. It’s just decorative.

I want to hide all of that content from assistive technology, which would otherwise try to read out all of that information. If I want to hide something from everyone, then I want to use display none.

I hope you found this helpful. If you did, please make sure to like, share with your friends, and subscribe to the channel for more information on web accessibility.