Всякий раз, когда я провожу полный аудит веб-сайта, у меня есть почти 40 отдельных, очень подробных проверок, связанных с формами. Эти проверки можно свести к следующим шести задачам высокого уровня.
1. Общая структура
Убедитесь, что форма имеет логическую структуру, с заголовками и подзаголовками, используемыми для группировки связанных полей и информации. Убедитесь, что типы полей в форме соответствуют типам запрашиваемой информации. Например, когда ожидается, что ввод будет представлять собой короткую строку произвольного текста, используется <input type="text">, тогда как при запросе адреса электронной почты используется <input type="email">. Выбор правильного поля формы для ожидаемых пользовательских данных важен как для удобства использования, так и для доступности.
2. Наименование полей и инструкции
Затем убедитесь, что каждое поле формы имеет текстовую метку (наименование) и что метка явно, то есть средствами разметки, связана с полем. Простейший тест для этого состоит в том, чтобы щёлкнуть по тексту метки, и, если соответствующее поле получает фокус, то это можно считать подтверждением взаимосвязи метки и поля. Однако будьте осторожны, так как это не является гарантией того, что имя поля для специальных возможностей (accessibility name) является корректным и понятным. Некоторые разработчики добавляют в форму атрибуты WAI-ARIA, чтобы сделать ее более доступной, но делают это неправильно. Вот почему я предпочитаю использовать программу экранного доступа при тестировании форм. Запустив программу экранного доступа, переходите по полям с помощью клавиши TAB, чтобы услышать, как программа экранного доступа средствами синтеза речи читает текстовые метки полей. Оцените, насколько эффективны ваши метки для понимания смысла и назначения полей формы. Сообщается ли о существующих ограничениях на формат вводимых данных? Является ли сообщение об ограничениях частью наименования?
3. Навигация при помощи клавиатуры
Убедитесь, что к любому полю формы можно перейти и ввести требуемые данные, используя одну лишь клавиатуру. Это одна из самых простых вещей для тестирования: просто используйте только клавиатуру для навигации между полями, ввода данных, переключения состояния и выбора нужного варианта. Обычно такой тест форма проходит довольно легко, когда форма сделана с использованием нативного HTML, но когда форма использует разработанные автором кастомные компоненты для таких элементов управления, как <select>, радиокнопки или флажки, эти элементы могут оказаться недоступными при использовании клавиатуры.
4. Порядок табуляции
В процессе тестирования клавиатурной навигации не забывайте о порядке обхода полей по нажатию клавиши Tab. В наши дни большинство форм в интернете пройдут этот тест, потому что используют макет с одним столбцом и вертикальным расположением полей, когда каждое новое поле находится ниже предыдущего. Обязательно обратите особое внимание на любую форму, которая использует макет из нескольких столбцов. Есть еще много форм, размеченных с использованием таблиц, и в таких формах обход полей по нажатию клавиши Tab может оказаться весьма неожиданным. Проверить это легко: просто убедитесь, что при переходе по клавише Tab поля получают фокус в таком порядке, который имеет смысл с учётом того, какая информация запрашивается у пользователя.
5. Фокусировка полей
В процессе тестировании клавиатурной навигации также убедитесь, что рамка или другой вариант обозначения клавиатурного фокуса хорошо заметны. Несмотря на то, что формулировка соответствующего критерия WCAG «Focus Visible» не очень предписывающая с точки зрения того, что нужно для удовлетворения этого требования, моё собственное правило состоит в том, чтобы предполагать, что индикатор фокуса по умолчанию в браузере часто недостаточно заметен. Процитирую Люка В (LukeW): «Очевидное всегда побеждает» (Obvious Always Wins), и это особенно верно, когда речь идёт о визуальном обозначении фокуса. Когда вы перемещаетесь по форме, поле, получающее фокус, должно быть легко обнаруживаемым.
6. Обработка ошибок
Наконец, протестируйте обработку ошибок, возникающих при заполнении формы. Выполнить это довольно просто: всё, что вам нужно сделать, это намеренно вводить неполную или недействительную информацию. Это позволит вам определить, являются ли сообщения об ошибках однозначными и простыми для понимания. Указано ли в сообщениях об ошибках, какая информация отсутствовала или была неверной? Исходя из текста сообщения и его внешнего вида, оцените, сможет ли пользователь исправить ошибку и продолжить ввод данных в форме?
Тщательно выполнив эти шесть задач тестирования, авторы веб-сайтов смогут убедиться, что их формы хорошо структурированы, доступны и удобны для пользователя. Внедрение этих лучших практик приведет к повышению удобства использования и улучшению общего пользовательского опыта.
Перевёл Анатолий Камынин.
Автор статьи: Karl Groves
Источник: 6 Quick tests you can do to test your forms for accessibility — Karl Groves