Базовая доступность (a11y)
Тема дорожной карты · Frontend разработчик
Доступность HTML — это практика написания HTML5-документов таким образом, чтобы веб-страницы были полностью пригодны для использования людьми с ограниченными возможностями, в том числе теми, кто пользуется экранными читалками, клавиатурной навигацией или вспомогательными технологиями. Семантические HTML-элементы — <button>, <nav>, <main>, <label>, <fieldset> — передают смысл инструментам обеспечения доступности без дополнительных усилий, а ARIA-атрибуты (aria-label, aria-describedby, role, aria-live) заполняют семантические пробелы для пользовательских интерактивных виджетов. Все интерактивные элементы должны быть доступны с клавиатуры через Tab и Enter/Space, изображения обязаны иметь описательный атрибут alt, а поля форм должны быть связаны с метками через пары for/id или обёртку <label>. Frontend-разработчики могут проверять доступность HTML с помощью панели accessibility в Lighthouse, расширения axe DevTools, а также автоматизированных тест-раннеров jest-axe или Playwright с expect(page).toHaveNoViolations() для предотвращения регрессий.
Как это работает
Базовая доступность (a11y) — семантическая структура страницы. Элементы описывают смысл, не вид: <article> — статья, <button> — кнопка, <nav> — навигация. Браузер строит DOM-дерево из разметки; CSS таргетит его селекторами; JavaScript манипулирует через DOM API. Семантическая разметка критична для SEO, accessibility (screen reader'ы её разбирают), поддерживаемости. Формы — <form>, инпуты (<input>, <select>, <textarea>), сабмит через HTTP без JS.
Когда применять
Используйте семантические HTML-элементы везде, где есть смысл — <button> вместо <div onclick>, <a> вместо роутинга в JS, <input type="email"> для email. Браузеры (и screen reader'ы, и поисковики) получают keyboard navigation, accessibility, SEO бесплатно. <div>/<span> — только как обёртки последнего средства. Запускайте Lighthouse accessibility-аудит регулярно.
Типичные ошибки
Ловушки Базовая доступность (a11y): <div onclick> вместо <button> (нет клавиатуры, screen reader, focus management); пропущенный alt на изображениях (screen reader + SEO); инпуты без <label> (невозможно использовать с assistive tech); вложенный <a> в <a> (невалидный HTML, undefined behaviour); h1-h6 для визуального размера, а не иерархии документа. Браузеры много чинят за вас — это прячет баги от тестов, но не от реальных пользователей.