mozilla
Your Search Results

    Using the aria-valuetext attribute

    Description

    This technique demonstrates how to use 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.

    AuthorsSHOULD 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.

    Value

    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.

    Examples

    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"
    	aria-valuetext="Sunday">
    

    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, Fredchat, anastasia
    Last updated by: Fredchat,