eleventy-plugin-emoji-rating

Display accessible ratings using emoji

• Usage
  • Config Options
  • Config Examples
• Examples
  • What makes this accessible?
  • More examples

Usage

Install via npm:

npm install @kevingimbel/eleventy-plugin-emoji-rating

Then, include it in your .eleventy.js config file:

const emojiRating = require("@kevingimbel/eleventy-plugin-emoji-rating");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(emojiRating);
};

Config

Config Options

Global config options, set in eleventy.js.

| Option | Type | Default | Description | | ----------- | ---- | ------------- | ----------- | | max_rating | Number | 5 | maximum a rating can be. 5 would mean "x of 5 stars" where 5 is the best. | | emoji | String | "⭐️" | Emoji to display | | emoji_inactive | String | / | Emoji to use for inactive slots (See examples) | | extra_classes | String | / | extra CSS classes for the wrapping element | | htmlTag | String | span | The wrapping element | | aria_label | String | Rating: $rating of $max_rating | The label for screen readers, should contain all important info. $rating will be replaced with the rating, $max_rating with the maximum rating as defined inline or in plugin config |

Config Examples

const emojiRating = require("@kevingimbel/eleventy-plugin-emoji-rating");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(emojiRating, {
    max_rating: 10,
    htmlTag: "div",
    emoji: "🙉",
    emoji_inactive: "🙈"
  });
};

Examples

The plugin provides a shortcode that creates HTML.

<!-- shortcode in Markdown file -->
{% rating "3" %}

<!-- rendered HTML -->
<span class="rating " role="img" aria-label="Rating: 3 of 5">3/5 <span class="rating--icon" aria-hidden="true">⭐️</span><span class="rating--icon" aria-hidden="true">⭐️</span><span class="rating--icon" aria-hidden="true">⭐️</span><span class="rating--icon-inactive" aria-hidden="true"></span><span class="rating--icon-inactive" aria-hidden="true"></span></span>

What makes this accessible?

The generated HTML is fully accessible to screen readers. The aria-label is read out and gives a better info than a text string 3/5 ⭐️⭐️⭐️ would, which is read aloud like "Three slash five emoji-star emoji-star emoji-star", while the accessible one is read out as "Rating: 3 of 5", and the emoji are ignored (aria-hidden) because they do not give any additional info. With a custom aria_label set the emoji could even be represented in words:

const emojiRating = require("@kevingimbel/eleventy-plugin-emoji-rating");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(emojiRating, {
    aria_label: "Rating: $rating of $max_rating stars"
  });
};

More examples

More examples with custom options.

{% rating "4" "🍋" "🍊" "7" %} => 4/7 🍋🍋🍋🍋🍊🍊🍊

{% rating "5" "🤦‍♀️" %} => 5/5 🤦‍♀️🤦‍♀️🤦‍♀️🤦‍♀️🤦‍♀️

{% rating "2" "🙉" "🙈" %} => 2/5 🙉🙉🙈🙈🙈