Icons in links and buttons
Buttons
Icons sitting next to text
Icon only, no text, accessibility technique #1: accessible visually hidden text
Icon only, no text, accessibility technique #2: accessible visually hidden text with [hidden] and aria-labelledby
Icon only, no text, accessibility technique #3: using aria-label
Links
Note: aria-hidden on icon because it’s purely decorative.
Icons used repeatedly on the page
This is currently implemented using symbol
and use
.
This is an offsite link . This is another offsite link .