Starability: Create Accessible Star Ratings in CSS

Starability lets you create star ratings in pure HTML and CSS with different animations.

Starability: Create Accessible Star Ratings in CSS

Overview

Using Starability.css you can create and add accessible star ratings. You have the option of choosing from a diverse list of animations and styles. Plus, the star ratings created using Starability work in pure CSS and HTML.

Starability ratings play well with keyboard controlled functions as well. For people using screen readers, Starability is a wonderful concept.

Mode of Operation

First, you need to copy the entire HTML structure. Be sure to use different IDs for different radio buttons.

Next, simply add the stylesheet with the name of the animation that you wish to include in your project. For example, if you wish to add the fading animations, this is how your code might look like:

<head>
<link rel="stylesheet" type="text/css" href="css/starability-fade.min.css"/>
</head>

You can choose to include more than one animation per website, if that’s what you want. Thereafter, you just need to add the chosen rating version class name to the fieldset element in HTML. Once again, for the fading animation:

<fieldset class="starability-fade">

Starability currently supports the following animations:

  • starability-basic
  • starability-slot
  • starability-grow
  • starability-growRotate
  • starability-fade
  • starability-checkmark

Also, bear in mind that by default Starability supports hover animations. However, if you do not need hover actions, you can choose to disable them, as under:

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

You can use SASS to further customize Starability.

Verdict

For adding star ratings and related animations to your page, Starability is a very simple and straightforward solution. It is lightweight, does not require external plugins or JavaScript, and works in virtually every modern web browser (IE 10 and higher). The best part? The star ratings created using Starability are accessible and therefore, provide for better UX overall.

Starability is fully open source and comes with an MIT License.

Website  GitHub

Liked what you read?

Sign up for the Code Carbon Newsletter and receive weekly updates about new resources, tools as well as deals and discounts on awesome services.

One email per week; no spam, no nonsense; unsubscribe anytime.