Comparison
aria-hiddenvsVisually hidden
aria-hidden
you hid the decorative icon from screen readers while leaving it perfectly visible on screen.
An attribute removing an element and its entire subtree from the accessibility tree while leaving it rendered. It is correct for decoration that duplicates adjacent text, and dangerous everywhere else: putting it on anything focusable produces a control a keyboard can reach and a screen reader cannot describe. It is not a way to hide things visually and it does not stop focus, which is what `inert` is for.
Full entry →Visually hidden
the extra context is in the markup for screen readers but takes up no visible space on the page.
A CSS pattern that removes content from view while leaving it in the accessibility tree, used for context a sighted user gets from layout. It has to be the clipping-based pattern: `display: none` and `visibility: hidden` remove it from assistive technology too, and moving it far off-screen creates scroll bugs. Overusing it produces a page that reads quite differently from how it looks, which is its own accessibility problem.
Full entry →