aria-valuenow property

aria-valuenow property is used while developing range widgets. For a range widget a minimum and maximum values need to be defined. Examples of a range widget are sliders such as volume button on windows operating system. The volume button has a minimum value of 0% to a maximum value of 100%. Other range widgets include progress bars, scrollbars, spin buttons and sliders.

Aria-valuenow defines the current value in the range widget. aria-valuemax exposes the maximum value that is allowed in the range widget while aria-valuemin exposes the minimum value. If the author does not know the current value aria-valuenow should not be defined. The value of aria-valuenow should be any number between the values of aria-valuemax and aria-valuemin. Eg: If the value of aria-valuemin is 1 and aria-valuemax is 5 then the value of aria-valuenow should range between 1 and 5, it cannot be greater than 5 or less than 1. If the current value is a string instead of aria-valuenow use aria-valuetext property.

For progressbar and scrollbar widgets assistive technologies should inform the current value i.e. aria-valuenow in percent. If the aria-valuemin and aria-valuemax are not known use the current value as aria-valuenow and add percent indicator to it. If the aria-valuemin and aria-valuemax are known calculate the current position within the range in percent and define it as a value to be exposed with aria-valuenow property. For slider and spin button widgets use the current value to expose via aria-valuenow property.

Values of aria-valuenow property

The value of the aria-valuenow property must be a number. For progressbar and scrollbar widgets the value of aria-valuenow property must be in percentages. The value of aria-valuenow must be less than or equal to aria-valuemax property and greater than or equal to aria-valuemin property.

aria-valuenow used in roles

Inheritted into roles:

aria-valuenow property examples

4 Comments to "aria-valuenow property"

  1. October 19, 2016 - 10:31 am | Permalink

    Hi Rakesh,
    aria-valuenow need not be a just a number or percentage. It can vary depending on the context, usage. For example in a interactive chart with slider to filter the values, aria-value now can represent the co-ordinate values or sometimes the actual values themselves (string).

  2. Nawaz's Gravatar Nawaz
    October 20, 2016 - 12:35 pm | Permalink

    Thanks Rakesh for the info.

    • maxadmin's Gravatar maxadmin
      October 20, 2016 - 1:08 pm | Permalink

      My pleasure Nawaz

Comments are closed.