Understanding role="presentation"
The ARIA role="presentation" (or its synonym role="none") instructs assistive technologies, such as screen readers, to ignore the semantic meaning of an element. Essentially, the element is treated as if it has no role, while its children remain accessible.
To remove semantics from purely decorative elements, like a layout table.
When you want screen readers to ignore a container but still expose its child elements.
For icons or images that are decorative and already have descriptive text elsewhere.
Caution: Applying role="presentation" to elements that normally convey important semantic meaning (like buttons or links) can make content inaccessible.
<table role="presentation">– removes table semantics when used only for layout purposes.<img role="presentation" alt="">– marks an image as decorative so it is ignored by screen readers.<div role="presentation">Text</div>– the div itself is ignored, but its content remains accessible.
Use role="presentation" only for visual or structural elements that don’t convey meaning.
Avoid using it on interactive elements like buttons, links, or form controls.
Prefer semantic HTML whenever possible; use the presentation role sparingly.