rehype-accessible-emojis

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">
  😅
</span>

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

Install

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

Usage

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'
 
rehype()
  .use(rehypeAccessibleEmojis)
  .process(vfile.readSync('example.html'), (_, file) => {
    console.log(String(file))
  })

running node example results in

<h1>Hello World!</h1>
 
<p>
  <span role="image" aria-label="waving hand">👋</span> Hi, I love emojis a lot
  <span role="image" aria-label="nerd face">🤓</span>
</p>

Using gatsby-plugin-mdx

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

Options

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

Rehype's Plugin List