Свойство Състояние на контрола

`aria-valuenow`

Текущата числова стойност на уиджет от тип „диапазон“ — плъзгач, лента за напредък, поле за въртяща се стойност, лента за превъртане. Комбинирайте с aria-valuemin и aria-valuemax, за да може помощната технология да обяви смислена позиция. Използвайте aria-valuetext за нечислови надписи.

Кога да се използва

Върху всеки персонализиран уиджет, представящ стойност в диапазон: role="slider", role="progressbar", role="spinbutton", role="scrollbar". Атрибутът носи текущата числова стойност. Почти винаги се комбинира с aria-valuemin и aria-valuemax, чрез които помощната технология може да изчисли и обяви процент и абсолютна стойност.

Обикновено не е необходим при нативни елементи <input type="range"> или <progress> — браузърът автоматично изнася стойността. Прибягвайте до aria-valuenow, когато уиджетът е изграден от персонализиран маркиращ език.

Как работи

Стойността е число (цяло или дробно). Помощната технология го обявява като текущата позиция на уиджета, често заедно с процент от пътя между минималната и максималната стойност: „Сила на звука, плъзгач, 7 от 10, 70 процента.”

Ако стойността на уиджета е по-смислена като надпис, отколкото като число — „Петък” на плъзгач за избор на ден или „Средна” на тристепенен селектор — задайте aria-valuetext с четим от човека надпис. Помощната технология ще прочете aria-valuetext вместо aria-valuenow, докато помощните технологии, игнориращи valuetext, все още разполагат с числовия резерв. Задавайте и двата атрибута едновременно.

При progressbar можете да пропуснете aria-valuenow за неопределен напредък (случаят с въртящ се индикатор). При slider атрибутът е задължителен.

Чести грешки

Задаване на aria-valuenow без aria-valuemin и aria-valuemax. Помощната технология няма диапазон и обявява просто число без контекст.
Актуализиране на визуалната позиция чрез CSS трансформации без актуализиране на aria-valuenow. Потребителите на екранни четци чуват началната стойност завинаги.
Стойност извън минималния/максималния диапазон — aria-valuenow="150" при максимум 100. Помощната технология или я ограничава, или я обявява буквално; и в двата случая това е грешка.
Пропускане на aria-valuetext за нечислови скали. Потребителите чуват „3 от 5”, когато скалата всъщност е „Ниска / Средно-ниска / Средна / Средно-висока / Висока”.
Използване на aria-valuenow върху елементи, различни от уиджети с диапазон — обикновен бутон или икона. Атрибутът няма ефект извън поддържаните роли.
Неприлагане на клавиатурен модел. Уиджетът трябва да реагира на клавишите-стрелки, Home, End, Page Up, Page Down — самият атрибут не осигурява клавиатурна поддръжка.

Пример

<div
  role="slider"
  tabindex="0"
  aria-label="Volume"
  aria-valuemin="0"
  aria-valuemax="10"
  aria-valuenow="7"
  aria-valuetext="7 out of 10"
>
  <div class="slider-thumb" style="left: 70%"></div>
</div>