Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Обновление меню #82

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Обновление меню #82

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/inner.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1637,6 +1637,16 @@ <h5>Пример</h5>
Если есть выпадающее меню, добавьте к родительскому пункту атрибуты <code class="block-inline">aria-haspopup="true"</code> и <code class="block-inline">aria-expanded="false"</code>, значение последнего необходимо изменять при активации родительского элемента.
</p>

<p>Старайтесь не назначать кликабельный ссылки на родительские элементы всплывающих подменю, так как вам придется обеспечить их сворачивание/разворачивание по нажатию с клавиатуры, а не только при наведении мыши. В противном случае пользователи без мыши не смогут перейти по ссылкам в таких элементах.</p>

<p>Как реализовать такие подменю с учетом доступности показано в первом примере руководства WAI-ARIA <a href="https://www.w3.org/WAI/tutorials/menus/flyout/" target="_blank">на этой странице.</a></p>

<div>По возможности избегайте использования ролей menubar, menu и menuitem.</div>

<p>Использование названных выше значений атрибута role оправдано только в том случае, если меню на сайте постоянно развернуто, и состоит только из вертикальных подменю. При такой реализации вам потребуется управлять фокусом скринридера самостоятельно.</p>

<p>Если у вас высоконагруженное меню, следующий блок информации для вас.</p>

<div>Добавьте к элементам меню атрибут role со значениями:</div>

<ul class="list-none padding-bottom-10">
Expand All @@ -1651,6 +1661,8 @@ <h5>Пример</h5>
атрибут <code>tabindex="-1"</code>. Первому элементу главного меню («Шапки, шарфы,
варежки» в примере выше) добавьте значение <code>tabindex="0"</code>.
</p>

<p>Более подробно о том, какое поведение при нажатии определенных клавиш вам нужно будет эмулировать, описано в <a href="https://www.w3.org/WAI/tutorials/menus/application-menus/" target="_blank">данной главе руководства.</a></p>
</div>
</div>

Expand Down