ARIA Roles в HTML5 — семантическая разметка

Большинство сайтов имеют одинаковую структуру блоков, и чаще всего эти блоки имеют общепринятые имена классов или ID. Обычно сайт представляет из себя шапку (header), навигацию (nav), контент (content), сайтбар (sidebar, leftbar, rightbar) и подвал (footer).
В HTML5 появились атрибуты, которые позволяют четче указать что есть что. Атрибуты role назначают роли для блоков, обозначая их важность и назначение. Вы можете ознакомиться со спецификацией ARIA Role — WIA-ARIA specification. Я же приведу наиболее актуальные роли (возможно буду пополнять со временем).

banner

Логически этой ролью наделяется шапка сайта (header). В этом блоке традиционно располагается логотип и название сайта, могут быть включены поиск и основное название страницы. role=«banner» должен быть в единственном экземпляре на странице.

search

Определяет область поиска на странице. Как правило, это форма, используемая для отправки поисковых запросов.

navigation

Набор навигационных элементов (как правило, ссылки) для навигации по документу или связанных с ним документов.

main

Основное содержание документа. В рамках любого документа или приложения, автор должен отметить не более одного элемента с главной ролью.

contentinfo

Обычно применяется к подвалу (footer). Так же данная роль может быть обозначена на странице лишь единожды.

complementary

Важная часть контента, но не основная. Обычно это различные информационные блоки (погода, краткий список новостей, мини-фотогалерея и т.д.). Чаще всего принадлежит к области страницы, называемой боковой колонкой (sidebar, leftbar, rightbar).

В упрощенном виде html-разметка может выглядеть так:

<header id="header" role="banner">
	<h1>Название блога</h1>
</header>
<nav id="nav" role="navigation">
	<ul>
		<li><a href="/">Главная</a></li>
		<li><a href="/news">Новости</a></li>
		<li><a href="/contacts">Контакты</a></li>
	</ul>
</nav>
<section id="content" role="main">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	<p>Maecenas iaculis, elit at tempor imperdiet, purus orci sollicitudin ipsum, nec elementum justo diam non metus.</p>
</section>
<aside id="sidebar" role="complementary">
	<nav>
		<h3>Подменю</h3>
		<ul>
			<li><a href="#">Раз</a></li>
			<li><a href="#">Два</a></li>
			<li><a href="#">Три</a></li>
		</ul>
	</nav>
</aside>
<footer id="footer" role="contentinfo">
	<p>© 2011 Копирайт.</p>
</footer>

Конечно же есть и другие роли, если заинтересуетесь — курите спецификацию 🙂

Размещено в HTML5.

В этом блоке кнопочки для кликания на случай, если пост оказался полезным :)
  • А какая практическая польза от ролей?

    • Повышение семантики и т.д.

  • vlad

    имхо фишка новой структуры html5 еще и в том, что нет единой структуры h1-h6 на весь документ, т.е. внутри каждого section и т.п. можно использовать снова h1-h6 и т.д.

    • Да, есть такое. Только я в настоящее время опасаюсь использовать насколько H1 на одной странице, т.к. не уверен, что поисковики в полной мере поймут то такую разметку. Если у кого-то есть информация по этому поводу — буду очень благодарен за ссылочку.

      • Wabisabi

        Согласен, в настоящее время не стоит, да и зачем если предусмотрена, так сказать, обратная совместимость: http://dev.w3.org/html5/spec/Overview.html#the-h1-h2-h3-h4-h5-and-h6-elements

        Смотрим первый же пример разметки и комментарий — семантически обе разметки идентичны. Т.е. даже когда ПС-ы начнут «понимать» новый язык разметки (html5) — на уже существующих проектах, где уровни заголовкам мы присваивали в соответствии с требованиями нынешних спецификаций, можно ничего не менять.

      • Денис

        Уже полтора года на одном из сайтов использую такую структуру:

        Всего по 20 h1 на странице.

        У ПС ко мне претензий не было нет. Всё в индексе и всё вообще прекрасно =)

        • Интересно, спасибо Денис, учту )

  • Davell2005

    А разве размещение двух блоков навигации «nav» соответствует спецификации Html5? Вроде бы только один!

    • Wabisabi

      А вы её читали? Хоть мульон: http://dev.w3.org/html5/spec/Overview.html#the-nav-element

      Другое дело, что при необоснованно частом использовании подобных элементов (nav, section, article etc.) «размывается» семантика документа в целом (как, впрочем, и при нарушении логики их вложенности относительно друг-друга).

      Если же вы имели в виду ARIA-роли, то да, там имеются роли, использовать которые допускается лишь единожды (например, role=main или role=contentinfo).
      Но и здесь role=navigation можно использовать многократно.
      http://dev.w3.org/html5/markup/aria/aria.html#landmark-aria
      http://www.w3.org/TR/wai-aria/roles#landmark_roles

  • disqusashto

    СайДбар?

  • Иван

    вполне можно заменить на
    , верно? Для этого он как раз и предназначен.

    • Да, Иван, теперь можно. На момент написания статьи этого тега в спецификации еще небыло.

      • Иван

        Хм, получается и хедер можно записать как , а футер как ? Или это я уже загнул?

  • Объясните, пожалуйста, (хочу разобраться) зачем тегу NAV прописывать его role NAVIGATION ? Ведь тег NAV уже говорит о том, что это навигация.
    Аналогично зачем в тег FOOTER писать «contentinfo» ?
    Зачем в header прописывать role=»banner» ? (и не понял зачем там id=»header»)

    • На странице может быть несколько NAV и далеко не все они будут важными. role=»navigation» прописывают для главного меню чаще всего, я не видел чтобы его указывали больше одного раза на странице. Т.е. nav — это просто тег, role=»navigation» — указывает на основную навигацию сайта. С другими тегами аналогично.

      • Все равно не понимаю зачем тегу Header прописывать role=»banner». Поисковая система по названию тега прекрасно поймет, что это шапка.

        • С таких вопросов начинается рабочий день в Консорциуме W3 🙂

      • Максимка

        Посмотрите на википедию, там role=»navigation» используется в каждом меню на странице: я 11 штук насчитал.