FAQ по блоку «Мобильность и доступность»

Viewport

Что это?
Это специальная настройка, которая говорит браузеру, как масштабировать сайт на мобильных устройствах.

Если viewport есть:
— Страница подстраивается под экран телефона
— Нет горизонтального скролла
— Удобно читать и нажимать на кнопки

Если нет:
— Сайт выглядит "сжатым" или "растянутым"
— Мобильные пользователи уходят
— Google снижает рейтинг в мобильной выдаче

Изображений всего

Что это?
Счётчик всех картинок на странице.

Важно:
— Это просто информативный показатель
— Чем больше картинок, тем выше нагрузка (но это не всегда плохо)

Без alt (альтернативного текста)

Что это?
alt — это подпись к изображению, которая описывает его суть, если оно не загрузилось или если пользователь — незрячий и использует экранный диктор.

Зачем нужен alt?
— Повышает доступность сайта
— Улучшает SEO (поиск по картинкам)
— Помогает роботам понять, что на изображении

Если отсутствует:
— Для важной графики — это минус
— Для декоративных картинок (например, иконок) — не критично

PRO Мобильная доступность

Мета-тег viewport

Что это?
Повторение показателя из базового блока: означает, что сайт масштабируется под ширину экрана устройства.

Формат тега:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Слишком мелкий шрифт

Что это?
Проверка, удобно ли читать текст на телефоне.

Если "ОК":
— Шрифт читается без увеличения
— Нет микротекста (менее 12px)

Если не ОК:
— Люди будут увеличивать экран вручную
— Это раздражает и снижает удобство

Маленькие зоны нажатия

Что это?
Это касается кнопок и ссылок: достаточно ли они большие, чтобы удобно было нажимать пальцем?

Норма:
— Минимум 48x48 пикселей
— Между кликабельными элементами должно быть пространство

Если маленькие:
— Пользователи промахиваются
— Особенно раздражает на мобильных

Широкие таблицы

Что это?
Таблицы, которые не помещаются по ширине экрана и требуют прокрутки вбок.

Если "нет":
— Таблицы адаптированы или сверстаны хорошо
— Пользователю не нужно скроллить горизонтально

ARIA-атрибуты

Что это?
Это дополнительные пометки в коде, которые помогают людям с ограниченными возможностями использовать сайт: слабовидящим, слепым, использующим экранные дикторы и клавиатуру.

Примеры:

• aria-label="Поиск"

• role="button"

• aria-hidden="true"

Если они есть:
Сайт доступнее и удобнее для всех.

Оценка мобильной доступности: 100/100

Что это?
Комплексная оценка от 0 до 100, как сайт выглядит и работает на смартфонах.

100/100 — отлично:
Сайт полностью адаптирован, читаем, удобен и дружелюбен к мобильным пользователям.