BEM и WAI ARIA

[ogonkov]

Можем ли мы использовать вместо BEM модификаторов WAI ARIA атрибуты, в случаях, когда нужно отобразить состояние и прочие кейсы на доступность?

Например,

<div aria-disabled="true"></div>

Можем ли мы опираться только на ARIA-атрибуты, если нам нужно написать какую-то логику на задисейбленный элемент?

if (this.attr('aria-disabled')) {}

Коллега аргументирует, что раз мы используем уже методологию, то зачем нам распыляться и использовать атрибуты, если есть модификаторы:

if (this.elem('some-element').mod('disabled')) {}

[tadatuta]

@ogonkov Методология никак не ограничивает в том, каким образом выражать модификаторы: классами, атрибутами или вообще кастомными тегами. Это скорее вопрос личных предпочтений.

Другое дело, что не получится все модификаторы выражать в виде aria-атрибутов, поэтому я бы предложил все-таки выбрать какой-то один универсальный способ из соображений консистентности. А уже где-нибудь на уровне шаблонов написать, что если у блока есть _disabled, то ему автоматически следует сгенерировать aria-disabled="true".

В качестве примера можно посмотреть на шаблон блока button из bem-components.

Еще одним доводом в пользу классического (во всех смыслах ;)) подхода может служить тот факт, что существующий инструментарий и готовые библиотеки ожидают модификаторы в виде классов.

[qfox]

@ogonkov По моему личному опыту — лучше дублировать. Aria несколько про другое, нежели модификаторы, и связывать их жестко, использовать одно вместо другого — все равно выльется в костыли рано или поздно. В общем-то, @tadatuta это и предлагает.