Rating Slider Example

WARNING! Some users of touch-based assistive technologies may experience difficulty utilizing widgets that implement this slider pattern because the gestures their assistive technology provides for operating sliders may not yet generate the necessary output. To change the slider value, touch-based assistive technologies need to respond to user gestures for increasing and decreasing the value by synthesizing key events. This is a new convention that may not be fully implemented by some assistive technologies. Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.

Following is an example of a rating input that demonstrates the slider 설계 패턴. This rating widget employs a slider because the slider pattern supports step values of any size. This particular input enables half-star steps. A typical five-star rating widget that allows only five possible values could instead be implemented as a radio group.

유사한 예는 다음과 같습니다:



접근성 특성

키보드 지원

Right Arrow Increases slider one half star.
Up Arrow Increases slider one half star.
Left Arrow Decreases slider one half star.
Down Arrow Decreases slider one half star.
Page Up Increases slider value multiple steps. In this slider, jumps one star.
Page Down Decreases slider value multiple steps. In this slider, jumps one star.
Home Sets slider to its minimum value, no stars.
End Sets slider to its maximum value, five stars.

Role, Property, State, Tabindex 어트리뷰트

역할(role) 어트리뷰트 엘리먼트 사용법
slider div
  • Identifies the element as a slider.
  • Set on the div that represents the movable thumb because it is the operable element that controls the slider value.
tabindex="0" div Includes the slider thumb in the page tab sequence.
aria-valuemax="5" div Specifies the maximum value of the slider.
aria-valuemin="0" div Specifies the minimum value of the slider.
aria-valuenow="NUMBER" div Indicates the current value of the slider.
aria-valuetext="STRING" div
  • A string value that provides a user-friendly name for the current value of the slider -- the number of stars and half stars.
  • When initialized, and when the slider loses focus, the string also includes the maximum value of five stars, e.g., 3 of 5 stars.
aria-labelledby="IDREF" div Refers to the element containing the name of the slider.
aria-hidden="true" svg Removes the SVG elements from the accessibility tree to prevent assistive technologies from presenting them as elements separate from the slider.

Javascript와 CSS 소스 코드

HTML Source Code