Доступность вашей страницы

Доступной страницей могут пользоваться все: люди со скринридером, со слабым зрением, те, кому мешает движение на экране, или просто те, кто смотрит в телефон на солнце. Многое LinkHarbor делает автоматически, кое-что зависит от вас. Эта статья показывает, на что обратить внимание.

#Что LinkHarbor делает автоматически

• Если посетитель включил в системе «Уменьшение движения», фоновые видео не воспроизводятся, а эффекты прокрутки и параллакса, а также анимации при наведении отключаются
• Блок «Заголовок» выводится как настоящий заголовок, по которому ориентируются скринридеры
• Изображения из блоков «Изображение» и «Галерея» получают ваш альтернативный текст в качестве описания
• Если вы не выбрали собственный цвет текста для кнопок, LinkHarbor подбирает его под цвет кнопки

#Альтернативный текст для изображений

Альтернативный текст описывает, что изображено на картинке. Скринридеры зачитывают его вслух, а ещё он появляется, если изображение не загрузилось.

Блок «Изображение»

Поле «Альтернативный текст» в редакторе блока.

Блок «Галерея»

«Альтернативный текст» до 200 символов для каждого изображения.

• Описывайте содержание, а не файл: «Капучино с латте-артом на деревянном столе» вместо «IMG_2041»
• Если на изображении есть текст, он должен быть в альтернативном тексте
• Пишите коротко — обычно хватает одного предложения

Где найти эти поля, описано в статьях Бесплатные блоки подробно и Блоки контента.

#Структура с заголовками

Делите длинные страницы на части блоком «Заголовок», а не крупным текстом. Пользователи скринридеров переходят от заголовка к заголовку и так быстро находят нужное — например, «Часы работы» или «Контакты».

#Понятные названия ссылок

• Каждая ссылка должна быть понятна сама по себе: «Меню в PDF» вместо «Нажмите здесь»
• Не давайте одинаковые названия ссылкам на разные цели
• Эмодзи в начале названия зачитываются вслух; используйте их умеренно

Подробнее о ссылках — в статье Добавление и оформление ссылок.

#Контраст и читаемость

• Следите за достаточным контрастом между текстом и фоном, особенно при светлых пастельных цветах
• Если текст лежит на фоновом изображении или видео, используйте в теме «Прозрачность наложения», чтобы он оставался читаемым
• Не размещайте важный текст только на изображении — посетители со скринридером не смогут его прочитать
• Выбирайте легко читаемый шрифт и не слишком мелкий размер шрифта для текстовых блоков

Цвета, фон и шрифт настраиваются в теме, см. Дизайн.

#Осторожно с собственным CSS

С помощью собственного CSS можно изменить почти всё — в том числе то, что важно для доступности. Не скрывайте контуры фокуса, не уменьшайте текст слишком сильно и после изменений проверьте страницу ещё и с клавиатуры. См. Собственный CSS.

#Проверьте сами

1. Включите скринридер на телефоне (VoiceOver на iPhone, TalkBack на Android) и послушайте свою страницу
2. Увеличьте размер текста в системных настройках и проверьте, что всё остаётся читаемым
3. Посмотрите на страницу при ярком свете и в тёмном режиме