Стандарти · ARIA

Роля Контрола

slider

Маркира елемент като вход, избиращ стойност от диапазон. Използвайте първо <input type="range">; прибягвайте до role="slider" само когато се нуждаете от потребителска следа — например двуплъзгач за избор на диапазон, който родното решение не поддържа.

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

Използвайте <input type="range">. Родното решение осигурява поддръжка на клавиатура, жестове за докосване, отметки чрез <datalist> и стойност value, която се изпраща с формуляра.

role="slider" е предназначен за потребителски контроли, които родното решение не може да изрази:

  • Двуплъзгачи за избор на диапазон (минимална/максимална цена).
  • Нелинейни скали (логаритмични, стъпкови цветови плъзгачи).
  • Плъзгачи, стилизирани по начин, непостижим за родния input в дадена дизайн система.

Договор за клавиатура и фокус

Съгласно шаблона за плъзгач от APG:

  • Tab премества фокуса към плъзгача.
  • Дясна/горна стрелка увеличава стойността с една стъпка; лява/долна я намалява.
  • Page Up / Page Down прескачат с по-голям интервал (обикновено 10%).
  • Home прескача до aria-valuemin; End — до aria-valuemax.

Задаването на aria-valuenow, aria-valuemin и aria-valuemax е задължително. Ако числовата стойност не е самообяснителна („3” — три какво?), добавете aria-valuetext="3 stars", за да обявяват екранните четци смисленото съдържание.

За двуплъзгачи се рендират два отделни елемента с role="slider", всеки с собствени min/max, отразяващи позицията на другия плъзгач.

Чести грешки

  • Липсващ aria-valuenow при първото рендиране. Плъзгачът няма обявена стойност.
  • Стойността на плъзгача не се актуализира след плъзгане. Екранните четци докладват завинаги първоначалната стойност.
  • Плъзгач за сила на звука от 0 до 100 без aria-valuetext — потребителят чува „47” без единица.
  • Твърде груба стъпка на клавиатурата. Плъзгач от 0 до 100, скачащ на стъпки от 10, означава, че потребителите на екранен четец не могат да изберат 53.
  • Двуплъзгачи, рендирани като единичен елемент с aria-valuetext="20 до 80". Потребителят не може да регулира нито едната граница независимо.

Пример

<!-- Препоръчително -->
<label for="vol">Volume</label>
<input id="vol" type="range" min="0" max="100" value="50">

<!-- Потребителски плъзгач -->
<div id="brightnessLabel">Brightness</div>
<div
  role="slider"
  tabindex="0"
  aria-labelledby="brightnessLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="60"
  aria-valuetext="60 percent"
></div>