Адаптивность и доступность: телефон, планшет, программы экранного доступа

Сначала телефон

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

Поэтому вёрстку начинают с телефона — этот подход называют mobile first. Базовые стили пишут для узкого экрана, а для широких добавляют изменения через медиазапросы:

.menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 600px) {
  .menu { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .menu { grid-template-columns: repeat(3, 1fr); }
}

На телефоне карточки идут в одну колонку, на планшете — в две, на компьютере — в три.

Относительные единицы

Чтобы вёрстка гибко подстраивалась, вместо жёстких пикселей часто используют относительные единицы:

• % — доля от ширины родителя;
• rem — размер относительно базового шрифта: если человек увеличил шрифт в настройках, вся страница аккуратно увеличится;
• max-width вместо width — блок не шире заданного, но может сжиматься.

.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
img { max-width: 100%; height: auto; }

Вторая строка — простое правило, которое избавляет от картинок, вылезающих за край экрана.

Доступность

Доступность (accessibility, a11y) — чтобы сайтом могли пользоваться все: незрячие люди с программами экранного доступа, люди с плохим зрением, те, кому трудно управлять мышкой. Это не «для галочки»: таких людей миллионы, и многие из них — клиенты кофейни.

Базовые правила:

• У картинок — alt с описанием. Декоративные картинки получают пустой alt="", чтобы программа их пропускала.
• У полей формы — подписи label, связанные с полем:

<label for="phone">Телефон для связи</label>
<input id="phone" type="tel" autocomplete="tel">

• Достаточный контраст текста и фона: светло-серый текст на белом многие просто не прочитают.
• Кнопки — это button, ссылки — это a: тогда они работают с клавиатуры без лишнего кода.
• Видимый фокус: когда человек переходит по странице клавишей Tab, должно быть видно, где он сейчас. Нельзя убирать обводку outline без замены.

Как проверять

1. Сжать окно браузера или включить в инструментах разработчика режим устройства — посмотреть сайт на ширине 360–400 пикселей.
2. Пройти страницу клавишей Tab — до каждой кнопки можно дойти и нажать её Enter.
3. Запустить автоматическую проверку — например, Lighthouse во вкладке инструментов разработчика в браузерах на основе Chromium: он найдёт картинки без alt и низкий контраст.