Справочный центрЦифровая доступность
Обзор доступности блоков на сайтах на Тильде и возможностей внутри блоков для ее улучшения
Большинство блоков из библиотеки Тильды уже оптимизированы для использования людьми с постоянными, временными и ситуативными ограничениями. В этой статье мы расскажем, какие возможности существуют и какие поля нужно заполнить для максимальной доступности вашего сайта.
Короткий чек-лист по улучшению доступности сайта
- 1Проверить наличие SEO-заголовков для блоков c заголовками
- 2Поставить alt-тексты для изображений и сделать их максимально раскрывающими суть изображения
- 3Проверить, находятся ли блоки меню на странице с шапкой, а подвал сайта на странице с подвалом
- 4Проверить Контент блоков с формами — у всех ли полей есть заголовки полей, и указано ли сообщение об успешной отправке формы
- 5Проверить контраст шрифтов сайта — нет ли текстов на фоне похожего цвета или изображениях, на которых он становится менее заметным
- 6Проверить, задан ли язык проекта в настройках сайта → Еще
- 7Проверить рекомендации по доступности элементов в Zero Block
Оптимизация для скринридера
Скринридер — это специальная программа, которая озвучивает то, что происходит на экране. Пользователи либо скачивают скринридеры и устанавливают в систему, но иногда достойная программа уже предустановлена (в случае MacOS).
Блоки Тильды либо автоматически оптимизированы для работы с этими программами, либо имеют все настройки, для того чтобы разметить контент так, чтобы он правильно озвучивался скринридером.
Блоки Тильды либо автоматически оптимизированы для работы с этими программами, либо имеют все настройки, для того чтобы разметить контент так, чтобы он правильно озвучивался скринридером.
Заголовки H1-H6
Если контент сайта имеет четкую структуру, то для заголовков можно задать теги H1, H2 и H3. Заголовки разного уровня помогут скринридеру считывать структуру страницы, а также переключаться между контентом с помощью клавиатуры.
Задать теги H1-H3 можно в настройках любого блока, где есть заголовок в поле «SEO-тег для заголовка». В других блоках, например, в подзаголовках карточек можно задать заголовки других уровней вплоть до H6.
Задать теги H1-H3 можно в настройках любого блока, где есть заголовок в поле «SEO-тег для заголовка». В других блоках, например, в подзаголовках карточек можно задать заголовки других уровней вплоть до H6.
Важно: на странице должен быть только один тег H1. Теги других уровней могут быть в любом количестве, если соблюдается иерархия (например, нет заголовков h2 внутри h3).
Альтернативный текст для изображений
Альтернативный текст для изображений читается скринридером, поэтому его стоит задать, чтобы незрячие люди смогли понять, о чем это изображение. Также альтернативный текст выводится при других ограничениях доступности, например, медленном интернете.
Чтобы задать альтернативный текст для изображения, откройте меню «Контент» и нажмите знак многоточия напротив загруженного изображения.
Чтобы задать альтернативный текст для изображения, откройте меню «Контент» и нажмите знак многоточия напротив загруженного изображения.
Если изображение носит декоративный характер, например, является фоном для элемента на странице, стоит подумать, нужен ли для него альтернативный текст. В части случаев это может быть лишним.
Чтобы добавить alt тег для изображений в блоках из категории «Галереи», откройте меню «Контент» и напротив загруженной картинки нажмите ссылку «Текст». Затем в поле Image alt for SEO укажите описание картинки.
Указываем альтернативный текст для изображения в Контенте блока
Альтернативный текст для наилучшей доступности следует указывать, максимально раскрывая суть изображения и ориентируясь на посетителей, которые могут не увидеть изображение по тем или иным причинам.
Для примера возьмем данное фото:
Плохие примеры alt-текстов:
«Собака»
«Пудель»
Хороший alt-текст:
«Щенок абрикосового пуделя сидит на траве на заднем дворе кирпичного дома»
Плохие примеры alt-текстов:
«Собака»
«Пудель»
Хороший alt-текст:
«Щенок абрикосового пуделя сидит на траве на заднем дворе кирпичного дома»
Рекомендации по созданию шапки и подвала
Блоки в шапке и подвале автоматически размечены специальным образом, чтобы скринридер понял, что сейчас человек находится в таком блоке. Например, в шапке можно пропустить чтение всех пунктов меню и сразу перейти к основному контенту страницы.
Блоки с шапкой и подвалом обязательно должны быть на отдельных страницах Header и Footer для правильной разметки.
Блоки с шапкой и подвалом обязательно должны быть на отдельных страницах Header и Footer для правильной разметки.
Для корректной настройки, посмотрите этот видеоурок или инструкцию «Назначение Header и Footer» в Справочном центре.
Рекомендации по заполнению форм
Большинство полей блоков из категории «Формы» доступны для скринридера, а сообщения об успехе или ошибке при отправке озвучиваются скринридером.
Также обязательно нужно указать заголовки полей для ввода, чтобы для каждого поля было понятно, что именно в него нужно вводить.
Также обязательно нужно указать заголовки полей для ввода, чтобы для каждого поля было понятно, что именно в него нужно вводить.
Процесс настройки полей формы и всплывающих сообщений об успешном заполнении формы описано в нашем видео по настройке форм.
Рекомендации по контрасту, размеру шрифтов
Достаточная контрастность шрифтов помогает пользователям сайта легче воспринимать текст на вашем сайте. Рекомендации по контрастности нужны не только потому, что на сайте могут быть посетители с нарушением зрения — правильно подобранная контрастность добавляет удобства всем.
В вебе есть стандарт для определения контрастности фона и текста, который основывается на руководстве WCAG (Web Content Accessibility Guidelines или Руководство по доступности веб-контента). По этому стандарту контраст определяется как значение, во сколько раз отличается яркость самого светлого и темного цветов и пишется как соотношение этой яркости: 3:1, 4.5:1, 10:1. Чем значение ниже, тем ниже контраст, максимальное значение контрастности 21:1.
Для того, чтобы сайт был доступен для людей с нарушениями зрения, следует делать шрифты повышенной контрастности, конкретные диапазоны значений для элементов мы опишем ниже.
Вы можете использовать инструмент для определения контраста фона и цвета шрифта, чтобы получить значение и сверить со значениями ниже. Для этого просто скопируйте значения фона и цвета из блоков или Zero Block, добавьте их в сервис и получите значение контрастности.
В вебе есть стандарт для определения контрастности фона и текста, который основывается на руководстве WCAG (Web Content Accessibility Guidelines или Руководство по доступности веб-контента). По этому стандарту контраст определяется как значение, во сколько раз отличается яркость самого светлого и темного цветов и пишется как соотношение этой яркости: 3:1, 4.5:1, 10:1. Чем значение ниже, тем ниже контраст, максимальное значение контрастности 21:1.
Для того, чтобы сайт был доступен для людей с нарушениями зрения, следует делать шрифты повышенной контрастности, конкретные диапазоны значений для элементов мы опишем ниже.
Вы можете использовать инструмент для определения контраста фона и цвета шрифта, чтобы получить значение и сверить со значениями ниже. Для этого просто скопируйте значения фона и цвета из блоков или Zero Block, добавьте их в сервис и получите значение контрастности.
Для обычного текста минимальное значение контрастности, при котором текст считается различимым, является 4,5:1. Значения от 7:1 уже будут значит, что текст имеет повышенную контрастность (в категориях стандарта — ААА).
Для крупного текста (заголовков) минимальным значением является 3:1, от 4.5:1 текст считается повышенным, то есть, пригодным для использования людьми с нарушениями зрения.
Для нетекстовых элементов (кнопок, элементов навигации) необходимым и достаточным будет придерживаться контрастности больше 3:1.
Для крупного текста (заголовков) минимальным значением является 3:1, от 4.5:1 текст считается повышенным, то есть, пригодным для использования людьми с нарушениями зрения.
Для нетекстовых элементов (кнопок, элементов навигации) необходимым и достаточным будет придерживаться контрастности больше 3:1.
Также для проверки контраста и доступности страницы вы можете использовать сервис Wave. Он визуально показывает возможные проблемы с контрастом и доступностью у элементов сайта. Но не все рекомендации данного сервиса могут быть актуальными и правильными, в частности, не для всех элементов может быть необходимым альтернативный текст.
Как указать язык сайта
Для наилучшей доступности нужно обязательно указать язык сайта в Настройках сайта → Еще. Это поможет сторонним программам лучше взаимодействовать с сайтом.
Перемещение между блоками сайта с помощью клавиатуры
При некоторых видах ограничений удобнее использовать клавиатуру для перемещения по контенту сайта. Блоки Тильды спроектированы так, чтобы помочь при навигации через клавиатуру, в частности:
- При навигации с клавиатуры есть цветная рамка фокуса, чтобы понимать, с каким элементом сейчас происходит взаимодействие
- Блоки с меню, подменю, формами, плитками, плеерами, табами, слайдерами автоматически размечены так, чтобы по ним можно было перемещаться с помощью клавиатуры
Рекомендации по доступности для Zero Block
В данный момент работа над доступностью всех элементов Zero Block еще не закончена. Но при этом важно следовать общим рекомендациям, описанным ниже.
Соблюдайте последовательность слоёв. Для пользователей, которые взаимодействуют со страницей с помощью клавиатуры важен корректный порядок фокуса.
При перемещении по элементам через клавишу Tab оно будет происходить в том порядке, в котором они отображаются в разметке страницы. Для этого, пожалуйста, располагайте элементы в правильной последовательности — перемещение будет происходить в обратном порядке от того, который указан в слоях, от последнего элемента к первому.
При перемещении по элементам через клавишу Tab оно будет происходить в том порядке, в котором они отображаются в разметке страницы. Для этого, пожалуйста, располагайте элементы в правильной последовательности — перемещение будет происходить в обратном порядке от того, который указан в слоях, от последнего элемента к первому.
Не оставляйте пустые элементы, особенно если они имеют семантическую роль, например, тег H1. Проставляйте ссылки, SEO-теги и текст внутри элементов. Для изображений, который не несут декоративную функцию, проставляйте альтернативный текст.
