In this tutorial, we'll go through the different steps of creating a rating widget, 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.

Requirements

To follow along the video tutorial, fork this pen on Codepen:

🕹 https://codepen.io/codyhouse/pen/Wqvpmm

or download CodyFrame on Github:

• 📦 Framework https://github.com/CodyHouse/codyhouse-framework
• 🎨 A1 Theme https://github.com/CodyHouse/a1-codyframe-theme