Государственный сайт, доступный для людей с ограниченными возможностями

Практические рекомендации по применению стандарта WCAG, инструментарий и процесс проверки сайта на доступность Дата публикации: 23.12.2016   Введение Требования по доступности сайта определяются стандартом WCAG уровня AA. Стандарт довольно подробно описывает все требования, содержит ссылки на разъяснения, используемые техники и часто встречающиеся ошибки. Это позволяет полностью опираться на него при анализе доступности веб-страниц и их адаптации. Кроме того, в общем доступе имеется большой инструментарий для полуавтоматического выявления ошибок: валидаторы и дополнения для браузеров. В этом документе представлены практические рекомендации по применению стандарта, описан инструментарий и процесс проверки сайта на доступность, даны ссылки на ключевые материалы и руководства по доступности сайтов, а также на примеры реализации наиболее распространённых виджетов. Стандарт WCAG 2.0 уровня AA описывает критерии доступности для разных категорий пользователей. На практике для соблюдения хорошего уровня соответствия критериям тестировщику будет полезно представить себя на месте следующих категорий пользователей (или привлечь их к тестированию): Страдающие различными видами дальтонизма (цветовой слепоты). Там, где цвет используется для индикации или предоставления информации, должны быть предусмотрены альтернативные визуальные средства. Слабовидящие. Накладываются требования по контрастности, размеру элементов и поддержке масштабирования страницы. Слепые (полностью незрячие — пользователи экранных чтецов). Требуется широкий набор мер, включая: предоставление текстовой альтернативы для всех значимых нетекстовых элементов, предоставление семантической вёрстки, правильное использование семантических областей, заголовков и других навигационных элементов, предоставление дополнительных средств навигации по странице, предоставление дополнительной метаинформации об элементах на странице и связях между ними, обязательное предоставление текстовых меток и, при необходимости, подсказок для элементов ввода, учет особенностей восприятия содержимого: оно воспринимается на слух, т.е. последовательно, без возможности охвата всей страницы взглядом целиком, без возможности заметить информацию в другой области страницы (если она не связана соответствующим образом), без восприятия сенсорных характеристик текста, реализация взаимодействия с элементами управления или ввода с помощью набора атрибутов (role, aria-* и др.). Пользователи с нарушением слуха. Требуется обязательное предоставление текстовой альтернативы для аудиоконтента. Пользователи с нарушением опорно-двигательного аппарата, которое может выражаться в неспособности пользоваться мышью. Требуется полная управляемость и доступность сайта для клавиатуры. Всем участникам разработки (дизайнерам, разработчикам, проект-менеджерам, тестировщикам и редакторам) можно также ознакомиться с кратким чек-листом, в котором описаны основные обязанности каждого специалиста по обеспечению доступности. См. также: Необходим сайт, мобильное приложение, услуги по SEO или контекстной рекламе? Тендерная площадка WORKSPACE поможет выбрать оптимального исполнителя. База проекта насчитывает более 10 500 агентств. Сервис работает БЕСПЛАТНО как для заказчиков, так и для исполнителей. Дизайн Цвет не может быть единственным способом предоставления какой-либо информации или разметки. Необходимо соблюдать контрастность согласно WCAG 2.0. Измерять контрастность в HTML можно WAVE Evaluation Tool Не следует опираться на сенсорные характеристики. Детально данное требование разобрано ниже в описании критерия 1.3.3. Должно быть предусмотрено визуальное отображение состояний фокуса на полях и элементах управления. Для информации, которую принципиально нельзя сделать доступной, следует предусматривать альтернативные формы представления или, если даже это невозможно, предоставить текстовое описание возможностей интерфейса (например, чтобы слепой пользователь имел возможность понять функционал страницы и обратиться за помощью к зрячему). См. также Accessibility Guidelines. The Checlist for Designers. Средства проверки Проверка сайта валидаторами на общую валидность HTML: https://validator.w3.org/ Проверка сайта специализированными валидаторами: http://achecker.ca/checker/ валидатор на основе анализа HTML-кода. Не учитывает JavaScript, ошибки выводятся в текстовом виде, не очень удобны для анализа. Выдаёт список потенциальных проблем, большая часть из которых не соответствуют действительности, однако список может использоваться в качестве дополнительного чек-листа. http://wave.webaim.org/ и расширение для Chrome WAVE Evaluation Tool. Находят большое количество ошибок, предоставляют подсказки по исправлению и ссылку на стандарт, предоставляют информацию в удобном виде, подсвечивают синтаксис и aria-атрибуты. Главное удобство в том, что расширение может анализировать не исходный код, а текущее состояние страницы. http://khan.github.io/tota11y/ — встраиваемый на страницу с помощью букмарклета визуализатор и валидатор доступности. Поддерживает измерение контрастности. В отличие от Wave Evaluation Tool, не показывает все ошибки сразу и определяет не так много ошибок. AInspector Sidebar for Firefox. В отличие от предыдущих валидаторов, позволяет находить ошибки в логике применения aria-атрибутов. Кроме списка ошибок выдает также список проверок, которые рекомендуется сделать вручную. Accessibility Developer Tools Chrome. Отлавливает в основном формальные ошибки применения aria-атрибутов. Из минусов: неудобный интерфейс и непонятный формат вывода ошибок. Нужно помнить, что наличие сообщений об ошибках валидатора само по себе не является формальным критерием несоответствия WCAG. Кроме того, некоторые сообщения носят рекомендательный характер или помечены как потенциальные. Решения по ним должны приниматься исходя из контекста. Верно и обратное: не любая проблема находится валидатором: необходимо ручное тестирование в т.ч. с применением экранных чтецов (см. ниже). Проверка в экранных чтецах. Наиболее простой в настройке является комбинация Windows + Firefox/IE + NVDA. Также широко распространен JAWS (программа платная и дорогая, но поставляется в триал-версии с 40-минутным режимом). Пользователям других ОС тестовое окружение можно настроить в виртуальных машинах от Microsoft (https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/ — бывший modern.ie), работает приемлемо, по крайней мере, с ВМ Windows 7. Программы экранного доступа довольно специфичны для тех, кто с ними сталкивается впервые, однако к пользованию ими можно относительно быстро привыкнуть. Освоить программу на уровне краткой инструкции (см. ниже) рекомендуется всем фронт-энд разработчикам и тестировщикам. Это не займёт много времени. Изначально при вёртске нужно учитывать Соблюдение семантики разметки. В частности, можно выделить следующее (перечислено далеко не всё): Разметка списков, перечислений пунктов, лент документов и пр. тегами