Специальные возможности: создание доступной формы Wix
3 мин.
Формы позволяют посетителям сайта отправлять информацию, присоединяться к списку рассылки и многое другое. При создании формы важно учитывать доступность, чтобы все могли просматривать и использовать ее.
Следуйте шагам из этой статьи, чтобы создать форму, в которой посетители смогут ориентироваться, взаимодействовать и максимально использовать ваш сайт.
Важно:
Старые формы Wix недоступны. Если вам нужно соответствовать правилам доступности, перейдите на новые Формы Wix.
Шаг 1 | Отобразить заголовки полей
Отобразите заголовки полей, чтобы посетители могли идентифицировать каждое поле формы. Отображение заголовков вносит ясность и указывает посетителям, в каком поле они в настоящее время находятся.
Чтобы отобразить заголовки полей:
- Выберите форму в редакторе.
- Нажмите Редактировать форму.
- Выберите поле формы.
- Нажмите Настройка.
- Наведите курсор на название поля и нажмите на значок Другие действия
.
- Нажмите Показать название поля.
Шаг 2 | Определите названия полей
После того как вы включили заголовки полей, убедитесь, что вы четко определили их. Заголовок должен быть конкретным, чтобы посетители знали, что именно требуется (фамилия, номер телефона и т. д.).
Чтобы задать заголовки полей:
- Выберите форму в редакторе.
- Нажмите Редактировать форму.
- Выберите поле формы.
- Нажмите Настройка.
- Введите текст в поле Название поля.
- Нажмите Сохранить.
Шаг 3 | Настроить дизайн формы
Настройка полей и кнопок формы по состояниям (В покое, При наведении и Ошибка) может создать логичный визуальный опыт. Мы рекомендуем настроить дизайн, например, для состояния при наведении, чтобы посетители знали, с какой частью формы они взаимодействуют.
Полезно знать:
Состояние при наведении - это то, как выглядит поле / кнопка формы при наведении на них курсора. Обычное состояние — это то, как оно отображается до того, как посетитель начнет с ним взаимодействовать.
Чтобы настроить дизайн формы:
- Выберите форму в редакторе.
- Нажмите Настройка.
- Выберите Дизайн.
- Выберите, какую часть формы вы хотите настроить:
- Поля:
- Выберите поля формы.
- Выберите При наведении в раскрывающемся меню.
- Измените дизайн полей:
- Цвет и прозрачность заливки: установите цвет фона поля и перетащите ползунок, чтобы изменить прозрачность.
- Цвет и прозрачность границы: установите цвет и прозрачность границы поля.
- Кнопки:
- Выберите Кнопки.
- Выберите кнопку, которую вы хотите настроить (Отправить, Назад, Загрузить и т. д.).
- Перейдите во вкладку При наведении.
- Измените дизайн кнопки:
- Цвет текста: установите цвет текста кнопки в состоянии наведения.
- Цвет и прозрачность: установите цвет фона кнопки и перетащите ползунок, чтобы изменить прозрачность.
- Цвет и прозрачность границы: установите цвет и прозрачность границы кнопки.
- Поля:
Советы:
- Также следует настроить поля формы в состоянии ошибки для улучшения доступности.
- Подробнее о цветах и контрасте для доступности сайта
Шаг 4 | Включите визуальные индикаторы на сайте
Визитные индикаторы могут помочь пользователям с разным зрением / мобильностью перемещаться по сайту. Когда вы включите их, посетители, использующие клавишу Tab, смогут увидеть синюю рамку вокруг секции или элемента, на которой они находятся. Подробнее о визуальных индикаторах
Визуальные индикаторы автоматически включаются на сайтах, созданных в редакторе Studio.
Чтобы включить визуальные индикаторы:
- Выберите Настройка в верхней панели редактора Wix.
- Выберите Мастер спецвозможностей.
- Выберите значок Дополнительные действия
в правом верхнем углу мастера.
- Нажмите Дополнительная настройка.
- Выберите Визуальные индикаторы.
- Активируйте переключатель Сделайте навигацию по сайту доступной для пользователей, работающих с клавиатурой.
Следующий шаг:
Вернитесь к контрольному списку доступности, чтобы продолжить улучшение доступности сайта.