Семантическая разметка в HTML5 с помощью ARIA Role

Семантическая разметка в HTML5 с помощью ARIA Role

Доступная чистка снега

Здравствуйте, уважаемые читатели!

Одинаковая структура блоков характерна для большинства сайтов. В основном, этим блокам присваивают общепринятые имена классов или просто id. Как правило, сайт включает в себя такие основные элементы, как: шапка (header); контент (content); в сайтбаре могут быть разновидности — sidebar, leftbar, rightbar; навигацию (nav) и, естественно, подвал (footer).

Что касается HTML5, то здесь уже появляются специальные атрибуты, с помощью которых можно более чётко определить назначение элементов. Например, такими атрибутами являются role, которые предназначены для назначения ролей соответствующим блокам, показывая их значение и важность. Все атрибуты описаны в спецификации ARIA Role (WIA-ARIA Specification).

Сейчас же рассмотрим самые применяемые роли:

  • banner – по логике вещей, эта роль отводится шапке сайта. Традиционно, в данном блоке размещается название сайта и, по возможности, логотип и поиск (role=«banner» может использоваться на странице только один раз);
  • search – данная роль на странице обозначает область поиска. Обычно, такая форма используется для отправления поисковых запросов;
  • navigation – определяет набор элементов навигации (обычно, ссылки), что служит для возможности переходов по документу или других связанных документов;
  • main – это основное содержание определённого документа, в рамках которого автор может отметить только один элемент с главной ролью;
  • contentinfo – в основном, эта роль применяется к footer и тоже может быть определена только один раз на странице;
  • complementary – не основная, но всё же важная часть контента, которая в основном содержит информационные блоки, находящиеся в боковых колонках (например, погода или мини-фотогалерея).

С применением ролей, простая 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>©</p>
</footer>

 

Есть ещё много разных ролей, с которыми Вы сможете ознакомиться, внимательно изучив спецификацию.

Дискуссия по теме