rehype-accessible-emojis
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.

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.

So

????

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

License

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)
Downloads
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 © taobao.org |