𝗦𝗩𝗚 𝗜𝗰𝗼𝗻 𝗔𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆: 𝗗𝗲𝗰𝗼𝗿𝗮𝘁𝗶𝘃𝗲 𝘃𝘀 𝗠𝗲𝗮𝗻𝗶𝗻𝗴𝗳𝘂𝗹 𝗜𝗰𝗼𝗻𝘀

𝗦𝗩𝗚 𝗜𝗰𝗼𝗻 𝗔𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆: 𝗗𝗲𝗰𝗼𝗿𝗮𝘁𝗶𝘃𝗲 𝘃𝘀 𝗠𝗲𝗮𝗻𝗶𝗻𝗴𝗳𝘂𝗹 𝗜𝗰𝗼𝗻𝘀

SVGs are in every UI.

You need to make a choice. Is the icon decorative or meaningful?

Decorative icons add style. They repeat text. Hide these from screen readers. Use aria-hidden="true".

Meaningful icons communicate a message. They show a status or an action. These need a name.

Avoid this mistake: Do not put the label on the SVG inside a button. Put the label on the button itself. Hide the SVG.

This way, screen readers say Search, button. They do not say Search image, Search, button.

Standalone icons are different. Use role="img". Give it a clear label. Describe the meaning, not the shape. Do not use Icon or Arrow. Use Next page or Open menu.

Checklist for your SVGs:

• Decorative? Use aria-hidden="true".
• Inside a button? Label the button and hide the SVG.
• Standalone? Use role="img" with a label.
• Complex? Add a title and description.

Accessibility is about the right information. Hide the noise. Expose the meaning.

Source: https://dev.to/svgicons/svg-icon-accessibility-decorative-vs-meaningful-icons-2430