Your Search Results

    Using the aria-valuetext attribute

    The aria-valuetext attribute is used to define the human readable text alternative of aria-valuenow for a range widget such as progressbar, spinbutton or slider.

    Authors SHOULD only set the aria-valuetext attribute when the rendered value cannot be accurately represented as a number. 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 thearia-valuetext would be one of the strings: small, medium, or large.


    String representation of a number

    Possible effects on user agents and assistive technology 

    If the aria-valuetext attribute is absent, assistive technologies will rely solely on the aria-valuenow attribute for the current value. If aria-valuetext is specified, assistive technologies SHOULD render that value instead of the value of aria-valuenow.

    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.


    Example 1: 

    The snippet below shows a simple slider for selecting a day of the week. The value of the slider is numeric, and the aria-valuetext attribute is used to provide the name of the day. The application would programmatically update aria-valuetext depending on aria-valuenow.

    <div role="slider" aria-valuenow="1" 
    	aria-valuemin="1" aria-valuemax="7"

    Working Examples:


    Used With ARIA Roles


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

    Additional resources


    Document Tags and Contributors

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