Делаем валидацию формы доступной

Марианна Минич

Делаем валидацию формы доступной

Марианна Минич

Минич Марианна

Фото Марианны

Software engineer в EPAM

Accessibility driven developer

Санкт-Петербург

О чём будем говорить

Временные ситуации недоступности


доступ с клавиатуры

Временные ситуации недоступности


незрячий

Временные ситуации недоступности


незрячий

Физиологические особенности


незрячий

Физиологические особенности


нарушение слуха

Физиологические особенности


нарушение моторики

Физиологические особенности


когнитивные нарушения

Кто участвует в поддержке доступности?


когнитивные нарушения

Кто участвует в поддержке доступности?


когнитивные нарушения

Screen readers


Windows screen reader

NVDA
JAWS

Apple screen reader

VoiceOver

Linux screen reader

Orca

Screen readers


screen reader

Screen readers


Форма — важная часть приложения


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


форма

форма с отключеной кнопкой

"Фёрст нейм стар"

Решение №1:добавить явную подпись


форма значок плохо

Решение №2:атрибут required


            
                <label for=”first-name”>First Name</label>
                <input type=”text” id=”first-name” name=”first-name” required>
            
        
значок плохо

Решение №3:использовать ARIA


            
                <div class="control">
                    <label for=”name”>Full Name <span aria-hidden="true">*</span></label>
                    <input type=”text” id=”name” required>
                </div>
            
        
форма значок плохо

Placeholder — не замена лейблу


Решение:


форма с подписями к полям значок плохо

Отключенные кнопки


            
                <button disabled> Button </button>
            
        

Отключенные кнопки


Отключенные кнопки


форма с отключеной кнопкой стрелка вправо форма с включенной кнопкой значок плохо

Решение №1:не отключать кнопки


значок плохо

Решение №2:добавить подсказку


форма стрелка вправо форма значок плохо

Недоступные сообщения об ошибках


Решение:aria-live = "polite"


            
                <fieldset>
                    <label for="email">Email (required)</label>
                    <input type="email" id="email" aria-describedby="email-error" required/>
                    <div aria-live="polite" id="email-error" > 
                        Please enter a valid email address.
                    </div>
                </fieldset>
            
        
значок плохо

Решение:


форма с подписями к полям

Подведём итоги

Поздравляю!

форма авторизации

Полезные материалы

СПАСИБО ЗА ВНИМАНИЕ!