вторник, апреля 19, 2011

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>

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru