Главная/ Учимся Javascript, CSS, HTML/ Тегофеншуй - шаг к новому уровню качества HTML кода/ Accessibility/ HTML5 разметка меню

HTML5 разметка меню

Дата публикации: 30.01.2013

Многие из нас привыкли верстать меню используя списки:

<ul class="navigation">
	<li><a href="#">Главная</a></li>
	<li><a href="#">HTML и CSS приемы</a></li>
	<li><a href="#">Обучение</a></li>
	<li><a href="#">HTML справочник</a></li>
</ul>

В HTML5 для разметки навигаций появился специальный тег &ltnav> и меню теперь многие начали верстать так:

<nav>
	<ul>
		<li><a href="#">Главная</a></li>
		<li><a href="#">HTML и CSS приемы</a></li>
		<li><a href="#">Обучение</a></li>
		<li><a href="#">HTML справочник</a></li>
	</ul>
</nav>

Вроде все структурно и четко. Но есть одна пробелма — списки изначально не предназначены для разметки навигаций.

С этим недостатком в первую очередь сталкиваются пользователи голосовых браузеров, которые при переходе к меню слышат «Список из 4-х пунктов». А затем перечисление этих пунктов, при чем перед тем как назвать текст пункта будет звучать «bullet» — для неупорядоченных списков, и номер пункта для упорядоченных. Чтобы этого избежать лучше верстать навигацию так:

<nav>
	<a href="#">Главная</a>
	<a href="#">HTML и CSS приемы</a>
	<a href="#">Обучение</a>
	<a href="#">HTML справочник</a>
</nav>

А если следовать рекомендациям WAI-ARIA, то так:

<nav role="navigation">
	<a href="#">Главная</a>
	<a href="#" >HTML и CSS приемы</a>
	<a href="#">Обучение</a>
	<a href="#">HTML справочник</a>
</nav>

Спорить можно долго как более правильно, тем более, что role можно добавить и в обычный список. Но для себя в HTML5 разметке навигации нашел дополнительные плюсы:

  1. меньше DOM элементов, а значит страница быстрее и легче;
  2. меньше кода — лучше SEO.

Как быть с вложенным меню

Для его организации можно воспользоваться вложенным <nav> и <section> для группировки ссылок:

<nav>

	<section>
		<a href="#">Главная</a>
		<nav>
			<a href="#">HTML и CSS приемы</a>
			<a href="#">Обучение</a>
			<a href="#">HTML справочник</a>	
		</nav>
	</section>
	
	<a href="#">HTML и CSS приемы</a>
	<a href="#">Обучение</a>
	<a href="#">HTML справочник</a>

</nav>

Заметка

Применять такую разметку или по старинке на списках — нужно решать в рамках конкретной задачи: видеть дизайн, знать какие цели у проекта и кто его пользователи. Например, чтобы реализовать некоторые дизайнерские задумки придется все равно добавлять теги. В таких случая проще списки оставить.

Материалы

Теги: , , ,
Показать комментарии