Starability.css - Accessible rating with animations on top

Accessible rating forms with cute animations on top. The name is the combination of two words: star and accessibility (or ability in general, whatever pleases you). Starability ratings are made with HTML, CSS (no JavaScript), and are accessible by keyboard, so even people using screen readers are able to use them. To achieve this effect I am using the sibling combinators technique that was introduced by Lea Verou in "Accessible star rating widget with pure CSS" blogpost, but it is bit upgraded: does not rely on a reverse order of the inputs, what makes it even more accessible. The goal of this small library was to combine the Lea's technique with neat animations and make it easy to quickly use it on your website.

Remember: to submit the data you will need to add a bit of your own code. Here we have just a fieldset with a collection of radio buttons, neatly styled. There are no dependencies in this library.

Important: Since version 2.0 the library does not rely on a reverse order of inputs. This means that the issue with the keyboard arrows moving in a reverse direction is no longer there. It is strongly advised to update the HTML structure in your project, although the updated CSS doesn't break the functionality even for the previous version of HTML markup.

Demo

You can check how Starability.css looks here.

Folder Structure

This step by step tutorial is based on an assumption that project directory structure looks as follows:

index.html
/css
- css file with chosen rating (eg.: starability-fade.min.css)

If you have a different file structure, remember to update file path for CSS stylesheet links (in HTML <head>).

How to use

Copy the structure of HTML (fieldset and insides), to make sure the styles work correctly. If you want more than one rating widget on the same page, remember that the id's need to be different for each radio buttons collection:

<fieldset class="starability-basic">
  <legend>First rating:</legend>
  <input type="radio" id="no-rate" class="input-no-rate" name="rating" value="0" checked aria-label="No rating." />
  <input type="radio" id="first-rate1" name="rating" value="1" />
  <label for="first-rate1" title="Terrible">1 star</label>
  <input type="radio" id="first-rate2" name="rating" value="2" />
  <label for="first-rate2" title="Not good">2 stars</label>
  <input type="radio" id="first-rate3" name="rating" value="3" />
  <label for="first-rate3" title="Average">3 stars</label>
  <input type="radio" id="first-rate4" name="rating" value="4" />
  <label for="first-rate4" title="Very good">4 stars</label>
  <input type="radio" id="first-rate5" name="rating" value="5" />
  <label for="first-rate5" title="Amazing">5 stars</label>
</fieldset>

<fieldset class="starability-basic">
  <legend>First rating:</legend>
  <input type="radio" id="no-rate" class="input-no-rate" name="rating" value="0" checked aria-label="No rating." />
  <input type="radio" id="second-rate1" name="rating" value="1" />
  <label for="second-rate1" title="Terrible">1 star</label>
  <input type="radio" id="second-rate2" name="rating" value="2" />
  <label for="second-rate2" title="Not good">2 stars</label>
  <input type="radio" id="second-rate3" name="rating" value="3" />
  <label for="second-rate3" title="Average">3 stars</label>
  <input type="radio" id="second-rate4" name="rating" value="4" />
  <label for="second-rate4" title="Very good">4 stars</label>
  <input type="radio" id="second-rate5" name="rating" value="5" />
  <label for="second-rate5" title="Amazing">5 stars</label>
</fieldset>

Add a stylesheet with a name of an animation that works best for your app name inside your website's <head> element. There are the minified versions or standard CSS files. Let's say we want a fading animation:
```
<head>
  <link rel="stylesheet" type="text/css" href="css/starability-fade.min.css"/>
</head>
```
If you wish to use more than one animation per website (though better stick to one!), you can include the file with all of the animations combined:
```
<head>
  <link rel="stylesheet" type="text/css" href="css/starability-all.min.css"/>
</head>
```
Add the chosen rating version class name to the fieldset element in your HTML. For our fading animation you would have to add the .starability-fade class:
```
<fieldset class="starability-fade">
```

List of rating animations

For now you can choose one of the animations listed below. Go to the demo to see how they look.

starability-basic
starability-slot
starability-grow
starability-growRotate
starability-fade
starability-checkmark
starability-heart
starability-heartbeat
starability-coinFlip (by Paulina Materna)

Supported browsers

Starability.css works in IE10+ and all modern browsers. If you want to support browsers below IE10, you should disable animations for them, for example by using Modernizr.

Disabling hover action

This rating system by default reacts to :hover, changing the background image position. This is an operation that causes repaints. If you want to make your website as light as possible, you can remove declaration that will highlight stars on hover:

.starability-fade > input:hover ~ label {
  background-position: 0 -30px;
}

Disabling high contrast mode support

This rating system by default supports high contrast mode for the Windows users. This means that if user is using high contrast mode, there is no star styling and the regular fieldset with checkboxes is displayed. It is not advised to turn this mode off, but it is possible to do that by setting the $high-contrast-enabled variable to false in _variables.scss file

Accessible outline

By default, if user focuses with keyboard on the rating widget, there is an outline around all the stars to make it easier to navigate. This is not visible for users using only mouse. The function can be turned off by setting the $accessible-focus-ring variable to false in _variables.scss file and removing a span with .starability-focus-ring class from the HTML. It is not advised though to remove the outline.

There is also another functionality that can be turned on by changing the $accessible-outline variable value to true. It will show an outline around active stars that are in the keyboard focus. It can enhance the widget's accessibility for some users.

Showing the static rating result

You can add the static results of the rating anywhere you need it. To indicate how many stars were added, change the data-rating value on an element with the starability-result class. Please note, that this supports only integer numbers. If you wish to show the results as the float numbers, you might need to use other solution.

  <h3>Rated element name</h3>
  <p class="starability-result" data-rating="3">
    Rated: 3 stars
  </p>

There is no official support for half-stars, as we don't want to make the library output bigger than needed, but you can easily add the support for showing half-stars in the rating results. To do so, check the answer in this issue.

Further customisation with SASS

If you are well-versed with SASS, you can easily adjust rating widget to your needs, e.g. have a 10-star based system or turn off outline and hover. It can be done by setting true/false values to the variables in the _variables.scss file and running the gulp task to process the files. Of course, to have a 10-stars system you also need add additional radio inputs in your HTML.

If you are not using SCSS syntax, you can also have a 10-star based system. Just remember to change the width of the fieldset element in your CSS, so that the stars would all fit it (for example for 10 stars, the width of fieldset should be 10x the width of a star, so 300px).

Changelog

Check what was changed in the newest version in the Changelog.

Contributors

The library wouldn't be what it is now without:

License

The library is licensed under The MIT License (MIT).

Go to the Lunar Logic website to learn more about us and our work.

LunarLogic/starability

LunarLogic

Reviews

Repository Details