Как начать тестирование вашего сайта с помощью программы чтения с экрана

Нет сомнений в важности создания доступных веб-сайтов. Это постоянная тема для обсуждения в сообществе веб-дизайнеров. И, на мой взгляд, большинство дизайнеров хотят сделать это правильно.

Доступность так или иначе влияет на всех нас. Будь то конкретные слова, используемые в сообщении в блоге, или возможность перехода со страницы на страницу — это важно.

Но если вы не тот, кто полагается на вспомогательные технологии, такие как программа чтения с экрана, может возникнуть отключение. Слишком легко упустить из виду, как данная функция влияет на пользователей. Это, вероятно, потому, что мы не тестировали его в этом контексте.

Я признаю, что я боролся в этой области. И я держу пари, что есть много других дизайнеров, которые делают то же самое. Моя привилегия зрячего пользователя, перемещающегося с помощью мыши, не всегда заставляла меня учитывать некоторые важные аспекты доступности.

Правда, тестирую автоматизированными средствами. Я слежу за тем, чтобы шрифты были разборчивыми, цветовой контраст соответствовал стандартам WCAG, а изображения использовали атрибут ALT. Это все хорошие вещи. Тем не менее, они не отражают весь опыт использования веб-сайта.

Итак, как нам перейти на следующий уровень? Тестирование вашего веб-сайта с помощью программы чтения с экрана — отличный способ начать. Давайте взглянем на новичка на то, что вовлечено. Оттуда я поделюсь тем, что я нашел во время своих экспериментов.

Найдите приложение для чтения с экрана

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

Пользователи Mac имеют доступ к VoiceOver, а пользователи Windows могут подключиться к экранному диктору. Кроме того, есть несколько других опций, доступных практически для каждой ОС. Со своей стороны, я выбираю приложение с открытым исходным кодом NVDA. Его можно использовать бесплатно (при поддержке пожертвований) и он является одним из наиболее популярных вариантов.

Независимо от того, какое приложение вы выберете, важно иметь общее представление о том, как оно работает. Кроме того, может возникнуть необходимость сделать несколько настроек заранее. Например, вам нужно убедиться, что вы понимаете, что читается. Вы также можете захотеть, чтобы программное обеспечение выделяло контент по мере его чтения, чтобы вам было легче следить за ним.

WebAIM собрал несколько полезных руководств по настройке различных программ чтения с экрана в целях тестирования. Они помогут вам увидеть, насколько доступен ваш веб-сайт.

Обойти

Теперь, когда у вас есть надежная программа для чтения с экрана, пришло время ее тестирования! Чтобы получить представление о пользовательском опыте, попробуйте просмотреть различные части вашего веб-сайта с помощью клавиатуры с включенным средством чтения с экрана.

Некоторые команды клавиатуры более универсальны, чем другие. Например, клавиша TAB перенесет вас к различным ссылкам и элементам управления формы, а ENTER перенесет вас к месту назначения ссылки. Большинство, похоже, используют клавиши со стрелками для перехода от строки к строке.

Однако могут быть некоторые специальные команды, специфичные для приложения для чтения с экрана. Они позволяют перемещаться между заголовками, ориентирами, такими как верхние и нижние колонтитулы, и т. д. Для этого вам нужно ознакомиться с его документацией.

Также стоит отметить, что для эффективной навигации по веб-сайту таким образом требуется практика. Первые несколько попыток могут быть немного неловкими. Но как только вы освоите различные команды, все должно стать более интуитивно понятным.

Мой опыт работы со средством чтения с экрана

Просто чтобы прояснить ситуацию — я не являюсь экспертом в области чтения с экрана. Мои знания в лучшем случае рудиментарны. Но мой опыт работы с NVDA был поучительным.

Я использовал несколько страниц своего бизнес-сайта в качестве полигона для тестирования. И то, что я обнаружил, не обязательно было серьезными недостатками. Текст можно было прочитать и по сайту можно было перемещаться.

Скорее, я обнаружил некоторые раздражающие факторы — вещи, которые по понятным причинам расстроили бы пользователей. Давайте рассмотрим несколько примеров:

Слайдер, который прерывает

В интервью с экспертом по доступности Тейлором Арндтом она упомянула карусели/слайд-шоу как функции, которые могут повредить доступности. Тестирование с помощью программы чтения с экрана выводит это на первый план.

В автоматизированной карусели, которую я использовал, можно было перемещаться, но у нее была неприятная привычка объявлять о себе каждый раз, когда в поле зрения появлялся следующий слайд. Из-за этого скринридеру было очень трудно проникнуть далеко в другие разделы страницы, прежде чем его прервали.

Я нашел достаточно простое решение. Плагин слайдера WordPress, который я использую (Soliloquy), имеет возможность изменить живую область ARIA на менее агрессивную настройку. Это, в сочетании с использованием ручной навигации для карусели, избавило от неудобств.

Повторяющийся текст

Использование атрибута ALT с изображениями является распространенным советом по доступности. Но для чисто декоративных изображений описательный текст может быть излишним. Я столкнулся с этим в нескольких разных случаях.

Списки сообщений в блогах были главным виновником. Атрибуты ALT заголовка и избранного изображения были идентичными, то есть программа чтения с экрана прочитала их дважды. В результате даже относительно короткий список постов создает болезненный UX.

Камнем преткновения является то, что в блоке списков записей WordPress, который я использовал, нет возможности оставить пустые атрибуты ALT. Таким образом, может потребоваться обходной путь.

Узнайте, как доступность веб-сайта работает на практике

Создание веб-сайтов, соответствующих стандартам WCAG, приносит удовлетворение — и это то, что мы должны делать как веб-дизайнеры. Но галочки в списке дел не рассказывают всей истории.

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

Как я обнаружил, даже если элемент считается доступным по букве стандарта, это не означает, что его легко использовать. Вот почему стоит копнуть немного глубже. Это может быть разница между сайтом, который просто пригоден для использования, и сайтом, который обеспечивает наилучшие впечатления.

Примечание. Как упоминалось выше, я новичок в этой технологии. Если у вас есть советы по чтению с экрана, которыми вы можете поделиться, не стесняйтесь обращаться ко мне через Twitter.