Семантический HTML для SEO и доступности: новые теги и ARIA-роли

За годы работы я убедился, что семантический HTML это фундамент, на котором строится успешный сайт. Это не только вопрос «чистого кода», но и прямой путь к повышению позиций в поисковиках и улучшению доступности для людей с ограниченными возможностями.

Представьте, поисковые роботы и скринридеры (программы для слабовидящих) «видят» ваш сайт через структуру HTML. Если вместо <nav> вы используете `<div class=»menu»>», робот может не понять, где навигация, а скринридер не сможет быстро перейти к ней. Результат? Снижение SEO-рейтинга и потеря аудитории.

В этой статье я расскажу, как использовать новые теги HTML5.3 и ARIA-роли, чтобы ваш сайт стал дружелюбным как для поисковиков, так и для пользователей. Приготовьте примеры кода, таблицы сравнения и чек-листы для внедрения!

Основы семантического HTML, что это и зачем?

Семантические теги описывают смысл контента, а не только его внешний вид. Например:

• <header> — шапка сайта или раздела.
• <main> — основной контент страницы.
• <article> — независимый блок (пост, новость).
• <aside> — дополнительная информация (сайдбар).

Пример неправильного подхода:

<div class="header">...</div>  
<div class="content">...</div>  
<div class="footer">...</div>

Правильный подход:

<header>...</header>  
<main>...</main>  
<footer>...</footer>

Почему это важно для SEO?
Поисковые системы анализируют структуру страницы. Если контент помечен как `<article>», Google понимает, что это основная информация для индексации. Это повышает релевантность страницы в поиске.

Новые теги HTML5.3, что изменилось?

HTML5.3 (черновик) добавляет теги, которые делают разметку ещё точнее. Вот ключевые нововведения:

1. <search> — блок поиска на странице.
   html

   <search>  
     <form action="/search">  
       <input type="text" name="query">  
       <button type="submit">Найти</button>  
     </form>  
   </search>

   Плюсы: Улучшает семантику для скринридеров и выделяет поисковую форму для роботов.

2. <dialog> — модальные окна.
   html

   <dialog open>  
     <p>Вы уверены, что хотите удалить аккаунт?</p>  
     <button onclick="dialog.close()">Отмена</button>  
     <button onclick="deleteAccount()">Удалить</button>  
   </dialog>

   Плюсы: Упрощает создание доступных pop-up без JavaScript-библиотек.

3. <hgroup> — группа заголовков.
   html

   <hgroup>  
     <h1>Основной заголовок</h1>  
     <h2>Подзаголовок</h2>  
   </hgroup>

   Плюсы: Помогает скринридерам правильно интерпретировать иерархию заголовков.

ARIA-роли: когда семантики недостаточно

ARIA (Accessible Rich Internet Applications) — набор атрибутов, которые дополняют семантику для сложных интерфейсов.

Основные роли:

• role="navigation" — навигационное меню (если не используется <nav>).
• role="alert" — важное уведомление (например, ошибка формы).
• aria-label="Описание" — подпись для элементов без текста (иконки).

Пример:

<div role="navigation" aria-label="Основное меню">  
  <!-- Ссылки -->  
</div>

ARIA не заменяет семантические теги. Используйте их вместе. Например:

<nav aria-label="Социальные сети">  
  <a href="#"><img src="icon.png" alt="VK"></a>  
</nav>

Оптимизация для поисковиков и скринридеров

Для SEO:

• Используйте <article> для основного контента.
• Добавьте микроразметку Schema.org для товаров, статей и событий.
• Тег <title> и <meta description> должны соответствовать содержимому страницы.

Для доступности:

• Тестируйте сайт с помощью скринридера NVDA или VoiceOver.
• Убедитесь, что все интерактивные элементы (кнопки, ссылки) доступны с клавиатуры.
• Используйте alt для изображений и aria-describedby для сложных элементов.

Пример микроразметки:

<script type="application/ld+json">  
{  
  "@context": "https://schema.org",  
  "@type": "Article",  
  "headline": "Семантический HTML",  
  "author": "Максим"  
}  
</script>

Сравнительные тесты: семантика или «div-верстка»

Данные основаны на тестах 10 сайтов с аналогичным контентом.

1. Чек-лист для разработчика:
   • Замените все <div class="header"> на `<header>».
   • Добавьте <main> и `<footer>».
   • Проверьте страницу через валидатор W3C.
2. Инструменты:
   • W3C Validator — проверка ошибок в HTML.
   • Lighthouse — аудит SEO и доступности.
   • Axe DevTools — поиск проблем с ARIA.
3. Тестируйте со скринридерами:
   Установите NVDA (Windows) или включите VoiceOver (Mac) и пройдите по ключевым страницам сайта.

Новые теги HTML5.3 и ARIA-роли делают ваш сайт понятным для роботов и удобным для всех пользователей. Начните с того, что замените хотя бы 10% <div> на семантические теги и увидите разницу в метриках!