Какую роль ARIA использовать для этого виджета выбора цвета?

Question

Я создал этот виджет палитры цветов , и он отличается необычной, в основном, мышиной схемой управления, управляющей значением HSV:

• Переместите мышь вверх, чтобы увеличить яркость (значение), вниз, чтобы уменьшить яркость
• Переместите мышь влево или вправо, чтобы изменить цвет (оттенок)
• Прокрутите, чтобы увеличить яркость (насыщенность)

Я думал осоздание альтернативного ввода для слепых и пользователей с ограниченным зрением, но из-за схемы управления, подобной 3D-слайдеру, которая вообще не использует видимый слайдер, role="slider" здесь не применяется.Так какую роль ARIA я должен использовать для такого рода 3D-слайдера?

Answer 1

По сути, это взаимодействие двух разных ползунков (вертикальных для яркости и горизонтальных для оттенков).

Один из возможных способов сделать вещи доступными для пользователей программ чтения с экрана - представить два отдельных ползунка в нижележащем HTML.и используйте атрибут aria-Ориентация , чтобы указать, как каждый из них представлен.Затем вам нужно убедиться, что JavaScript предоставил соответствующую поддержку клавиатуры для каждого.

ARIA APG имеет несколько демонстраций.

Если какой-либо ползунок влияет на состояниес другой (если изменение яркости изменяет, например, оттенок), то вам может потребоваться более сложное решение.Вариант на двойной слайдер может быть вариантом.Этот пример / демо сейчас немного стар, но его адаптация для использования шаблонов APG должна помочь.

Answer 2

С чисто теоретической точки зрения это замена тега input[type=color], поэтому согласно ARIA в HTML он не должен играть никакой роли.