Rehype plugin to make emojis accessible, wrapping emojis in <span> with image role and the emojis name in aria-label>
Last updated 10 months ago by canrau .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install rehype-accessible-emojis 
SYNC missed versions from official npm registry.


Written in Typescript

As I couldn't get gatsby-remark-a11y-emoji working with gatsby-plugin-mdx I made this rehype version to make emojis accessible by wrapping them in a <span role="image"> with aria-label set to the emojis description based on gemoji.



turns into

<span role="img" aria-label="smiling face with open mouth &amp; cold sweat">

so screenreaders and other assistive technology can understand the emojis and act accordingly by for example reading the aria-label.


yarn add -D rehype-accessible-emojis
# or
npm i -D rehype-accessible-emojis


Using Rehype

Given an example.html like

<h1>Hello World!</h1>

<p>???? Hi, I love emojis a lot ????</p>

and example.js like

import vfile from 'to-vfile'
import rehype from 'rehype'
import { rehypeAccessibleEmojis } from 'rehype-accessible-emojis'

  .process(vfile.readSync('example.html'), (_, file) => {

running node example results in

<h1>Hello World!</h1>

  <span role="image" aria-label="waving hand">????</span> Hi, I love emojis a lot
  <span role="image" aria-label="nerd face">????</span>

Using gatsby-plugin-mdx

// gatsby-config.js
  resolve: `gatsby-plugin-mdx`,
  options: {
    rehypePlugins: [require(`rehype-accessible-emojis`).rehypeAccessibleEmojis],


options.ignore (Array, default: ['title', 'script', 'style', 'svg', 'math'])
Tag-names of parents to ignore, to not wrap an emoji within a <script> for example.
Will be merged with the defaults.

Mentioned in


MIT © Can Rau

Current Tags

  • 0.3.2                                ...           latest (10 months ago)

5 Versions

  • 0.3.2                                ...           10 months ago
  • 0.3.1                                ...           10 months ago
  • 0.3.0                                ...           10 months ago
  • 0.2.0                                ...           10 months ago
  • 0.1.0                                ...           10 months ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (4)
Dev Dependencies (3)
Dependents (2)

Copyright 2014 - 2016 © |