DEV Community

loading...
Cover image for Tutorial: Create an accessible rating plugin
CodyHouse

Tutorial: Create an accessible rating plugin

Claudia Romano
Web Developer. Co-founder of CodyHouse and Nucleoapp.
・1 min read

In this tutorial, we'll go through the different steps of creating a rating plugin in CSS and JavaScript, with a particular focus on:

  • keyboard accessibility (use Tab key, Space bar and arrow keys to navigate and interact with the component);
  • aria attributes and roles to improve Screen Reader accessibility;
  • no JavaScript support.

Final result:

The Rating plugin is also available as a component in the CodyHouse UI Framework.

To follow along the tutorial, fork this pen on Codepen:
🕹 codepen.io/codyhouse/pen/Wqvpmm

or download CodyFrame on Github:

Here's the video tutorial:

Originally published on CodySchool

Discussion (0)