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.

Cart: 3 items

Icons used repeatedly on the page

This is currently implemented using symbol and use.

This is an offsite link . This is another offsite link .

@CoolCompany on Twitter