Доступность и SEO

Хороший сайт удобен всем — включая людей с инвалидностью и поисковых роботов. Это урок про то, как сделать сайт «для людей и для Google» почти бесплатно, с помощью правильной разметки.

Семантика — фундамент обоих

Заголовки по порядку (h1 → h2 → h3), один h1 на страницу, nav, main, article. То, что помогает скринридерам, — тот же сигнал поисковикам о структуре страницы.

alt, aria и фокус

alt — текст-замена картинке. aria-label — подпись для элементов, у которых нет своего текста. Фокус — видимая обводка при навигации с клавиатуры.

<img src="kurs.png" alt="Студент за ноутбуком проходит урок по CSS">

<button aria-label="Открыть меню">☰</button>
<!-- кнопке-иконке нужна подпись, иначе скринридер скажет «кнопка» -->

a:focus, button:focus { outline: 2px solid #38bdf8; }

Контраст — тоже доступность

Серый текст на тёмном фоне «красив», но не читается. Минимальный контраст текста — 4.5:1 (для крупного — 3:1). Проверить можно инструментами вроде WebAIM Contrast Checker.

SEO: базовые настройки

Поисковики склонны сначала показывать страницы, которые быстро открываются, чётко отвечают на запрос и правильно размечены. Стартовый набор:

<meta name="description" content="Курс веб-разработки: 20 уроков от HTML до публикации сайта.">
<title>Курс веб-разработки для начинающих — WebDev Уроки</title>

<html lang="ru">

robots.txt и sitemap.xml

robots.txt говорит поисковикам, что индексировать; sitemap.xml прямо перечисляет все страницы, чтобы робот ничего не пропустил.

# robots.txt
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml

<!-- sitemap.xml (первые строки) -->
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url><loc>https://example.com/</loc></url>
  <url><loc>https://example.com/lessons/</loc></url>
</urlset>