Есть необходимость реализовать небольшую библиотеку UI компонентов на основе веб компонентов с использованием Custom Element и Shadow DOM. Хочется реализовать для них доступность либо на role и aria либо нативных html элементах и контролах, у которых уже есть это все "под капотом". На примере реализации кастомной кнопки рассматриваю три варианта:
- Использовать тег button внутри Shadow DOM custom-button. Не нужно прописывать role и aria-* состояния, т.к. фокус уходит на кнопку внутри custom-button, и скринридеры определяют ее как нужно.
- Установить role и нужные aria-* состояния на div/span элемент внутри Shadow DOM custom-button. Т.е. не использовать уже какой-то нативный элемент с доступностью внутри, а описать внутренний элемент через role и aria-*
- Установить role и нужные aria-* состояния на сам тег custom-button
<custom-button role="button" tabtindex="0">Button</custom-button>
Поскольку нет опыта в a11y есть сомнения в выборе варианта. Да и вообще интересны преимущества и недостатки каждого.
В 1-ом варианте не нужно самому прописывать role/aria, все есть "из коробки" так сказать)) При навигации табуляцией фокус уходит на кнопку и скринридер все распознает как нужно. Дизейбл да и вообще любой атрибут можно пробрасывать через родительский тег custom-button и attributeChangedCallback, т.е. управлять состояниями снаружи.
Во 2-ом варианте чуть сложнее, но суть примерно та же. Так же в 1 и 2 вариантах нравится что role/aria нет на самом теге custom-button, т.е. не нагружаем его кучей атрибутов, все что нужно для a11y будет внутри Shadow DOM и не видно снаружи
В 3-ем варианте role/aria- уже выходят наружу, они не спрятаны в Shadow DOM
У кого есть опыт, поделитесь или подскажите более правильный вариант реализации доступности на Custom Element
Сложный
Простой
