mozilla
Your Search Results

    Using the aria-valuenow attribute

    The aria-valuenow attribute is used to define the current value for a range widget such as a slider, spinbutton or progressbar. If the current value is not known, the author should not set the aria-valuenow attribute. If the aria-valuenow has a known minimum and maximum value, authors should set the aria-valuemin and aria-valuemax attributes.

    When the rendered value cannot be accurately represented as a number, authors SHOULD use the aria-valuetext attribute in conjunction with aria-valuenow to provide a user-friendly representation of the range's current value. For example, a slider may have rendered values of small, medium, and large. In this case, the values of aria-valuenow could range from 1 through 3, which indicate the position of each value in the value space, but the aria-valuetext would be one of the strings: small, medium, or large.

    aria-valuenow is a required attribute of role slider, scrollbar and spinbutton.

    Value

    String representation of a number

    Possible effects on user agents and assistive technology 

    For elements with role progressbar and scrollbar, assistive technologies SHOULD render the actual value as a percentage, calculated as a position on the range from aria-valuemin to aria-valuemax if both are defined, otherwise the actual value with a percent indicator.

    For elements with role slider and spinbutton, assistive technologies SHOULD render the actual value to users.

    Note: Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.

    Examples

    Example 1: 

    The snippet below shows a simple slider with a current value of 4.

    <div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
    

    Working Examples:

    Notes 

    Used With ARIA Roles

    Compatibility

    TBD: Add support information for common UA and AT product combinations

    Additional resources

     

    Document Tags and Contributors

    Contributors to this page: Sheppy, smarvin, GMali, anastasia
    Last updated by: smarvin,