Семантическая разметка в 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>


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

Агенство по защите прав потребителей www.agentstvo-zpp.ru предоставит грамотных юристов, готовых помочь вам в случае возникновения проблем при покупке любых товаров и услуг.