Using universal page templates to build sites faster: Join us next Tuesday

ContactSign Up for Free
Community Plugin
View plugin on GitHub


Unit tests Integration tests

Plugin for Remark to make emoji accessible. This plugin wraps emoji in a <span> and sets the name of the emoji as aria-label. remark-a11y-emoji also works with Gatsby.

Made by 👨‍💻Florian Eckerstorfer in beautiful 🎡 Vienna, Europe.

Table of Contents

  1. Installation
  2. Configuration
  3. Configuration with Gatsby
  4. Code of Conduct
  5. Contributing
  6. License
  7. Change-log


You need to install @fec/remark-a11y-emoji with NPM or Yarn. Since this is a plugin for Remark, I assume you already have Remark installed and configured.

npm install -D @fec/remark-a11y-emoji
yarn add --dev @fec/remark-a11y-emoji


You can use @fec/remark-a11y-emoji like any other Remark plugin. The plugin produces an AST (hast, rehype), which you can serialize to HTML with rehype-stringify:

import remark from 'remark';
import a11yEmoji from '@fec/remark-a11y-emoji';
import rehypeStringify from 'rehype-stringify';
import remarkRehype from 'remark-rehype';

const processor = remark()

Configuration with Gatsby

module.exports = {
  // ...
  plugins: [
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          // ...

Code of Conduct



To contribute to @fec/remark-a11y-emoji, follow these steps:

  1. Fork this repository.
  2. Create a branch: git checkout -b <branch_name>.
  3. Install dependencies: npm install
  4. Make your changes (and don’t forget to update the tests)
  5. Don’t forgot to run the tests: npm test
  6. Commit your changes: git commit -m '<commit_message>'
  7. Push to the original branch: git push origin <project_name>/<location>
  8. Create the pull request.

Alternatively see the GitHub documentation on creating a pull request.



Change log


© 2023 Gatsby, Inc.