https://github.com/schne324/star-rating

Accessible star rating
https://github.com/schne324/star-rating

Last synced: about 2 months ago
JSON representation

Accessible star rating

• Host: GitHub
• URL: https://github.com/schne324/star-rating
• Owner: schne324
• Created: 2015-01-19T15:14:01.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-09-24T19:56:13.000Z (over 9 years ago)
• Last Synced: 2024-04-24T10:24:50.362Z (9 months ago)
• Language: HTML
• Size: 180 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Star Rating

This keyboard/screen reader friendly star rating system allows you to rate various things.  

## Roles / Attributes used

 - Each set of stars are marked up with the radiogroup role (`
`)

 - The UL is aria-labelledby the groups heading (`
`)

 - Each 'star' list item within the UL receives the radio role (`
`)

 - Each 'star' list item within the UL is aria-labelledby the element that updates as you rate stuff (`
`)

 - When selected, the list item receives the `aria-checked="true"` attribute, while the others receive `aria-checked="false"`

 - When selected, the list item receives `tabindex="0"` property, while the others recieve `tabindex="-1"`

     - This is to mimic the default behavoir of native radios

 - Each icon receives `role="presentation"` because there is no real purpose for those other than decoration.


## Keyboard functionality

 - To navigate to a group, simply use TAB

 - To rate the given thing, use the arrow keys that work with native radio buttons (LEFT, UP, RIGHT, and DOWN arrow keys)

## COMING SOON!

 - Half star rating

 - jQuery plugin to convert existing radio groups to star ratings