Using aria-hidden on Decorative SVG Icons

The aria-hidden attribute is an essential web accessibility feature used to control how assistive technologies interpret page elements. When configured as aria-hidden="true" on decorative Scalable Vector Graphics (SVGs), its primary function is to remove the icon from the accessibility tree. This ensures that screen readers completely ignore the visual graphic, preventing unnecessary noise and creating a cleaner browsing experience for users with visual impairments.

The Role of the Accessibility Tree

Screen readers rely on the browser’s accessibility tree—a parallel structure to the Document Object Model (DOM)—to announce content to users. By default, browsers may attempt to expose inline SVGs to assistive tech. Depending on the browser and screen reader combination, an unlabelled SVG might be announced as an “unlabeled image,” an empty graphic, or even read aloud internal code fragments like <title> or <path> elements. Applying aria-hidden="true" explicitly tells assistive technologies to skip the element entirely.

What Makes an SVG “Decorative”?

An icon is considered decorative when it serves only as visual reinforcement and does not convey unique information that is otherwise unavailable in text. Common examples include:

• A magnifying glass icon positioned directly next to the visible text word “Search”.
• A shopping cart icon paired with the visible label “View Cart”.
• Background design flourishes, bullet shapes, or purely aesthetic illustrations.

In these instances, announcing the presence of the graphic is redundant because the adjacent text already conveys the complete meaning.

Proper Implementation

To hide a decorative SVG, place aria-hidden="true" directly on the <svg> element:

<button type="button">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
    <!-- SVG paths go here -->
  </svg>
  <span>Download File</span>
</button>

Adding focusable="false" is also recommended to prevent older versions of Internet Explorer and Edge from allowing keyboard users to tab directly into the SVG element.

When Not to Use aria-hidden

The aria-hidden attribute should never be used on an SVG that conveys standalone meaning. For example, if a button contains only a trash can icon without any visible text, setting aria-hidden="true" on the SVG without providing an accessible name on the parent button makes the control completely invisible to screen reader users. In standalone cases, the icon must be given an accessible name using an aria-label on the containing interactive element, an internal <title> tag with proper associations, or an accompanying visually hidden text element.