✨ keith is

Accessible Emoji

2020 December 23rd
2
Back to Snippets
javascript
export function Emoji({ icon, label }) {
return <span aria-hidden={!label} aria-label={label} role="img">{icon}</span>
}

Usage

With a label

If you include a label, it will set aria-hidden to false, and will fill in the aria-label with the intended task or action you are conveying with the emoji.

jsx
<Emoji icon='🛒' label='Add To Cart' />
🛒

Without a label

This will apply aria-hidden, telling screen readers they can skip it without missing any important information.

jsx
<Emoji icon='🙃' />
home