Code examples
As radio group
This radio group uses CSS to reverse the visual order of the radio inputs while preserving accessibility.
Displaying star ratings
The element must clearly express the rating and scale.
Rating: 4 out of 5 stars
Given that I am on a screen with a star rating input
When I use | I see/hear |
---|---|
Tab | Focus visibly moves to the checked radio button in the group. if a radio button is not checked, focus moves to the first radio button in the group. |
Spacebar | If the radio button with focus is not checked, changes the state to checked. otherwise, does nothing. |
Arrow-keys | Moves focus to and checks the previous or next radio button in the group |
When I use | I hear |
---|---|
Swipe | Focus moves to the element, expresses its state |
Doubletap | If the radio button with focus is not checked, changes the state to checked. otherwise, does nothing. |
Reads | I hear |
---|---|
Name | Its label and purpose is clear |
Role | It identifies itself as a radio option |
Group | Each option has an associated label and the radio group name |
State | It expresses its state (selected, checked, disabled) |
A star rating input must meet WCAG principles:
This radio group uses CSS to reverse the visual order of the radio inputs while preserving accessibility.
The element must clearly express the rating and scale.
Rating: 4 out of 5 stars