mi5ha6in Dec 5 2018 at 16:57

Разработка доступных интерфейсов

16 min

Конференции Олега Бунина (Онтико) corporate blogWeb design*Website development*JavaScript*Accessibility*

+30

Comments 4

kranid Dec 5 2018 at 23:31

role=«listbox» — он делает то же самое, что и select — дает возможность выбрать что-то из списка;

role=«option» — описание для каждого элемента меню;

Для меню хорошо бы использовать не role=«listbox», а role=«menu», а для пунктов меню не option, а role=«menuitem».

UncleJey Dec 6 2018 at 00:06

вот бы приняли за правило не постить страшненькие лица. Нет понимания почему все в монитор залезть хотят? Негоже ведь. Отторжение случается.

-2

noodles Dec 10 2018 at 10:53

Ещё слышал, что желательно ставить атрибут aria-busy=«true» контейнеру сайта под модальным окном (если модальное окно это отдельный слой над основным контейнером сайта):

<body aria-busy="true">
  <div class="popup" aria-modal="true"></div>
 </body>

marygoryunova Dec 15 2018 at 22:04

Правильно ли это — использовать «aria-expanded» для модалок? Цитата с w3.org:

A disclosure is a button that controls visibility of a section of content. When the controlled content is hidden, it is often styled as a typical push button with a right-pointing arrow or triangle to hint that activating the button will display additional content. When the content is visible, the arrow or triangle typically points down.

По-моему, при aria-expanded=«true» (когда screenreader проговаривает «expanded») ожидается, что какой-то контент был показан, но фокус все еще может перемещаться по всей странице, и использование aria-expanded для модалок не совсем уместно.

Например, в ситуации, когда диалог является последним шагом какого-то действия, и после выполнения этого шага кнопка, по которой диалог был вызван, больше не находится на странице, то после закрытия диалога состояние «collapsed» не будет произнесено.