Как проверить семантику сайта?

Проверка семантики сайта - полный гайд

Семантика HTML - это использование правильных тегов для правильного назначения. Это критично для доступности, SEO и поддерживаемости кода. Вот как я проверяю семантику.

1. Инструменты для проверки семантики

// 1. Chrome DevTools - встроенная поддержка
// - Открыть DevTools (F12)
// - Перейти на вкладку Accessibility
// - Посмотреть Accessibility Tree
// - Там видны все семантические элементы

// 2. axe DevTools (браузерное расширение)
// - Автоматически проверяет доступность
// - Показывает ошибки семантики
// - Дает рекомендации исправлений

// 3. WAVE (WebAIM)
// - https://wave.webaim.org/
// - Онлайн проверка любого сайта

// 4. Lighthouse (встроена в DevTools)
// - DevTools -> Lighthouse -> Generate report
// - Показывает Accessibility score

// 5. HTML Validator
// - https://validator.w3.org/
// - Проверяет валидность HTML

// 6. Semantic HTML Linter (ESLint плагины)
// - eslint-plugin-jsx-a11y для React
// - Проверяет семантику при разработке

2. Правильная семантическая структура

// ПРАВИЛЬНАЯ семантика:
<article>
  <header>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/blog">Blog</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Page Title</h1>
    
    <section>
      <h2>Section Heading</h2>
      <p>Content here</p>
    </section>

    <aside>
      <h3>Related Links</h3>
      <ul>
        <li><a href="...">Link 1</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2024 Company Name</p>
  </footer>
</article>

// НЕПРАВИЛЬНАЯ семантика (то, чего я избегаю):
<div class="article">
  <div class="header">
    <div class="nav">
      <div class="menu">
        <div class="menu-item"><a href="/">Home</a></div>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="title">Page Title</div>
    <!-- ... -->
  </div>
</div>

3. Проверка заголовков (Headings)

// ПРАВИЛЬНАЯ иерархия заголовков:
<h1>Main Page Title</h1>
  <h2>Section 1</h2>
    <h3>Subsection 1.1</h3>
    <h3>Subsection 1.2</h3>
  <h2>Section 2</h2>

// НЕПРАВИЛЬНАЯ (то, что проверяют инструменты):
<h1>Main Title</h1>
  <h3>Should be h2</h3>  // Скачок с h1 на h3
  <h2>Section</h2>       // Путанница в порядке

// Проверить можно в DevTools:
// 1. Inspect element
// 2. Смотрю теги h1, h2, h3...
// 3. Если иерархия нарушена - нужно исправить

// Должно быть одно h1 на странице:
<h1>Main heading</h1>
<!-- остальные h2, h3... -->

// Не так (несколько h1):
<h1>First h1</h1>
<h1>Second h1</h1> // ОШИБКА

4. ARIA атрибуты для доступности

// aria-label для элементов без текста
<button aria-label="Close menu">
  <svg>...</svg>
</button>

// aria-labelledby для связи элементов
<h2 id="dialog-title">Confirm Action</h2>
<div role="dialog" aria-labelledby="dialog-title">
  Are you sure?
</div>

// aria-describedby для дополнительного описания
<input 
  type="password" 
  aria-describedby="pwd-hint"
/>
<p id="pwd-hint">At least 8 characters</p>

// aria-live для динамического контента
<div aria-live="polite" aria-atomic="true">
  Items in cart: 5
</div>

// aria-hidden для скрытия элементов от скринридера
<span aria-hidden="true">*</span> Required field

// role для придания семантики divам (когда необходимо)
<div role="navigation" aria-label="Main">
  <!-- навигация -->
</div>

5. Проверка формы

// ПРАВИЛЬНАЯ семантика формы:
<form>
  <fieldset>
    <legend>Personal Information</legend>
    
    <label for="name">Name:</label>
    <input id="name" type="text" name="name" required />
    
    <label for="email">Email:</label>
    <input id="email" type="email" name="email" required />
  </fieldset>

  <button type="submit">Submit</button>
</form>

// НЕПРАВИЛЬНАЯ (то, чего нужно избегать):
<form>
  <div>
    <div>Name:</div>
    <input type="text" />  // Нет связи label с input
  </div>
  <div onclick="submitForm()">Send</div>  // div вместо button
</form>

// Проверка в DevTools:
// Инспектирую форму
// Должны быть: label с for, input с id (совпадают)
// Должны быть button, fieldset, legend где необходимо

6. Проверка доступности изображений

// ПРАВИЛЬНО:
<img src="photo.jpg" alt="Описание фото для слепых" />

// Декоративные изображения (alt=""):
<img src="decoration.jpg" alt="" aria-hidden="true" />

// Комплексные изображения (график, диаграмма):
<figure>
  <img src="chart.svg" alt="Sales by quarter 2024" />
  <figcaption>
    <p>Q1: 100k, Q2: 150k, Q3: 120k, Q4: 180k</p>
  </figcaption>
</figure>

// Проверка:
// Когда отключу изображения в браузере - понимаю, что сайт
// Если не понимаю - alt текст плохой

7. Мой процесс проверки семантики

// 1. Запускаю код в браузере
// 2. Открываю DevTools (F12)
// 3. Перехожу на вкладку Accessibility
// 4. Смотрю Accessibility Tree - вижу структуру сайта
// 5. Проверяю:
//    - Есть ли <header>, <nav>, <main>, <footer>?
//    - Правильна ли иерархия заголовков (h1 -> h2 -> h3)?
//    - Все ли images имеют alt атрибуты?
//    - Все ли форм элементы связаны с labels?
//    - Все ли buttons интерактивные элементы?

// 6. Запускаю Lighthouse (DevTools -> Lighthouse)
// 7. Проверяю Accessibility score
// 8. Исправляю найденные ошибки

// 9. Проверяю с помощью скринридера (NVDA, JAWS, VoiceOver)

8. Типичные ошибки семантики которые я исправляю

// ОШИБКА 1: Использование div вместо button
// Неправильно:
<div onclick="handleClick()" class="button">Click me</div>

// Правильно:
<button onclick="handleClick()">Click me</button>

// ОШИБКА 2: Отсутствие label в форме
// Неправильно:
<input type="email" placeholder="Email" />

// Правильно:
<label for="email">Email:</label>
<input id="email" type="email" />

// ОШИБКА 3: Неправильный alt текст
// Неправильно:
<img src="photo.jpg" alt="image" />
<img src="icon.svg" alt="icon image" />

// Правильно:
<img src="photo.jpg" alt="John Doe smiling at camera" />
<img src="icon.svg" alt="" aria-hidden="true" /> <!-- декоративный -->

// ОШИБКА 4: Отсутствие основных structural элементов
// Неправильно:
<div class="header">...</div>
<div class="main">...</div>

// Правильно:
<header>...</header>
<main>...</main>

// ОШИБКА 5: Неправильная иерархия заголовков
// Неправильно:
<h1>Main Title</h1>
<h4>Too deep</h4>  // Скачок с h1 на h4

// Правильно:
<h1>Main</h1>
<h2>Section</h2>
<h3>Subsection</h3>

9. Чеклист для проверки семантики

• На странице только один <h1>
• Иерархия заголовков правильная (h1 -> h2 -> h3, без скачков)
• Все <img> имеют alt атрибуты
• Все форм элементы имеют <label> с for
• Используются <header>, <main>, <footer>, <nav>
• Интерактивные элементы это <button> или <a>, не <div>
• ARIA атрибуты используются только когда необходимо
• Нет ошибок в HTML валидаторе (validator.w3.org)
• Lighthouse Accessibility score >= 90
• Сайт работает со скринридером

Семантика - это не просто "красивый код". Это основа доступности для людей с ограничениями. Правильная семантика делает сайт понятным для всех: людей, поисковых систем и assistive технологий.