Спуститься к содержанию

Элементы форм

Посмотреть на github.

Поля формы

Чтобы стили применялись к элементам формы, у нее нужно указать class="form".

Так же мы рекомендуем озаглавливать форму и указывать через атрибут aria-labelledby идентификатор заголовка формы. В таком случае пользователи, использующие экранные чтецы, смогут бытро идентифицировать назначение формы.

Форма обратной связи.

        
    

        
Форма обратной связи.

Поля для ввода

Поля для ввода текста, электронной почты, чисел и поиска имеют одинаковые стили отображения и одинаковое disabled состояние.

Чекбоксы и радиокнопки

Объединяйте связанные по назначению поля в группы.

Укажите ваш пол
На какие категории новостей вы хотели бы подписаться? 
        

    

        Укажите ваш пол
        

        
    


    

        На какие категории новостей вы хотели бы подписаться?

Метки полей

Все поля формы должны иметь свою метку.

Связать поля и метки можно несколькими способами:

1. Через атрибут for у метки и id у поля.

2. Вложив поле непосредственно внутрь метки.

3. Добавив к полю атрибут aria-label со значением метки.

4. Указав полю в атрибуте aria-labelledby id элемента, который будет являться заголовком. В этом случае заголовком может быть любой тег с текстовым контентом, например:

5. Связав метку и поле любым доступным способом, вы можете её визуально скрыть:

Обратите внимание, что в случаях 3 и 5 у вас нет визуального представления метки для зрячих пользователей. Убедитесь, что назначение поля понятно пользователю: используйте placeholder, поясняющий текст перед полем или иную визуальную дополнительную информацию, как, например, кнопка поиска из пункта 4.

Будьте осторожны и не используйте для визуального скрытия CSS правила display: none и visibility: hidden, так как в этом случае экранные чтецы будут игнорировать элементы с этими правилами. Для визуально скрытия может использоваться, как пример, следующий CSS класс:

        
.visually-hidden {
    border: none;
    clip: rect(0 0 0 0);
    height: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 0;
    opacity: 0;
    pointer-events: none;
}

Обязательные поля

Атрибут required у поля предотвращает отправку формы, пока поле не будет заполнено.

Если необходимо лишь сообщить незрячему пользователю об обязательности поля и не запрещать при этом отправку формы (например, при backend валидации), то укажите для поля атрибут aria-required="true". Экранные чтецы в этом случае озвучает незрячему пользователю, что поле является обязательным.

Так же добавляйте к метке поля пояснение, что поле обязательно для заполнения. Например:

1. Пропишите сообщение в самой метке.

2. Пропишите сообщение в визуально скрытом элементе. При этом не забудьте обозначить обязательность поля для зрячих пользователей. Если вы хотите для визуального отображения использовать символ *, то используйте его вместе с поясняющим текстом, сделав текст скрытым визуально, а символ * невидимым для экранных чтецов, добавив к нему атрибут aria-hidden="true".

Ошибки валидации

В настоящем разделе мы рассмотрим лишь принципы сообщения пользователям о наличии ошибок в формах. Практическая реализация, как правило, под каждую форму будет уникальна.

Общие положения:

  • Никогда не полагайтесь на цветовое выделение поля как выделение ошибки. Например, пользователи с некоторыми формами дальтонизма не смогут отличить красное поле от обычного или валидного.
  • Всегда дополняйте визуальное выделение не валидного поля сообщением об ошибке. Из сообщения должно быть понятно не только наличие ошибки, но и дальнейшие действия пользователя для ее предотвращения. Напрмер:
    • Плохо: Цена введена неверно.
    • Хорошо: Поле "Цена" должно содержать только числовые символы.
    • Плохо: "Текст обращения" слишком короткое.
    • Хорошо: Поле "Текст обращения" должно содержать не менее 100 символов текста.
  • Выводите сообщение об ошибках несколькими способами: одним сообщением на странице и/или сообщением у каждого поля. Примеры рассмотрим ниже.

Вывод общего сообщения на странице

Если вы отправляете форму через ajax, то нужно создать блок с атрибутом role="alert" и поместить в него все сообщения. После этого блок нужно добавить на страницу на видное место, чтобы зрячие пользователи его заметили. Как только блок с role="alert" появится на странице, экранные чтецы озвучат его содержимое и незрячие пользователи тоже узнают об ошибках.

Дополнительно для полей, имеющих ошибки, поставьте атрибут aria-invalid="true" – электронные чтецы в данном случае дополнительно озвучат, что поле не валидно.

Важно. Если вывод сообщения об ошибке происходит с перезагрузкой страницы, то измените title страницы и/или заголовок h1 на сообщение о присутствии ошибок на странице.

Вывод сообщения об ошибке непосредственно для поля

Добавьте не валидному полю атрибут aria-invalid="true".

Добавьте рядом с полем текст сообщения об ошибке.

Свяжите сообщение об ошибке и поле через общее значение атрибутов id, aria-labelledby.

Экранные чтецы в данном случае при работе с полем не только зачитают, что оно неверно заполнено, но и озвучат сообщение об ошибке, чтобы пользователь понял свои дальнейшие действия.

Поле обязательно для заполнения.

        



    
    




    
    
    
Поле обязательно для заполнения.

Рекомендации

Мы рекомендуем использовать оба подхода, то есть сообщать пользователяем в блоке с role="alert" о наличии ошибок и дополнительно указывать ошибки для каждого отдельно взятого поля. Таким образом форма будет максимально доступна не только пользователям с нарушениям зрения, но и рядовым пользователям сайта.