Package Exports

rehype-accessible-emojis

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rehype-accessible-emojis) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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