HTML5 разметка меню
Многие из нас привыкли верстать меню используя списки:
<ul class="navigation"> <li><a href=../../../learn/tegofenshuj/accessibility/"#">Главная</a></li> <li><a href=../../../learn/tegofenshuj/accessibility/"#">HTML и CSS приемы</a></li> <li><a href=../../../learn/tegofenshuj/accessibility/"#">Обучение</a></li> <li><a href=../../../learn/tegofenshuj/accessibility/"#">HTML справочник</a></li> </ul>
В HTML5 для разметки навигаций появился специальный тег <nav> и меню теперь многие начали верстать так:
<nav> <ul> <li><a href=../../../learn/tegofenshuj/accessibility/"#">Главная</a></li> <li><a href=../../../learn/tegofenshuj/accessibility/"#">HTML и CSS приемы</a></li> <li><a href=../../../learn/tegofenshuj/accessibility/"#">Обучение</a></li> <li><a href=../../../learn/tegofenshuj/accessibility/"#">HTML справочник</a></li> </ul> </nav>
Вроде все структурно и четко. Но есть одна пробелма — списки изначально не предназначены для разметки навигаций.
С этим недостатком в первую очередь сталкиваются пользователи голосовых браузеров, которые при переходе к меню слышат "Список из 4-х пунктов". А затем перечисление этих пунктов, при чем перед тем как назвать текст пункта будет звучать "bullet" - для неупорядоченных списков, и номер пункта для упорядоченных. Чтобы этого избежать лучше верстать навигацию так:
<nav> <a href=../../../learn/tegofenshuj/accessibility/"#">Главная</a> <a href=../../../learn/tegofenshuj/accessibility/"#">HTML и CSS приемы</a> <a href=../../../learn/tegofenshuj/accessibility/"#">Обучение</a> <a href=../../../learn/tegofenshuj/accessibility/"#">HTML справочник</a> </nav>
А если следовать рекомендациям WAI-ARIA, то так:
<nav role="navigation"> <a href=../../../learn/tegofenshuj/accessibility/"#">Главная</a> <a href=../../../learn/tegofenshuj/accessibility/"#" >HTML и CSS приемы</a> <a href=../../../learn/tegofenshuj/accessibility/"#">Обучение</a> <a href=../../../learn/tegofenshuj/accessibility/"#">HTML справочник</a> </nav>
Спорить можно долго как более правильно, тем более, что role можно добавить и в обычный список. Но для себя в HTML5 разметке навигации нашел дополнительные плюсы:
- меньше DOM элементов, а значит страница быстрее и легче;
- меньше кода — лучше SEO.
Как быть с вложенным меню
Для его организации можно воспользоваться вложенным <nav> и <section> для группировки ссылок:
<nav> <section> <a href=../../../learn/tegofenshuj/accessibility/"#">Главная</a> <nav> <a href=../../../learn/tegofenshuj/accessibility/"#">HTML и CSS приемы</a> <a href=../../../learn/tegofenshuj/accessibility/"#">Обучение</a> <a href=../../../learn/tegofenshuj/accessibility/"#">HTML справочник</a> </nav> </section> <a href=../../../learn/tegofenshuj/accessibility/"#">HTML и CSS приемы</a> <a href=../../../learn/tegofenshuj/accessibility/"#">Обучение</a> <a href=../../../learn/tegofenshuj/accessibility/"#">HTML справочник</a> </nav>
Заметка
Применять такую разметку или по старинке на списках - нужно решать в рамках конкретной задачи: видеть дизайн, знать какие цели у проекта и кто его пользователи. Например, чтобы реализовать некоторые дизайнерские задумки придется все равно добавлять теги. В таких случая проще списки оставить.
Материалы
- Navigation in Lists: To Be or Not To Be
- HTML5 Accessibility Chops: section elements
- W3C :: The Roles Model