Icon Accessibility: Decorative vs Informative

How an icon is coded determines whether a screen reader user has an empowering experience or is bombarded with unintelligible noise.

Icons fall into two strict accessibility categories:

1. Decorative Icons: The icon accompanies a visible text label (e.g., a Trash icon next to the word 'Delete'). The icon provides no unique information.
   • Required Code: <svg aria-hidden="true" focusable="false">. This hides the icon from assistive tech so the screen reader doesn't announce 'graphic, Delete' twice.
2. Informative / Standalone Icons: The icon is used alone without visible text (e.g., an 'X' button to close a modal, or a bell icon for notifications).
   • Required Code: Must include an accessible name via aria-label="Close dialog" or an internal <title> tag with a matching role="img".