spinbutton

Роль для поля, в которое вводят число.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Скопировано

Самостоятельная роль виджета из WAI-ARIA поля для ввода числа. В таком поле известно максимальное и минимальное значения.

В HTML эта роль есть у <input type="number"> по умолчанию.

Как пишется

Скопировано

Задайте role="spinbutton" любому тегу, но лучше всего <div> или <span>. В большинстве случаев лучше использовать <input type="number">.

Для кастомного поля spinbutton обязательно вложите внутрь <textarea> или <input type="text"> и/или две кнопки <button>.

У spinbutton должны быть атрибуты aria-valuemin для минимального значения, aria-valuemax для максимального и aria-valuenow для текущего. По умолчанию роли задан aria-valuenow="0".

Элементам с ролью spinbutton также можно задавать все глобальные ARIA-атрибутыи атрибуты виджетов aria-errormessage, aria-invalid, aria-readonly, aria-required и aria-valuetext.