Ваш сайт недоступен

Пример использования: домашняя страница Medium

Хорошо. Может быть это. Но, скорее всего, это не так. Как вы увидите, даже если ваш сайт получил 100 баллов в рейтинге Маяк Google, вполне вероятно, что вы не учитываете множество факторов.

Тест

Чтобы проиллюстрировать способы правильной проверки вашего сайта на доступность, мы рассмотрим среднюю домашнюю страницу. Теоретически эта страница должна быть чертовски доступной, поскольку это платформа для публикации, созданная одним из соучредителей Twitter 3 года назад, имеет 25 миллионов пользователей и стоит 400 миллионов долларов (по состоянию на 2015 год). Мы обнаружим, что даже такой сайт не так доступен, как должен быть. Если это так, то я думаю, что можно с уверенностью предположить, что большинство ваших веб-сайтов таковыми не являются.

Шаг 1 - Маяк

Давайте сначала запустим сайт через Lighthouse. Я знаю, что только что закончил говорить вам, что оценки Lighthouse не так уж и значимы, но я надеюсь, что, начав здесь, вы увидите, где Lighthouse в конечном итоге не оправдывает ожиданий.

После запуска Lighthouse на medium.com результат теста на доступность составил 87 баллов. На самом деле это меня немного удивило; Я ожидал почти идеальной оценки для сайта такого масштаба. Давайте посмотрим на выявленные проблемы:

Кнопки не имеют доступного названия

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

Ссылки не имеют различимого названия

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

Цвета фона и переднего плана не обладают достаточной контрастностью.

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

Элементы заголовка расположены не в порядке убывания.

Это может сбить с толку многих людей. По сути, инструменты чтения с экрана, такие как Voiceover, позволяют пользователям перемещаться по сайту по заголовкам (h1-h6). Поэтому настоятельно рекомендуется думать о своей странице как о наброске. Жалоба здесь в том, что иерархия заголовков на страницах повсюду! Хорошо построенная страница с точки зрения иерархии заголовков должна выглядеть примерно так:

Не так:

Шаг 2 - Улучшение сайта

Lighthouse - это круто, но не все, что нужно. Давайте попробуем два других инструмента и посмотрим, какие еще проблемы с доступностью они определяют. Первый - SiteImprove. Siteimprove предлагает бесплатное расширение для Chrome. Это довольно удобный инструмент, и он сканирует вашу страницу намного быстрее, чем Lighthouse. Он ловит все те же проблемы и некоторые другие. Он разбивает проблемы по уровням доступности AAA, AA и A, что может помочь вам расставить приоритеты.

«Aria-labelledby» имеет неверный (ID) справочник (72 экземпляра)

Эта ошибка фактически касается ошибки, которую Lighthouse идентифицировал с кнопками, не имеющими доступных имен. Оказывается, проблема здесь в том, что в какой-то момент эти кнопки, вероятно, использовали aria-labelledby, чтобы пометить кнопки. Однако есть 72 случая, которые больше не работают, потому что идентификатор ярлыка, на который они ссылаются, не существует!

Поле ввода не имеет описания, а поле выбора не имеет описания

Это ссылка на поисковый ввод, который открывается, когда пользователь щелкает значок поиска в заголовке. В нем отсутствуют правильные атрибуты или теги формы, которые помогают пользователям программ чтения с экрана понять, что делает ввод. Из текста справки Siteimprove: «Поля ввода всегда должны иметь описание, которое явно связано с полем, чтобы пользователи вспомогательных технологий также знали, для чего это поле».

Нет возможности пропускать повторяющийся контент

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

Текст ссылки слишком общий в текущем контексте, например «Подробнее»

Общий текст ссылки - важная вещь, которую следует учитывать пользователям программ чтения с экрана, потому что инструменты чтения с экрана, такие как Voiceover, фактически позволяют пользователям перемещаться по странице по тексту ссылки. Когда текст ссылки слишком общий, например «Читать дальше», у таких пользователей не будет возможности понять, что они читают больше. Рекомендуется либо сделать ссылки более информативными, либо использовать aria-label для переопределения визуального текста и помощи пользователям при использовании программ чтения с экрана.

Шаг 3 - Волна

Wave - это еще один инструмент для проверки уровня доступности вашей страницы. Это также бесплатно в магазине расширений Google Chrome . Как и Siteimprove, Wave работает намного быстрее, чем Lighthouse, и захватывает несколько разных вещей (включая некоторые вещи, которые Siteimprove игнорирует). Вот уникальные проблемы с Wave:

Избыточный альтернативный текст (21 раз)

Альтернативный текст - это здорово, и каждый инструмент специальных возможностей будет кричать на вас, чтобы вы добавили его к вашим изображениям, но на самом деле они могут очень раздражать пользователей программ чтения с экрана при неправильном использовании. В этом случае Wave сообщает нам, что существует 21 экземпляр альтернативного текста, который точно соответствует тексту рядом с изображением. В результате, перемещаясь по странице с помощью программы чтения с экрана, пользователь будет слышать одно и то же снова и снова в быстрой последовательности. Решение проблемы - убедитесь, что ваш замещающий текст действительно описывает изображение. Заголовок не должен совпадать с заголовком статьи, с которой он связан, особенно если этот заголовок находится рядом с ним.

Избыточный текст ссылки (62 экземпляра)

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

Проблема здесь в том, что изображение, заголовок, описание и другие данные находятся в одном месте. Это очень раздражает людей, использующих клавиатуру или подобное устройство для навигации по вашей странице. Столько дополнительных вкладок! Кроме того, при просмотре всех ссылок на странице с помощью закадрового голоса совершенно бесполезно видеть так много объектов, ведущих в одно и то же место. Рекомендуемое исправление, если возможно, - сгруппировать такие элементы в одну якорную ссылку.

Шаг 4 - Ручной тест

На данный момент мы рассмотрели 3 инструмента (и их гораздо больше). Если, например, Medium использовал все эти инструменты и исправил все проблемы, то это во многом сделало бы их домашнюю страницу более доступной. К сожалению, этого все равно будет недостаточно. Последний шаг - ручное тестирование. Это означает использование клавиатуры для реальной навигации по странице и использование такого инструмента, как Voiceover. Используя клавиатуру, вы в основном обращаете внимание на проблемы с индексом вкладок. При использовании программы чтения с экрана я рекомендую закрыть глаза, чтобы понять, как на самом деле большинство людей, использующих этот инструмент, будут воспринимать страницу. Скорее всего, вы откроете для себя множество способов улучшить ситуацию.

Вот некоторые вещи, которые я нашел:

Невозможно перейти к нижнему колонтитулу (боковой панели) из-за бесконечной загрузки

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

Только один ориентир (навигация)

Удивительно, но похоже, что на главной странице Medium используется только один ориентир: nav Я бы порекомендовал больше использовать элементы HTML, такие как article section header footer и roles, такие как contentinfo и banner Программы чтения с экрана позволяют пользователям легче перемещаться по сайту с их помощью.

Проблемы с порядком табуляции в мобильном заголовке

Вкладка через заголовок на мобильном телефоне. Вы увидите, что на секунду теряется фокус. Почти наверняка из-за скрытого ввода поиска.

Нет состояния фокуса для вкладок меню уведомлений

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

Невозможно перейти в меню уведомлений на мобильном устройстве

Нажатие, а затем переход в меню уведомлений отлично работает на рабочем столе, но не работает на мобильных устройствах. Это напоминание о необходимости сделать ваш сайт доступным во всех размерах области просмотра.

Заголовок не отображается при увеличении 200% на мобильном устройстве

На самом деле это требование, чтобы ваш сайт был доступен при масштабировании 200% для всех размеров области просмотра. В этом случае заголовок полностью уходит за край страницы при таком увеличении.

Вывод

Как видите, ваш сайт, вероятно, недоступен, по крайней мере, не так много, как должно быть. В наши дни доступность - это мода, потому что люди боятся судебных исков. В результате существует множество сервисов, которые предлагают вам быстрые исправления и оценки, которые помогут вам вернуться к своему боссу и сказать: «но он получил 100 баллов в Lighthouse». Некоторые из них великолепны, и вам определенно стоит их использовать, но вы не можете полагаться ни на один из них. Черт, на троих не положишься. В конце концов, даже после использования всех доступных инструментов вам все равно придется вручную тестировать свой сайт, если вам действительно нужна доступная страница, а не просто то, что, вероятно, позволяет избежать судебного процесса. Сделать Интернет доступным для как можно большего числа людей - это гораздо приятнее, чем просто сделать минимум для удовлетворения требований закона.

Бонус!

Я не хочу преследовать на главной странице Medium. Я видел и строил НАМНОГО хуже. Итак, позвольте мне оставить вас с этим действительно крутым самородком доступности, созданным разработчиками Medium:

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