Дерево классов, которое видно только глазами
⠀
В AberOWL завели issue про дерево иерархии классов. Снаружи это обычный список: можно раскрывать узлы, выбирать класс, смотреть связи. Но в коде дерево было собрано из div/button без нормальной семантики дерева: без role="tree", role="treeitem", role="group", без aria-expanded/aria-selected и без навигации стрелками.
⠀
Для мыши такой интерфейс может выглядеть рабочим. Для пользователя с экранным доступом или только клавиатурой это уже другая задача: непонятно, где узел, раскрыт ли он, что выбрано, на каком уровне иерархии он находится и как пройти по дереву без угадывания.
⠀
Здесь важна не сама редкость продукта. В онтологиях дерево классов - не декор, а главный способ разобраться в данных. Если оно не читается как дерево, пользователь теряет не одну кнопку, а карту всей структуры.
⠀
В открытом PR к этому issue уже добавили роли tree/treeitem/group, aria-expanded, aria-selected, aria-level, видимый фокус и обработку стрелок: вверх/вниз для перехода, вправо/влево для раскрытия и сворачивания, Enter или пробел для выбора.
⠀
Хорошая проверка для команд простая: если в интерфейсе есть дерево, меню, список с уровнями или вложенная навигация, пройдите его без мыши и с экранным доступом. Должно быть понятно не только «на что можно нажать», но и где пользователь находится внутри структуры.
⠀
Источник: bio-ontology-research-group/aberowl2#25