Как создать доступное навигационное меню
Цель этой статьи показать вам, что делать при создании навигации, и исправить любые ошибки, которые вы могли допустить. Также показан пример простого меню.
Семантический HTML и aria
Оптимизировать ваш код для удобства чтения так же просто, как выбрать правильные HTML-теги. Рассмотрим это преобразование:
<nav>
<ul>
<li><a href="#">list item 1</a></li>
<li><a href="#">list item 2</a></li>
<li><a href="#">list item 3</a></li>
</ul>
</nav>Которое намного более разборчиво по сравнению с:
<div>
<div>
<a href="#">list item 1</a>
<a href="#">list item 2</a>
<a href="#">list item 3</a>
</div>
</div>Первый пример не только более удобочитаем, но и гарантирует, что программа чтения с экрана сообщает пользователю, что он в данный момент находится в режиме навигации.
Однако иногда использование правильного семантического элемента может неправильно объяснить роль нашего элемента, именно в этом случае использование aria и roles является блестящим. В первом примере у нас есть a, <ul> которое в данный момент является списком, мы не хотим, чтобы браузер видел его как список, предполагается, что ul действует как строка меню, поэтому мы можем улучшить код, добавив a role="menubar", строка в меню может быть menuitem, menuradio или, может быть menuitemcheckbox. В нашем случае нам нужен только элемент menuitem.
<nav>
<ul role="menubar">
<li role="none"><a href="#" role="menuitem">list item 1</a></li>
<li role="none"><a href="#" role="menuitem">list item 2</a></li>
<li role="none"><a href="#" role="menuitem">list item 3</a></li>
</ul>
</nav>В обновленном коде я добавил role="none" к li тегу, это потому, что li в этом примере будет выступать в качестве контейнера, элемент явно обозначен как menuitem.
Пожалуйста, обратите внимание, что существует такая вещь, как использование неправильной aria, если вы неправильно используете aria, это может нарушить вашу доступность. Эмпирическое правило гласит: "Никакая aria не лучше плохой aria". Подробнее об этом вы можете прочитать здесь.
Структура кода для порядка фокусировки
Хотя вы всегда можете перемещать элементы с помощью CSS при создании доступной платформы, вам необходимо убедиться, что ваши элементы структурированы по мере их появления. Правильно структурированный код помогает управлять порядком фокусировки. Когда пользователи нажимают Tab клавишу для перемещения по интерактивным элементам, фокус должен следовать логическому порядку. Без надлежащей структуры фокус может непредсказуемо перемещаться, затрудняя навигацию.
Это также важно, например, при работе с подменю: если пользователю приходится перебирать все элементы меню, прежде чем он сможет перейти к подменю, то навигация становится неудобной. Вместо такого кода, как этот:
<nav>
<ul role="menubar" id="mainmenu">
<li role="none"><a href="#" role="menuitem">list item 1</a></li>
<li role="none"><a href="#" role="menuitem">list item 2</a></li>
<li role="none"><a href="#" role="menuitem">list item 3</a></li>
</ul>
<ul id="submenuList1">
<li role="none"><a href="#" role="menuitem">sub list item 1</a></li>
<li role="none"><a href="#" role="menuitem">sub list item 2</a></li>
</ul>
</nav>Мы можем сделать это:
<nav>
<ul role="menubar">
<li role="menuitem">List item 1
<ul role="menu">
<li role="none"><a href="#" role="menuitem">sub list item 1</a></li>
<li role="none"><a href="#" role="menuitem">sub list item 2</a></li>
</ul>
</li>
<li role="none"><a href="#" role="menuitem">list item 2</a></li>
<li role="none"><a href="#" role="menuitem">list item 3</a></li>
</ul>
</nav>Помните, вы всегда можете перемещать объекты с помощью CSS, но если ваш HTML не структурирован, пользователи клавиатуры и программы чтения с экрана будут работать по-разному. Вот пример того, как я использую программу чтения с экрана для доступа к меню с подменю.
Вот ссылка на codepen, вы можете протестировать его на клавиатуре и программе чтения с экрана.
Заключение
Почти на каждой веб-платформе есть меню, это то, что дает пользователям представление о том, чего ожидать. Если некоторые пользователи не могут получить к нему доступ, значит, ваша платформа не завершена. Вы должны убедиться, что пользоваться им легко для всех, определив, что:
- Пользователь может перемещаться по панели меню без использования мыши.
- Пользователь может открывать и закрывать подменю без помощи мыши. Например: когда пользователь нажимает клавишу ввода/возврата или пробел, он должен переключать подменю.
- Программа чтения с экрана может сообщить пользователю, что он находится в меню или подменю.
