В стандарте ARIA есть состояния, которые можно применять к элементам. Среди них есть несколько довольно похожих на первый взгляд:
-
aria-selected;-
aria-checked;-
aria-current;-
aria-pressed.aria-selected обозначает состояние выбора элемента внутри виджетов с одиночным или множественным выбором. Принимает значения:-
true — элемент выбран;-
false — элемент не выбран;-
undefined — элемент не выбираемый.Применяется у следующих элементов:
-
option в listbox;-
treeitem в tree;-
gridcell или row в grid;-
gridcell или row в treegrid;-
tab в tablist.aria-checked обозначает состояние отметки флажка, радио-кнопки, переключателя, отмечаемых пунктов меню или группы, состоящей из отмечаемых элементов со смешанным состоянием. Принимает значения:-
true — элемент отмечен;-
false — элемент не отмечен;-
mixed — элемент в смешанном (indeterminate) состоянии и связан с группой других отмечаемых элементов;-
undefined — элемент не отмечаемый.Применяется к следующим элементам:
-
checkbox;-
radio (кроме mixed);-
switch (кроме mixed);-
option в listbox;-
menuitemcheckbox в menu или menubar;-
menuitemradio в menu или menubar (кроме mixed);-
treeitem в tree.У
option и treeitem можно использовать aria-selected и aria-checked. Подойдёт любой из них. Но рекомендуется для одиночного выбора использовать aria-selected, а в случае множественного выбора использовать aria-checked.aria-current обозначает текущий элемент в контейнере или наборе связанных элементов. Может быть установлен на любой элемент, но принимает в качестве значения один из предустановленных токенов:-
page — элемент визуально выделен как текущая страница из набора страниц, подходит для активной ссылки в меню или хлебных крошках;-
step — элемент визуально выделен как текущий шаг в многошаговом процессе, подходит для визардов и многошаговых форм;-
location — элемент визуально выделен как текущее положение на странице, экране или процессе;-
date — элемент визуально выделен как текущая дата в виджете календаря или другом наборе дат;-
time — элемент визуально выделен как текущее время в таблице времени или другом наборе времени;-
true — элемент визуально выделен как текущий в наборе связанных элементов без дополнительного контекста;-
false — элемент не выделен визуально как текущий в наборе связанных элементов.Назначение
aria-current — программно передать визуальное выделение элемента. При этом только один элемент в наборе может быть отмечен как текущий и это нельзя использовать как альтернативу aria-selected и aria-checked.aria-pressed обозначает состояние кнопки-переключателя и используется только на кнопках и элементах с ролью button. Требует реализации механизма зацикленной смены значений при нажатии. Принимает следующие значения:-
true — кнопка нажата;-
false — кнопка не нажата;-
mixed — кнопка зависит от смешанного состояния нескольких других кнопок;-
undefined — кнопка не работает как переключатель.Таким образом все четыре атрибута хоть и обозначают некоторое текущее состояние элемента, но отличаются по смыслу и применимости. Краткая сводка:
-
aria-selected — состояние выбора для option, treeitem, gridcell, row и tab, рекомендуется для одиночного выбора в случае с option и treeitem;-
aria-checked — состояние отметки для checkbox, radio, switch, option, treeitem, menuitemradio и menuitemcheckbox, рекомендуется для множественного выбора в случае с option и treeitem, может быть в смешанном состоянии mixed у checkbox, option, treeitem и menuitemcheckbox;-
aria-current — визуально выделенный элемент в наборе связанных страниц, шагов, локаций, дат, времени или других элементов, один на весь набор;-
aria-pressed — состояние кнопки-переключателя, применимо только для кнопок, может быть в смешанном состоянии mixed.#a11y