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:
- 📦 Framework github.com/CodyHouse/codyhouse-framework
- 🎨 A1 Theme github.com/CodyHouse/a1-codyframe-theme
Here's the video tutorial:
Originally published on CodySchool
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.