Figure 1 : Example where the decorative icons are hidden using aria-hidden attribute
Hidden content on a webpage is not supposed to be made available for screen reader users by default. It
SHOULD be made available on user interaction in widgets such as Accordions, Tabs, and Menus.
NOTE:
New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS
and JavaScript (when needed), along with a working demo.
The aria-hidden attribute is used to hide content on a webpage from screen
readers.
If content is to be hidden for all users, then it is advisable to use CSS
display: none property or HTML hidden attribute.
The aria-hidden attribute SHOULD NOT be used on
interactive elements that are supposed be available for screen reader users.
The aria-hidden attribute SHOULD NOT be used on content
that is visible on the page. This may cause confusion for low vision users who use a screen reader.
The aria-hidden attribute SHOULD primarily be used to
hide content that is redundant content, decorative SVG images or content that appears on user
interaction such as menus, accordion, and tabs.
