Инструкция: как сделать сайт доступным для людей с ограниченными возможностями

Советы, инструменты и примеры того, как надо и как не надо работать над
доступностью сайтов.ИЛЛЮСТРАЦИЯ: НАЗВАНИЕ САЙТА TE-ST, ВЫПОЛНЕННАЯ В
ВИДЕ ТЕКСТА ИШИХАРЫ. ИНСТРУМЕНТ: FRANCISCOUZO.GITHUB.IO/ISHIHARA/
Инна Суворова
ВРЕМЯ НА ЧТЕНИЕ  20 МИН
 11 МАРТА 2021
Как проверить, удобно ли пользоваться вашим сайтом людям с ограниченными
возможностями? Что почитать и на какие руководства полагаться в
разработке? Сколько стоит создать доступный сайт? В этой статье советы,
инструменты и примеры того, как надо и как не надо работать над
доступностью сайтов.
Эксперты, которые мне помогли в создании материала: Никита Цейковец,
Джуди Брюер, директор WAI, Анна Минаева из USABILITYLAB и Евгений
Альтовский, руководитель Информационно-аналитической службы, член
Правления общественного движения (ОД) «Информация для всех».
В России официально 12 млн человек с инвалидностью (по данным
Министерства труда России). Кроме того, некоторые особенности
восприятия, например, дислексия, инвалидностью не являются, но могут
помешать использованию Интернета.
Сложности, в первую очередь, испытывают люди со слабым зрением или
незрячие, люди с моторными нарушениями, а также, особенно в контексте
видеосервисов, инвалиды по слуху. С 2015 по 2018 год инвалидами по
зрению было признано 80,9 тысячи человек старше 18 лет. 56 тысяч
получили инвалидность из-за проблем со слухом. Более точных данных нет,
последняя общая статистика относится к 2009 году, а Всемирная
организация здравоохранения в своих отчетах обращает внимание на
ухудшение зрения у людей по всему миру. По их данным, сегодня 65
миллионов человек страдают слепотой или нарушениями зрения.
Поэтому о доступности интернет-ресурсов и приложений говорят много, и
постепенно, хотя иногда слишком медленно, мы двигаемся к созданию более
доступной онлайн-среды для людей с ограниченными возможностями.
Доступность сайта полезна гораздо большему количеству людей, чем это
может показаться на первый взгляд. Концепция, которой
следует WAI (Web Accessibility Initiative, некоммерческая организация,
занимающаяся разработкой стандартов доступности Интернета), звучит как
«Essential for some – useful for all» («Необходимо для некоторых –
полезно для всех»). То, что необходимо людям с ограниченными
возможностями, часто может быть нужно и удобно многим другим.
Возможность пользоваться ресурсом без использования мыши оценили все те,
кто когда-либо ломал руку. Родителям маленьких детей тоже очень удобно
иметь возможность пользоваться сайтом без мыши, приложением – одной
рукой – и держать в свободной руке ребенка. Пожилые люди гораздо
лучше ориентируются на сайтах с крупными кнопками, хорошим контрастом и
возможностью увеличить шрифты.
Простой и понятный интерфейс – это необходимая деталь для успеха у любой
целевой аудитории.
Как выглядит Интернет для людей с ограниченными возможностями?
Для начала представим себе, как выглядит текст для человека с дислексией.
Видеозапись с канала AbilityNet, имитирующая, как человек с дислексией
видит текст.
Что такое дислексия? Это расстройство, связанное с навыками чтения при
совершенно нормальном развитии интеллекта. Как такие люди чувствуют себя
в Интернете при условии, что это среда, где навигация происходит через
текст? Те, у кого дислексия в тяжелой форме, сталкиваются со сложностями
не только в использовании компьютера. Как снимать наличные в банкомате,
если в пин-коде не можешь отличить 6 от 9?
А вот очень беглое объяснение, как пользуются компьютером незрячие люди:
Видеозапись из блога «Занимательная повседневность», который ведут
незрячие супруги Михаил и Анна. На видео Анна показывает, как она
пользуется компьютером
Еще один способ взглянуть на сайт, чтобы понять, как он выглядит для
людей с различными проблемами со зрением, – расширение
для Chrome No Coffee. Его автор Аарон Левенталь работает в Google в
команде разработчиков браузера Chrome.
Например, вот так будет выглядеть сайт «Теплицы» глазами человека с
дальтонизмом:
скриншот с сайта «Теплицы социальных технологий» с плагином No Coffee
СКРИНШОТ С САЙТА «ТЕПЛИЦЫ СОЦИАЛЬНЫХ ТЕХНОЛОГИЙ», ГДЕ ПРИМЕНЕН ПЛАГИН NO
COFFEE
То или иное нарушение цветовосприятия есть, по разным оценкам, у 2-8%
населения, в основном – у мужчин. Есть данные (Harrison, G.A. et al.,
1977 год, «Human Biology»), что у 9,2% русских мужчин есть
нарушения цветовосприятия. Но степень выраженности может быть очень
разной (многие узнают об этом вообще уже будучи взрослыми), проблемы в
восприятии информации в Интернете обычно возникают у людей с серьезными
нарушениями цветовосприятия.
Новые стандарты отрасли: курс на приложения
Мировыми стандартами доступности занимается WAI – Web
Accessibility Initiative, подразделение консорциума W3C, который под
руководством Тима Бернерса-Ли, изобретателя Всемирной паутины,
занимается развитием Сети.
Заметная часть этой работы – как раз развитие стандартов доступности.
Действующий стандарт WCAG 2.1 (Web Content Accessibility Guidelines,
Руководство по обеспечению доступности веб-контента 2.1) можно найти на
сайте WAI. Официального перевода на русский язык, признанного WAI, еще
нет, но есть неавторизованный перевод, его выполнило ОД «Информация для
всех», текст доступен на сайте ОД «Информация для всех».
Два новых стандарта 2.2 и 3 сейчас разрабатываются. Черновик WCAG 2.2
опубликован 11 августа 2020 года. По словам Джуди Брюер «в настоящее
время Web Accessibility Initiative (WAI) разрабатывает Руководство по
обеспечению доступности веб-контента (WCAG) 2.2, которое добавит больше
положений, касающихся доступности для людей с когнитивными нарушениями,
людей с ослабленным зрением, а также добавит больше положений для людей
с ограниченными возможностями, пользующихся мобильными устройствами и
приложениями». О разнице между версиями 2.1 и 2.2 можно почитать на
сайте «Тифлокомп».
WCAG 3 уже расшифровывается как W3C Accessibility Guidelines (WCAG) 3.0,
он опубликован 21 января 2021 года. Из названия пропало слово «контент»,
рекомендации станут более всеобъемлющими. Подробнее об изменениях,
которые уже на этом этапе можно понять из документа, можно узнать на
«Тифлокомп».
WCAG не содержит конкретных технических решений, это скорее чек-лист,
который описывает то, что нужно сделать разработчику сайта и на что
обратить внимание.
У WAI есть англоязычный онлайн-курс на edX, посвященный азам
доступности, обучение бесплатное, сертификат можно оплатить отдельно,
стоимость – 99 долларов США, что по текущему курсу чуть больше 7200 рублей.
Более детальные инструкции, описывающие механизмы обеспечения
доступности, содержатся в технических спецификациях Консорциума
Всемирной паутины. Прежде всего, это Accessible Rich Internet
Applications (ARIA). ARIA – это не столько руководство, сколько
спецификация ролей, атрибутов и свойств элементов, из которых
проектируется веб-интерфейс. Его можно использовать как справочник
дополнительных приемов, при помощи которых можно улучшить доступность в
плохо сделанном интерфейсе или изначально реализовать доступность
сложных элементов интерфейса, для которых нет типовых решений.
Российские стандарты
В России есть собственные стандарты создания доступных интернет-ресурсов
и приложений – это ГОСТ Р 52872-2019 «Интернет-ресурсы и другая
информация, представленная в электронно-цифровой форме. Приложения для
стационарных и мобильных устройств, иные пользовательские интерфейсы.
Требования доступности для людей с инвалидностью и других лиц с
ограничениями жизнедеятельности». Документ утвержден в августе 2019 года
и вступил в силу в апреле 2020 года. Судя по тексту документа, он
основан на стандарте WCAG 2.1 от WAI, а также содержит ссылки на другие
нормативные документы Российской Федерации.
В 2014 году также был принят федеральный закон № 419 «О внесении
изменений в отдельные законодательные акты Российской Федерации по
вопросам социальной защиты инвалидов в связи с ратификацией Конвенции о
правах инвалидов» – пакет поправок, признанный уравнять возможности
доступа к ресурсам людей с ограниченными возможностями.
Как на самом деле
Ситуация с доступностью сайтов все еще не очень оптимистичная, причем не
только в России, но и в мире. Как показывает Web Accessibility Annual
Report (ежегодный отчет о доступности сети Интернет), по крайней мере
98% меню веб-сайтов, 89% всплывающих окон и 83% кнопок не соответствуют
рекомендациям WCAG 2.1.
ГРАФИК ИЗ WEB ACCESSIBILITY ANNUAL REPORT, ДЕКАБРЬ 2019 ГОДА, КОТОРЫЙ
ПОКАЗЫВАЕТ – КАКОЕ КОЛИЧЕСТВО ЭЛЕМЕНТОВ ИНТЕРФЕЙСОВ В ИНТЕРНЕТЕ НЕ
СООТВЕТСТВУЕТ РЕКОМЕНДАЦИЯМ СТАНДАРТА WCAG 2.1
В Евросоюзе принята «Web Accessibility Directive» или «Directive (EU)
2016/2102» («Директива Европейского Парламента и Совета ЕС 2016/2102 от
26 октября 2016 года о доступности сайтов и мобильных приложений органов
публичного сектора»). Она обязывает сделать сайты, программное
обеспечение и приложения удобными и понятными для всех людей с
инвалидностью. Директива касается публичного
сектора, например, госучреждений, образовательных организаций. Частные
компании ей следовать не обязаны. Краткое путешествие по сайтам
правительств стран ЕС показывает, что директиве они следуют.
В США с 1973 года действует Закон о реабилитации инвалидов
(Rehabilitation Act), который запрещает дискриминацию в любой форме
людей с ограниченными возможностями. Секция 508 (Section 508),
посвященная обеспечению равных возможностей в использовании современных
технологий, появилась в этом законе аж в 1986 году.
А что в реальности? Показательным для американского рынка может быть
случай, когда компанию Domino Pizza через суд обязали сделать свое
приложение и веб-сайт доступными для незрячих.
Однако, как отмечает Buro of Internet Accessibility (США), даже
ежегодный отчет Департамента об образовании для президента и конгресса,
касающийся, в том числе, вопросов доступности образовательных
веб-сайтов… не отвечает стандартам оформления документов так, чтобы с
ними могли ознакомиться незрячие и слабовидящие. Например, к
иллюстрациям нет поясняющих текстов, а сам файл не подготовлен для
скрин-ридеров.
Но многое меняется к лучшему, в том числе и в России. Анна Минаева
говорит, что есть положительная динамика. Команда USABILITYLAB
проводит исследования доступности банковских мобильных приложений для
физических лиц с 2016 года. Количество проблем высокой критичности, не
позволяющих взаимодействовать с приложением в принципе, значительно
сократилось.
В 2016 году в некоторые из приложений было невозможно войти при
включенном экранном дикторе. Теперь, несмотря на то, что многие операции
по-прежнему недоступны или доступны плохо, доля критичных проблем
сокращается. Сейчас проблемам доступности уделяется большее внимание,
особенно в банковской сфере, в части мобильных приложений, поскольку это
сейчас наиболее динамично развивающийся канал дистанционного банковского
обслуживания.
— Анна Минаева
USABILITYLAB
Лидер среди банковских приложений – «Сбербанк», основываясь на своем
опыте улучшения доступности своих сервисов, запустил небольшой
проект «Гайдлайн», где рассказывает о своем опыте обеспечения равного
доступа к сервисам для всех клиентов банка.
В 2020 году многие российские государственные организации обратили
внимание на необходимость доработки своих сайтов для того, чтобы ими
могли пользоваться люди с ограниченными возможностями. Причина – не
только новый ГОСТ, но и вступившие в апреле 2020 года поправки в Кодекс
об административных правонарушениях, которые наделяют Роскомнадзор
правом штрафовать за нарушение прав людей с ограниченными возможностями
на доступ к информации.
Фонд «Искусство, наука и спорт» и инклюзивный проект Everland (мы о нем
регулярно рассказываем) с декабря 2019-го по апрель 2020 года провели
исследование доступности сайтов для уязвимых групп россиян, портал
Госуслуги получил высшие оценки. Подробнее об исследовании можно
прочитать на сайте фонда.
Пенсионный фонд РФ не попал в это исследование, но, как можно убедиться,
также проделал определенную работу по повышению доступности своих сервисов:
СКРИНШОТ САЙТА ПЕНСИОННОГО ФОНДА, ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ
Последнее обновление поддерживает https, но при переходе в Личный
кабинет доступный режим сайта исчезает. Надеемся, в ближайшее время это
будет исправлено.
Доступность – не бинарная категория
При разработке доступных веб-сайтов все эксперты сходятся в одном –
нужно следовать инструкциям. Доступность обеспечивается не только в
рамках взаимодействия «пользователь – сайт», многие используют
дополнительное ПО (например, программы экранного доступа, скринридеры –
от англ. screen reader), есть средства на уровне браузеров. Речь идет о
среде, и новый элемент – веб-сайт, чьи владельцы приняли решение
улучшить его доступность, – должен в эту среду вписаться, а значит –
играть по правилам, а не выдумывать что-то новое.
Есть хорошие новости. Первая: WCAG все требования по обеспечению
доступности группирует по трем уровням: А, АА, ААА. В большинстве
случаев стоит ориентироваться на средний, второй, уровень AA. Переход от
уровня к уровню не скачкообразный, постепенная доработка и улучшение
возможны и вполне приемлемы. Не обязательно полностью обновлять сайт,
чтобы сделать его доступнее для разных категорий пользователей.
Вторая хорошая новость – для обеспечения доступности в большей части
случаев достаточно следовать инструкции, а не искать креативных
нестандартных подходов.
Третья хорошая новость следует из второй – какого-то невероятного
удорожания стоимости разработки при создании сайта, удобного для людей с
ограниченными возможностями, не происходит. Более того, если такую цель
поставить до начала разработки, то особых сложностей и серьезного
удорожания проекта возникнуть не должно.
Некоторые сложности могут возникнуть в том случае, если сначала сделать
очень эффектный, необычный и не шаблонный сайт, а потом уже задуматься о
том, как его воспринимают скринридеры.
Доступность – это не только про веб-сайты
Если в области именно создания доступных сайтов за 2020 год не случилось
прорывов, то разработчики браузеров и вспомогательного ПО на месте не
стоят. Хотя, конечно, их разработки интересны скорее конечным
пользователям и помогают преодолеть несовершенство веб-сайтов.
Как отмечает Джуди Брюер, WAI, «Разработчики могут многое сделать, чтобы
их продукты и сервисы обеспечивали повышение доступности для людей с
ограниченными возможностями».
Например, в последнем обновлении Apple добавлена функция «Язык жестов»,
и мессенджер FaceTime теперь определяет, что кто‑то из участников
разговора использует язык жестов, а во время групповых видеозвонков
видео такого участника фиксируется на экране.
В целом Apple, производя одновременно «железо» и программное
обеспечение, по умолчанию предлагает своим пользователями набор удобных
функций, которые могут пригодиться не только людям с ограниченными
возможностями, хотя предназначены, в первую очередь, для них. Например,
для неслышащих и слабослышащих устройство Apple может распознать звук
пожарной сигнализации или звонка в дверь и прислать уведомление об этом.
И, кстати, описывает эти функции понятным языком.
Для мобильных устройств есть встроенные скринридеры VoiceOver (iOS)
и TalkBack (Android), они периодически обновляются. Как отмечает Анна
Минаева, USABILITYlab, незрячие пользователи отмечали хорошее качество
озвучивания в телефонах Samsung по сравнению с другими
производителями Android-телефонов.
Для пользователей, у которых компьютеры не от Apple, существуют
другие скринридеры. Один из самых популярных среди бесплатных
– NVDA (Non-Visual Desktop Access).
Многие функции, которые относятся к Accessibility, могут быть полезны
кому угодно, например, режим чтения в Safari, который отрезает рекламу и
лишнюю информацию.
Кстати, такая же опция есть в большинстве браузеров, в FireFox, Opera,
Edge и в Chrome, где ее нужно активировать на странице .
В этом режиме можно выбрать размер и вид шрифта, а также разные виды
фона, облегчающие чтение, особенно длинных текстов.
Браузеры тоже совершенствуют практики взаимодействия «пользователь –
сайт» с помощью собственных встроенных средств. Ссылки на страницы с их
описанием: Mozilla (FireFox), Microsoft Edge, Chrome.
Chrome от Google предлагает своим пользователям набор расширений для
браузера, которые могут помочь людям в его использовании (скринридеры,
лупы, настройки тем и цветов).
Как проверить доступность сайта?
Для проверки сайта на предмет его доступности и удобства для людей
с ограниченными возможностями есть три взаимодополняющих варианта.
1. Формально проверить сайт на соответствие существующим требованиям.
Здесь, например, вам поможет хороший чек-лист на habr.
2. Задействовать автоматическую проверку специальными валидаторами,
которые проверяют верстку и указывают на типовые ошибки. Здесь можно
воспользоваться либо соответствующими инспекторами доступности из
инструментов разработчика в браузерах, например, Chrome
или Firefox, либо каким-то внешним инструментом, например, Axe или WAVE.
Вот так выглядят результаты проверки сайта Пенсионного фонда
в Accessibility Inspector, встроенный в FireFox по умолчанию,
проверяющий соответствие стандартам WCAG.
СКРИНШОТ, ДЕМОНСТРИРУЮЩИЙ РАБОТУ ИНСТРУМЕНТА ACCESSIBILITY INSPECTOR
(FIREFOX).
Удобно, что к каждому не соответствующему стандартам элементу можно
посмотреть описание ошибки. Какие-то из них можно легко и быстро поправить.
Axe – это плагин для браузера Chrome. Результат его работы с сайтом
Пенсионного фонда тоже показателен:
СКРИНШОТ, ДЕМОНСТРИРУЮЩИЙ РАБОТУ ПЛАГИНА AXE ДЛЯ CHROME.
Плагин нашел 9 ошибок, среди них ни одной критической. Это отличный
результат.
Версия для людей с ограниченными возможностями также содержит 9 ошибок,
но серьезных ошибок на одну меньше.
СКРИНШОТ, ДЕМОНСТРИРУЮЩИЙ РАБОТУ ПЛАГИНА AXE ДЛЯ CHROME ДЛЯ
АДАПТИРОВАННОЙ ВЕРСИИ САЙТА ПЕНСИОННОГО ФОНДА
Для сравнения, сайт «ВКонтакте» содержит 41 критическую ошибку:
СКРИНШОТ, ДЕМОНСТРИРУЮЩИЙ РАБОТУ ПЛАГИНА AXE НА САЙТЕ «ВКОНТАКТЕ».
При выборе вкладки «Специальные возможности», которая, видимо, должна
адаптировать интерфейс к вспомогательным технологиям, количество ошибок
уменьшается незначительно:
СКРИНШОТ, ДЕМОНСТРИРУЮЩИЙ РАБОТУ ПЛАГИНА AXE НА САЙТЕ «ВКОНТАКТЕ» ПОСЛЕ
ВЫБОРА ОПЦИИ «СПЕЦИАЛЬНЫЕ ВОЗМОЖНОСТИ».
Социальные сети могут сделать Интернет доступнее. В январе Facebook
сообщил об обновлении своего инструмента Automatic Alternative Text
(AAT, автоматический альтернативный текст). Нейросеть, натренированная
на миллиардах изображений и хэштегов в Instagram, позволяет описать
изображение, к которому нет альтернативного текста. Причем она учитывает
культурную специфику, например, «узнает» на фотографии свадьбу, даже
если невеста не в белом платье.
Для использования WAVE ничего дополнительно устанавливать не требуется,
вы просто заходите на сайт проекта и вводите ссылку на интересующий
ресурс. Вот так выглядит результат анализа сайта Пенсионного фонда:
РЕЗУЛЬТАТ РАБОТЫ СЕРВИСА WAVE НА ПРИМЕРЕ САЙТА ПЕНСИОННОГО ФОНДА РФ.
Разработчик сразу может посмотреть, где ошибки, и их поправить.
РЕЗУЛЬТАТ РАБОТЫ СЕРВИСА WAVE НА ПРИМЕРЕ АДАПТИРОВАННОЙ ВЕРСИИ САЙТА
ПЕНСИОННОГО ФОНДА РФ.
Недостаток WAVE – невозможно полноценно проверять сайты, которые требуют
авторизации, например, большинство соцсетей.
3. Проверка специалистов. Сервисы помогают оценить, что вообще
происходит с сайтом. Что-то можно поправить сразу, но если доступность
сайта в приоритете, то лучше заказать экспертизу доступности у
специалиста. Он вручную, как обычный пользователь, проверит, как сайт
открывается в разных браузерах и как работает со вспомогательным
программным обеспечением. Это позволит найти проблемы, которые не
вычислить с помощью автоматической проверки и чек-листа.
Самый надежный способ – реализовать все три пункта. Сначала проверить по
списку и исправить те ошибки, которые выдают сервисы, а потом поручить
экспертизу специалисту по доступности. Даже очень эмпатичный и
старательный разработчик, который в курсе всех правил, ГОСТов и
регламентов, все равно не в состоянии полностью воспроизвести тот
вариант взаимодействия с сайтом/приложением, который проходят
пользователи с теми или иными ограничениями.
Так как сайты дорабатываются и обновляются с течением времени, не всегда
при этом учитывая стандарты доступности, то проверку нужно проводить
регулярно.
Кстати, примеры показывают, что доступный сайт – это не какой-то
специальный сайт для специальных людей. Удобный и продуманный сайт
нравится всем пользователям без исключения.
7 шагов для тех, кто хочет сделать сайт более удобным для незрячих
посетителей
1. Интерфейс должен быть контрастным и выдерживать масштабирование
средствами браузера до 200%, не «разваливаясь».
2. Все элементы страницы, имеющие определенный семантический смысл
(заголовок, список, таблица, ссылка и так далее) должны верстаться не
просто за счет изменения внешнего вида, а соответствующими типовыми
элементами HTML –
Continue reading

Инклюзивный дизайн

Запись митапа «Инклюзивный дизайн», прошедшего 11 марта 2020 в офисе Mail.ru Group.

Участники и темы:

— Дизайн-команда Почты Mail.ru об исследования доступности продукта;
— Валерия Курмак из AIC о том, как заложить принципы инклюзивности в дизайн-систему;
— Саша Сандимирова из “Билайна” об опыте внедрения стандартов доступности в компании;
— Игорь Захарченко из Альфа-Банка об инклюзивном подход в банковских продуктах;
— Алексей Шайхелисламов и команда Mos.ru о внутреннем инструменте подбора доступной палитры.
Continue reading

Что такое доступность сайта и как её проверить

Что такое доступность сайта и как её проверить
Статьи, 3 декабря в 09:10
Сергей Почекутов
788
Доступность означает, что сайт разработан таким образом, что им могут пользоваться люди с ограниченными возможностями. Под использованием понимается восприятие информации, навигация по интерфейсу и взаимодействие с ним.
Основные характеристики доступности:
• контраст цветов;
• распознавание голоса;
• поддержка скринридеров — озвучивание сайта для слепых и слабовидящих людей;
• логичная и простая навигация;
• крупные элементы управления;
• возможность настроить контент — например, увеличить размер шрифта.
Традиционно о доступности сайтов и приложений говорят в контексте использования их людьми со слуховыми, визуальными, речевыми, когнитивными, неврологическими, физическими проблемами. Однако доступность интернета приносит пользу и людям без инвалидности:
• пользователям смартфонов, умных телевизоров и часов, а также других устройств с небольшими экранами или различными режимами ввода;
• пожилым людям, у которых ухудшаются физические возможности;
• людям со временными проблемами — например, сломанной рукой или потерянными очками;
• пользователям с ситуационными ограничениями — например, ярким солнечным светом или нахождением в среде, где они не могут слушать аудио;
• людям, использующим медленное подключение к интернету.
Это примеры со страниц проекта Web Accessibility Initiative, посвящённого доступности интернета. Как видите, понятие получается достаточно широким. Поэтому о доступности сайтов нужно думать не только разработчикам государственных порталов, где это является требованием законодательства, но и в принципе всем, кто работает в веб-индустрии.
Доступностью следует заниматься ещё и потому, что она приносит бизнесу материальную выгоду. Например, расширение аудитории за счёт людей с постоянными и временными ограничениями, стимулирование инноваций в области пользовательского опыта, развитие бренда благодаря поддержке разнообразия и инклюзивности.
Как проверить доступность сайта через Chrome DevTools
В качестве примера возьмём сайт проекта A11Y, рассказывающего о доступности интернета.
1. Открываем DevTools на главной странице сайта (Ctrl + Shift + C на Windows или Cmd + Shift + C на macOS).
2. Переходим на вкладку Lighthouse.
3. В разделе Categories убираем все галочки, кроме Accessibility.
4. Выбираем тип устройства .
5. Нажимаем на кнопку Generate report.
Создание отчёта о доступности страницы
Сейчас нас интересует только доступность
Проверка показывает 100 % доступность главной страницы. Можно открыть подробности и посмотреть, какие именно параметры были проверены. Например, мы видим, что прописаны роли, есть описания в атрибутах Alt, так что скринридеры могут корректно передать пользователю, на каком именно элементе он сейчас находится фокусом.
Результат проверки доступности 100 %
Показатель, к которому нужно стремиться
Чтобы просматривать атрибуты ARIA (Accessible Rich Internet Applications), контролировать подписи элементов, используйте Accessibility Tree. Это тот же DOM, только в нём отображаются специальные возможности. Чтобы увидеть это дерево, перейдите на вкладку Elements и выберите режим Accessibility.
Дерево доступности страницы
Все важные для доступности параметры
Можно анализировать доступность не страниц, а отдельных элементов. При открытии DevTools с помощью горячих клавиш автоматически запускается инструмент Inspect Element Tooltip.  Благодаря ему при наведении курсора на элемент выкатывается окно, в котором есть раздел Accessibility. Здесь показаны результаты проверки контрастности, наличие подписи, роль, а также поддержка фокуса с клавиатуры.
Инспектирование элемента страницы
Так удобно проверять элементы по отдельности
Можно уделить контрастности чуть больше внимания и попробовать разные сочетания цветов:
1. Открываем DevTools и на вкладке Elements выбираем нужный текстовый фрагмент.
2. Находим color среди его свойств.
3. Двойным кликом по квадрату с цветом открываем дополнительную панель.
Изменение цвета для настройки контрастности
Можно быстро подобрать подходящий цвет
Contrast Ratio — текущее значение контрастности. AA — минимально допустимое, AAA — достаточное значение контрастности. В этой же панели можно поиграть с цветами, меняя их и проверяя контрастность.
Проверка доступности сайта для людей, имеющих проблемы со зрением
Чтобы проверить сайт на доступность для людей, имеющих проблемы со зрением, используйте инструмент Emulate Vision Deficiencies. Он находится на вкладке Rendering.
Проверка доступности при проблемах со зрением
Можно посмотреть на сайт глазами разных пользователей
Эмулируются следующие проблемы:
• затуманенное зрение — постепенное снижение чёткости зрения, связанное с уменьшением его остроты;
• протанопия — вид цветовой слепоты, при котором нарушается восприятие красных оттенков;
• дейтеранопия — вид цветовой слепоты, при котором нарушается восприятие жёлто-зелёных оттенков;
• тританопия — вид цветовой слепоты, при котором нарушается восприятие синих и фиолетовых оттенков;
• дальтонизм — сниженная способность или полная неспособность видеть или различать некоторые цвета.
При изменении режима эмуляции страница будет отображаться так, как её видит человек с соответствующими особенностями зрения.
Что ещё почитать о доступности
Главный источник информации о доступности в интернете — раздел Web Accessibility Initiative на сайте W3C. Здесь есть стандарты, гайдлайны, учебные пособия, тесты, рекомендации для дизайнеров, разработчиков, авторов текстов. Основной документ — Web Content Accessibility Guidelines (WCAG). В нём представлен универсальный набор стандартов доступности.
Интенсив «Чат-бот с искусственным интеллектом на Python»
21–23 декабря, Онлайн, Беcплатно
tproger.ru
События и курсы на tproger.ru
Узнать больше о доступности и способах её проверки можно также на сайте проекта A11Y. Там есть чек-листы для разработчиков, расширения для браузеров, скринридеры, визуальные симуляторы и другие полезные инструменты, которые помогут сделать сайт доступным для максимального количества пользователей.
Офицеальный сайт Что такое доступность сайта и как её проверить

Доступный PDF: что это и какими средствами достигается?

Материал первоначально был подготовлен для проекта Особый взгляд. Доступный PDF. История и концепция
Формат PDF (Portable Document Format) был задуман и реализован как универсальное решение для создания и обработки интерактивных электронных документов с очень широкими возможностями, реализуемыми независимо от используемого программного обеспечения, способа создания документа и операционной среды.
Документы PDF одинаково хорошо отображаются на любом дисплее и распечатываются на любом принтере. Его страницы выводятся на экраны надёжным, не зависящим от типа применяемых устройств способом.
Спецификация PDF была впервые представлена Adobe Systems в 1993 году как общедоступные технические требования. В июле 2008 года спецификация PDF версии 1.7 становится международным стандартом ISO 32000-1.
В июле 2012 года появился знаменитый PDF/UA (Universal Accessibility — «доступность для всех») в виде международного стандарта ISO 14289-1, обновлённого в 2014 году. Это стало значимым событием для многочисленной категории людей, имеющих стойкие или временные проблемы со зрением, памятью, двигательными и другими функциями организма. Люди с различными ограничениями жизнедеятельности получили новые возможности для создания и обработки электронных документов популярного формата. С помощью аппаратных и программных вспомогательных технологий (таких как программы экранного доступа и увеличения экрана, Брайлевские дисплеи, системы речевого вывода и др.) люди с ограниченными возможностями здоровья оказываются в состоянии в полной мере использовать компьютерную технику для реализации своих информационных и социальных потребностей, трудоустройства и участия в культурной жизни общества.
К сожалению, PDF/UA не стал очередной спецификацией, строго определяющей необходимые требования к документам PDF в целом. Он представляет собой обычные технические требования для создания доступного документа и не обязателен к применению. Автор документа или разработчик программного обеспечения вправе выбирать, будет ли его документ либо текстовый процессор соответствовать стандарту PDF/UA или нет. Возможно, здесь мы имеем ситуацию, когда универсальность формата, его кроссплатформенность и технологичность пока ещё оказываются важнее применимости среди особенных категорий пользователей. Но мы вправе надеяться на то, что в не столь далёком будущем тема универсальной доступности цифрового контента станет популярнее, а инструменты для создания и обработки PDF будут производительнее и эргономичнее, в результате чего задача производства документов, соответствующих требованиям PDF/UA станет актуальнее и существенно упростится.
Механизмы доступности PDF
PDF включает несколько средств поддержки доступности. Главным из них является возможность создания логического порядка содержимого в документе, не зависящего от изменения этого содержимого при последующем редактировании, через определение логической структуры и формат тегированнового PDF. Приложения могут извлекать содержимое документа и предоставлять его пользователю с особыми потребностями, переходя по иерархической структуре и отображая каждый её отдельный элемент. Именно поэтому авторы документов PDF в первую очередь должны обеспечить размещение всего контента в рамках единой иерархической структуры.
Наряду с иерархической, документ PDF обладает логической структурой, описанной в спецификации PDF 1.3 и разделяющей документ на главы, абзацы, страницы и прочие фрагменты. Кроме того, логическая структура выделяет специальные элементы контента: диаграммы, таблицы, сноски, и др.
При создании логической структуры используются те же приёмы, что и в известных языках разметки, таких как HTML, SGML и XML: она выражается в иерархии структурных элементов. Подобно своим аналогам в других языках разметки, структурные элементы PDF имеют содержимое и атрибуты. Логическая структура как таковая существует отдельно от воспринимаемого пользователем содержимого документа, что позволяет обрабатывать графические объекты отдельно от основного текста.
Какими средствами можно обеспечить доступность документов PDF
Приложение Adobe Acrobat Pro обладает набором инструментов для проверки и практического осуществления доступности документов PDF, включая доступ к корню структуры через панель тегов, возможность непосредственно изменять порядок чтения документа через соответствующую панель, а также встроенное средство проверки соответствия требованиям доступности и инструмент Touch Up Reading order, которые дают возможность не только обнаружить, но и устранить недочёты, неблагоприятно влияющие на доступность документа PDF. Кроме того, встроенная система распознавания текста (OCR) позволит воссоздать текстовый контент из графических объектов, содержащих изображение текста.
Помимо этого, существует дополнение (плагин) Commonlook PDF для Adobe Acrobat Pro от Netcentric Technologies, который позволяет обнаруживать и исправлять наиболее распространённые проблемы доступности документов, включая надлежащее тегирование изображений, таблиц, форм и других нетекстовых объектов.
Что делает PDF-документ доступным?
Существуют конкретные техники, позволяющие обеспечить доступность и высокий уровень удобства взаимодействия пользователя с различными ограничениями жизнедеятельности с документом PDF. Ниже приводится их не исчерпывающий перечень и краткие комментарии.
Текстовое описание изображений
Сущность этого метода состоит в том, чтобы обеспечить для пользователей с нарушением зрения восприятие содержащегося в документе PDF недоступного для них визуального контента, такого как картинки, математические формулы, и др., посредством их словесного описания. Метод реализуется через ввод текста, описывающего изображение, в запись alt (alt entry) тега этого изображения.
Текстовое описание изображений, выполненное в виде электронного текста, позволяет системе речевого вывода, основанной на технологии Text To Speech, представлять информацию, заключенную в изображении, в форме синтезированной речи, которая воспринимается слепым пользователем при помощи органов слуха. Кроме того, посредством вспомогательных технологий текстовое описание изображения может быть представлена в виде специального рельефно-точечного шрифта Брайля пользователям, имеющим одновременно нарушения как зрения, так и слуха.
Если на картинке изображен текст, важный для её правильного восприятия, то он должен присутствовать и в её текстовом описании, которое, в свою очередь, должно отображать именно смысл, заключенный в визуальном контенте, а не описывать визуальные характеристики самого изображения. Нужно стремиться к тому, чтобы текстовое описание было по возможности ёмким, кратким и при этом служило бы информационной цели, которая достигается при зрительном восприятии визуального контента. Зададимся вопросом: если бы изображений в документе вдруг не стало, а остались бы только их текстовые описания, то его содержание оставалось бы в такой же степени полным и понятным? Если ответ утвердительный, то текстовые описания выполнены качественно.
Закладки
Для пользователей с когнитивными нарушениями может быть затруднительно знакомиться со всем документом, чтобы оценить его актуальность и понять основные моменты, передающие его смысл. В таких случаях им удобно пользоваться списком закладок, отражающих ключевые аспекты содержания этого документа, его схему. Кроме того, этот метод делает возможным быстрый поиск нужного фрагмента документа.
Это удобно не только людям с когнитивными расстройствами, но и пользователям без каких бы то ни было ограничений жизнедеятельности.
Примером реализации такой техники может быть интерактивное оглавление документа.
Правильная последовательность чтения и клавиатурной навигации
Цель этого метода — гарантировать пользователю, применяющему вспомогательные технологии, возможность восприятия содержимого документа в той логической последовательности, которая задумана автором.
При помощи зрения обычный человек сам в состоянии определить эту последовательность, охватывая взглядом всю страницу. Её содержимое может быть расположено по-разному: в одну или несколько колонок, разделено на другие обособленные части. В поле зрения слабовидящих людей, использующих программы экранного увеличения, попадает лишь часть страницы, поэтому они, как и слепые пользователи при использовании программ экранного доступа, имеют возможность последовательно переходить по документу только с помощью клавиатурной навигации. Клавиатурная навигация часто бывает незаменима и для пользователей с двигательными нарушениями, которым трудно управлять указателем мыши. Очень важно в этом случае, чтобы фокус, во-первых, предсказуемо перемещался при помощи клавиатурного интерфейса, а во-вторых переходил по документу именно в той последовательности, которая нужна для его правильного прочтения. В случае применения слепыми пользователями программы экранного доступа немаловажно также, чтобы в режиме непрерывного чтения или чтения по фрагментам текста фокус автоматически переходил по документу в правильной последовательности- от заголовка к основному тексту, от колонки к колонке, от страницы к странице, а не «перескакивал», например, на ту же строку, но расположенную в другой колонке текста. Документ PDF может включать в себя и элементы сложного форматирования — боковые панели, сноски, различные интерактивные формы, графики, таблицы. И в этом случае актуальность определения правильной последовательности клавиатурной навигации и правильного порядка чтения только возрастает
Необходимые для достижения этих целей результаты обеспечиваются за счёт применения формата тегированного PDF, в котором логическая структура, а также порядок клавиатурной навигации и последовательность чтения документа в целом задаётся последовательно расположенными тегами, а логическая структура внутри отдельных информационных блоков, определяемых соответствующими тегами, — древовидной структурой всего документа.
Сокрытие декоративных элементов от пользователя вспомогательных технологий
Такая возможность может оказаться полезной тотально незрячим людям, которые читают документ, используя программы экранного доступа. Чисто декоративные элементы документа могут быть неактуальны, а при плохой разметке — даже затруднять восприятие документа.
Разумеется, текстовое описание для таких графических элементов не делается. Более того, для удобства этой категории пользователей само их наличие скрывается.
Это достигается применением тега Artifact, который указывает программе экранного доступа на элемент, который должен быть проигнорирован.
К таким элементам часто относят декоративные разделительные линии, верхние и нижние колонтитулы.
Явное указание на обязательные поля формы и контроль правильности их заполнения
Цель этого метода — информировать пользователя о том, что он не заполнил обязательные поля или ввёл данные в форму некорректно.
При заполнении формы некоторые поля (например, дата) должны быть заполнены строго определённым образом. Если это требование не выполняется, введённые данные не смогут быть правильно обработаны.
В других случаях, например, при покупке в интернет-магазине или регистрации на сайте, некоторые поля формы являются обязательными (такие как номер телефона, данные банковской карты, адрес электронной почты, и т.п.).
Обязательные для заполнения поля в документе PDF реализуются посредством записи /Ff (/Ff entry) в словаре поля формы (см. таблицу 220 раздела 12.7 (Interactive Forms) PDF 1.7 (ISO 32000-1)).
Если пользователь пропустил обязательное поле или заполнил его некорректно, появляется диалоговое окно с предупреждением и подсказкой правильного действия, что может быть реализовано через использование сценариев (см., например, SCR18: Providing client-side validation and alert). При этом для удобства незрячих и слабовидящих пользователей после закрытия окна с предупреждением в результате применения сценария клавиатурный фокус может быть перемещён в то поле формы, которое не было заполнено или было заполнено некорректно.
Кроме того, обязательные для заполнения поля могут помечаться, например, символом «звёздочка». При этом упоминание о том, что помеченные таким способом поля обязательны для заполнения, должно присутствовать в основном тексте. Таким же образом можно предложить пример или шаблон корректного заполнения поля (скажем, «дд.мм.гггг» для даты).
Правильная разметка таблиц, сохраняющая логические связи
Мы говорим о таблицах в тех случаях, когда логические связи между фрагментами текста, результатами вычислений, изображениями либо другими данными существуют в двух размерностях — горизонталь и вертикаль. Эти взаимосвязи представлены в строках и столбцах таблицы и должны быть правильно восприняты пользователями с нарушением зрения, которые применяют вспомогательные технологии.
Это достигается применением формата тегированного PDF с использованием следующих структурных табличных элементов:
• структурный элемент для обозначения таблицы Table;
• один или более элементов строки TR, который определяет каждую строку таблицы как непосредственный дочерний элемент элемента Table;
• один или несколько элементов заголовка TH или элементы табличных данных TD как непосредственные дочерние элементы каждого элемента строки TR;
• в ячейках, которые охватывают более двух столбцов или строк необходимо использовать атрибут ColSpan или RowSpan.
Если логические связи между соседними ячейками создавать не нужно и заполнять их данными нет необходимости, то для более удобной клавиатурной навигации по таблице с использованием вспомогательных технологий рекомендуется создавать «пустые» ячейки TD, чтобы количество столбцов и строк не изменялось и порядок их нумерации сохранялся.
Документ должен содержать электронный текст, а не его изображение
Как мы могли уже убедиться ранее, создание документа PDF, доступного для людей с различными ограничениями жизнедеятельности, невозможно без применения тегированного PDF и при отсутствии текстового формата содержимого самого документа, так как только такой формат может быть использован вспомогательными технологиями для передачи информации пользователю, лишенному зрения.
Однако на практике довольно часто встречаются документы PDF, составленные частично или полностью из изображений сканированного текста. В этом случае слабовидящие (пользователи программ увеличения экрана) не могут изменить цвет текста и фона или корректно масштабировать текст(так, чтобы он при двукратном увеличении не выходил за окно просмотра), а незрячие (пользователи программ экранного доступа) вообще лишаются возможности ознакомиться с документом. Невозможным становится и редактирование документа, а также использование закладок, заголовков, ссылок, и других элементов разметки и интерактивных элементов.
Безусловно, лучше изначально создавать документ PDF в правильном, полноценном формате. Но что можно предпринять, если он уже создан всего лишь из ряда изображений сканированного текста?
На помощь приходит технология оптического распознавания текста (англ. OCR — optical character recognition), которая позволяет не только автоматически воссоздать исходный текст, но часто даже и его логическую структуру, разметку документа и правильный порядок чтения.
Сегодня эта технология присутствует в ряде программ для обработки изображений, в некоторых текстовых процессорах, программах экранного доступа, а также операционной системе Microsoft Windows 10.
Полноценно преобразовать документ, составленный из изображений текста, в тегированный PDF, отвечающий всем требованиям доступности, можно при помощи приложения Adobe Acrobat Pro. После проведения процедуры оптического распознавания необходимо вручную исправить неправильно распознанный текст, произвести правильную разметку и форматирование документа в тех местах, где автоматические инструменты сделали это некорректно. Далее рекомендуется проверить правильность заданного порядка чтения документа с помощью режима чтения документа Adobe Acrobat Pro либо системы речевого вывода программы экранного доступа.
Раскрытие аббревиатур
Доступность документов PDF может стать лучше, если применять метод раскрытия аббревиатур (сокращений или акронимов) в окне просмотра при первом их появлении в тексте. Это обеспечивает понимание аббревиатур в последующем тексте людьми с расстройством памяти, а также в тех случаях, когда содержащая дополняющий контекст информация может быть недоступна в окне просмотра при использовании программ экранного увеличения слабовидящими людьми.
Результат достигается применением записи /E (/E entry) в структурном элементе тегированного PDF. Обычно для тегирования аббревиатур используется элемент Span.
Добавить запись /E для аббревиатуры в документе можно с помощью инструментов панели Adobe Acrobat Pro.
Применение заголовков
Присутствие в документе размеченных иерархически расположенных заголовков разного уровня обеспечивает следующие возможности пользователям вспомогательных технологий:
• быстро переходить к основному содержанию документа;
• находить обособленные части основного содержания;
• различать между собой разделы и подразделы документа;
• выявлять изображения, содержащие текстовые описания и маркированные как заголовки, когда они обозначают собой важные части текста;
• Пользователи программ экранного доступа могут получить список всех заголовков документа и быстро перейти к тому месту в тексте, где находится нужный заголовок, что значительно повышает эффективность работы с документом.
Маркирование заголовков различных уровней в документе тегированного PDF осуществляется с помощью соответствующих структурных элементов: H1, H2, H3, и т.п.
Пометки полей интерактивных форм
Пользователи вспомогательных технологий должны иметь возможность идентифицировать интерактивные формы и конкретные поля, а также понимать выполняемые ими функции. Они должны понять с каким видом формы взаимодействуют, ввести необходимые данные либо сделать определённый выбор, запустить процесс и получить результат, как это делают пользователи без ограничений жизнедеятельности.
Правильно расположенные, информативные пометки (надписи и подписи) призваны обеспечить эту возможность.
Интерактивная форма и отдельные поля, как правило, имеют поясняющий текст, а также надписи и подписи, содержащие краткие комментарии, инструкции и примеры корректного заполнения, призванные помочь пользователям понять, какая информация запрошена и каким образом вводить данные в то или иное поле. Если эти пометки и подсказки программно не связаны с соответствующими полями формы, то вспомогательные технологии не смогут сообщить незрячему пользователю эту важную информацию, что существенно затруднит или сделает невозможным самостоятельное заполнение формы.
Запись Tu (Tu entry) в словаре поля формы программно связывает пометку (надпись или подпись) с этим полем формы (см. пример 3 ниже таблицы 220 в PDF 1.7 (ISO 32000-1).
В отдельных случаях эвристическая система программы экранного доступа может обнаружить надпись или подпись, относящуюся к конкретному полю, даже если она программно не связана с интерактивной формой, но расположена стандартным образом.
Ниже приведены примеры стандартного расположения пометок (надписей и подписей):
• Поля для ввода текста, включая ввод даты и времени, пароля, и т.п. — Пометка располагается слева от поля. Если расположение слева невозможно, то её помещают сразу выше поля.
• Флажок (check box) — пометка располагается справа от флажка.
• Радиокнопки — пометка размещается справа от радиокнопки. Для группы радиокнопок создаётся заголовок в форме статического текста, который располагается слева или выше группы радиокнопок.
• Комбинированный список (combo box) — пометки располагаются слева от комбинированного списка или сразу над ним.
• Список (list box) — пометка списка располагается сразу над этим списком.
• Пометка (подпись) кнопки располагается внутри кнопки. Необходимо, чтобы такая пометка была достаточно информативна.
Правильно размеченные ссылки
Если ссылка размечена правильно, то пользователи с нарушениями зрения при помощи вспомогательных технологий могут быстро обнаружить её, используя клавиатурные сочетания клавиш и перейти по ней, зная при этом, с какого рода контентом она связана, какова так называемая цель данной ссылки.
Ссылки в документе формата тегированного PDF представлены тегом Link и объектами в в его поддереве: адресом ссылки (URL или другой путь) и текстовым именем ссылки, которое должно отображать её цель.
Эти объекты программно распознаются вспомогательными технологиями, что и предоставляет необходимые возможности соответствующим категориям пользователей.
Характеристики элементов управления формы должны быть доступны для вспомогательных технологий
Для пользователей с ограничениями жизнедеятельности необходимо, чтобы из документа PDF вспомогательные технологии (программы экранного доступа, увеличения экрана, интерфейсы распознавания речи) могли получать сведения об имени элемента управления формы, его предназначении (роли), текущем состоянии и значении, чтобы сделать эту важную информацию доступной. Пользователь должен знать: возможно ли редактирование текстового поля или оно предназначено только для чтения, какая радиокнопка выбрана, доступна ли кнопка и какую функцию она выполняет, и тому подобное.
К элементам управления формы относятся: текстовое поле, флажок (check box), группа радиокнопок, комбинированный список (combo box), список (list box) и кнопка.
То, каким именно образом программная информация об имени, роли, состоянии и значении каждого из этих элементов устанавливаются для средств управления формой, определяется в спецификации PDF (раздел 12.7.4 (Field Types) PDF 1.7 (ISO 32000-1).
Управление интерактивными элементами при помощи клавиатуры
Доступные с использованием клавиатуры средства управления интерактивной формой дают возможность слепым и слабовидящим пользователям с помощью вспомогательных технологий взаимодействовать с документом в формате PDF, вводя данные или осуществляя выбор для их последующей автоматической обработки.
Доступные для клавиатурного интерфейса средства управления элементами форм в документе PDF описаны в разделе 12.7 (Interactive Forms) PDF 1.7 (ISO 32000-1) и в Adobe XML Forms Architecture (XFA).
Текстовые описания ссылок
Иногда целесообразно использовать альтернативное имя для ссылки, отличающееся от того, что изображено на экране в основном тексте. Например, если в тексте документа вписано имя ссылки, из которого не вполне очевидна её цель.
Это реализуется с применением записи Alt (Alt entry) для тега Link. Тогда программа экранного доступа будет игнорировать имя ссылки, отображенное на экране как видимый текст, и вместо этого сообщит незрячему пользователю альтернативное имя, содержащееся в записи Alt.
Предоставление информации о верхних и нижних колонтитулах
В верхних и нижних колонтитулах документа может содержаться такая информация, как Автор и название текущей статьи журнала, номер текущей главы, номер текущей страницы, и т.п. Эта информация может быть полезна всем, но особенно это касается пользователей, имеющих нарушения зрения, памяти, интеллектуальной сферы.
Если информация о содержимом верхних и нижних колонтитулов передаётся программе экранного доступа или программе увеличения экрана, то слепые и слабовидящие пользователи могут быстро перейти к нему при помощи клавиатурной навигации или клавиатурных команд.
Кнопки для подтверждения изменений в интерактивных формах
Изменение информации, представленной в документе, не должно происходить спонтанно или неожиданно для пользователя. Особенно это касается пользователей с нарушениями зрения, использующих программы экранного доступа или увеличения экрана. В связи с тем, что они не могут охватить сразу всю информацию, представленную на экране, факт происходящих изменений может ускользнуть из их внимания.
Чтобы этого не случилось, любые изменения контекста должны происходить по команде пользователя.
Для этого применяется механизм подтверждения ввода данных в форму посредством кнопки Submit, которая должна программно определяться вспомогательными технологиями. Активирование этой кнопки генерирует запрос http, который отправляет данные, введённые в форму.
Указание языка документа
При помощи записи Lang (Lang entry) в каталоге документа PDF можно программно установить язык основного текста документа, а также дополнительно язык какого-либо его фрагмента .
Как вспомогательные технологии, так и обычные пользовательские приложения могут представить текст более точно, если его язык ими идентифицирован. Программы экранного доступа смогут в этом случае использовать необходимые языковые параметры для синтезатора речи и правильные Брайлевские таблицы, визуальные браузеры будут правильно отображать символы и отрабатывать скрипты, а медиапроигрыватели покажут корректные субтитры. Всё это значительно повышает эффект от использования вспомогательных технологий и качество работы с документом в целом.
Правильная нумерация страниц
Цель этого метода состоит в том, чтобы помочь пользователю верно определять текущую страницу в документе и быстро перемещаться между страницами.
Непротиворечивость в нумерации страниц очень важна для пользователей с ментальными нарушениями, поможет сделать навигацию по документу более предсказуемой и понятной.
Описанный ниже способ пригоден для использования совместно со вспомогательными технологиями и обеспечивает полноценное их применение.
Как пример, Adobe Acrobat Pro и Adobe Acrobat reader выводят информацию о номерах страниц в панели инструментов Page Navigation.
Формат нумерации страниц определяется записью /PageLabels (/PageLabels entry) в каталоге документа PDF. Если формат нумерации страниц не был задан таким образом, схема нумерации страниц не будет отражена на панели инструментов Page Navigation. Она выводит на экран номер страницы в текстовом поле, которое пользователь может редактировать для перемещения к определённой странице. Кроме того, он может перемещаться на соседние страницы, используя клавиши со стрелками. Панель Page Navigation также выводит информацию об относительном текущем расположении в документе, например, страница 4 из 30.
Быстро переместить фокус к этой панели, чтобы перейти на нужную страницу, можно с помощью сочетания клавиш Ctrl+Shift+N в операционной системе Microsoft Windows и Cmd+Shift+N в MacOS X.
Заголовок документа
Информация о Названии и авторе документа может быть размещена в верхней части окна, содержащего документ PDF: в строке заголовка окна или строке имени вкладки. Это позволяет всегда понимать, какой именно документ открыт в конкретном окне или вкладке. Данная информация доступна для всех вспомогательных технологий и может быть легко получена слепыми и слабовидящими пользователями с помощью клавиатурной навигации или клавиатурных команд.
В тегированном PDF это реализуется с помощью записи /Title (/Title entry) в словаре информации о документе и установки флага DisplayDocTitle в положение «True» в словаре предпочтений просмотрщика документа.
Правильная реализация списков в документе
Списком в документе называют совокупность блоков информации, связанных каким-нибудь общим признаком. Бывает так, что списки оформляют чисто визуально, без применения соответствующей разметки, что в некоторых случаях затрудняет работу с документом для пользователей вспомогательных технологий. Например, программы экранного доступа позволяют слепым пользователям быстро обнаруживать правильно размеченные списки, перемещаться между списками и их элементами при помощи клавиатурных команд.
Спецификация PDF определяет структуру списка в разделе 14.8.4.3.3 (List Elements).
Ниже приведены элементы структуры списка в документах PDF:
• Тег L — тег списка, содержащий в себе один или несколько тегов LI.
• Тег LI (list item) — это тег элемента списка, который может содержать в себе теги Lbl и LBody.
• Тег Lbl (label) — это тег метки элемента списка, содержащий в себе номер элемента списка или его маркер.
• Тег LBody содержит текст или другое содержимое элемента списка, которым может быть и вложенный список, обозначенный тегом L.
Полезные ресурсы
1. Adobe Accessibility Resource Center
2. Adobe Acrobat Accessibility Training Resources
3. Accessing PDF Documents with Assistive Technology
4. PDF Specification Archives
5. PDF 1.7 Reference: ISO approved copy of the ISO 32000-1
6. PDF Accessibility API Reference — How AT developers can use Acrobat MSAA and IPDDom interfaces to provide access to PDF content
7. PDF/UA (ISO 14289-1:2012)
8. PDF/UA Conformance Testing Model: The Matterhorn Protocol
9. WebAIM PDF Accessibility
10. Create accessible PDFs using Microsoft Office 10
11. PDF Techniques for WCAG 2.0.
Ссылка на официальный источник

Ресурсы от apple для разработчиков по реализации специальных возможностей.

Доступность на macOS
macOS включает в себя широкий спектр функций и вспомогательных технологий, таких как увеличение экрана и курсора, полное считыватель экрана, визуальные флэш-оповещения, закрытая поддержка субтитров и многое другое. Воспользуйтесь этими функциями, чтобы сделать ваши приложения доступными для пользователей с особыми потребностями.
Обеспечение доступного приложения
Поддержка вспомогательных приложений встроена со стандартными управлениями и подклассами. API доступности определяют, как приложения macOS могут сделать свой пользовательский интерфейс доступным для внешнего вспомогательных приложений или служб.
Мы настоятельно рекомендуем вам поддерживать эти API во всех ваших приложениях, чтобы ваши приложения были совместимы с функциями, встроенными в macOS, такими как VoiceOver, а также другими сторонними продуктами. Рамки Xcode IDE и Cocoa позволяют легко добавлять теги доступности, такие как описания. Например, панели инспектора позволяет ввести описание для любого управления в пользовательском интерфейсе, и это описание будет синтезировано в речь, когда VoiceOver включен.
Как это работает
Вспомогательные приложения в macOS взаимодействуют с объектами доступности в вашем приложении, чтобы позволить людям с ограниченными возможностями управлять пользовательским интерфейсом нетрадиционными способами. Например, пользователь VoiceOver полагается в первую очередь на клавиатуру или трекпад для управления, а также на синтез речи и брайля для обратной связи. Пользователи с низким зрением могут установить встроенный зум, серый и белый-на-черный режим отображения вариантов в macOS, чтобы адаптировать экранный опыт к их конкретным потребностям. Те, кто глухой или слабослышный может установить звуковые сигналы, чтобы автоматически мигать экраном, а не. Пользователи с физическими и двигательным недостатками будут полагаться на рабочие процессы AppleScript и Automator для упрощения сложных задач и могут воспользоваться предпочтениями клавиатуры и мыши, чтобы упростить их управление и использование. Важно, чтобы ваше приложение работало так, как предназначено для тех, кто полагается на эти вспомогательные функции macOS.
Благодаря API доступности, которые поддерживают такие технологии, как VoiceOver, Switch Control, Увеличить, Закрытые субтитры, и аудио описания, macOS предоставляет чрезвычайную возможность доставить превосходный пользовательский опыт для каждого клиента, в том числе с особыми потребностями.
Доступность на iOS
Со встроенными функциями доступности, API доступности и инструментами разработчиков, iOS предоставляет необычайную возможность предоставить превосходный мобильный опыт каждому клиенту, в том числе с особыми потребностями. Наградами функции включают VoiceOver — революционный считыватель экрана для слепых и пользователей с низким зрением, переключатель управления, воспроизведение закрытых субтитры или аудио описанное видео, управляемый доступ, текст к речи, и многое другое.
Подпись и аудио описания
iOS позволяет пользователям настроить субтитры и аудио описания во время воспроизведения видео. Используйте AVFoundation со встроенной поддержкой субтитров и аудио описаний во время воспроизведения мультимедиа в приложениях.
Настройка отображения
iOS предлагает широкий спектр функций для настройки дисплея, включая Bold Text, High Contrast Cursors, Reduce Transparency, Dark Mode и Reduce Motion. Используйте API-интерфейсы UIAccessibility для обнаружения того, когда эти настройки включены, чтобы ваше приложение вело себя правильно.
Речи
Устройства iOS могут читать выбранный текст из приложения вслух на более чем 30 языках, а также регулировать диалект голоса и скорость речи. Класс AVSpeechSynthesizer производит синтезированную речь из текста на устройстве iOS и предоставляет методы контроля или мониторинга ходов текущей речи.
Voiceover
VoiceOver является считывателем экрана, который взаимодействует с объектами в ваших приложениях, так что пользователи могут управлять интерфейсом, даже если они не могут видеть его. Убедитесь, что элементы пользовательского интерфейса в ваших приложениях доступны и полезны.
Управляемый доступ
Управляемый доступ помогает людям с аутизмом или другим вниманием и сенсорными проблемами сосредоточиться на поставленной задаче. Родитель, учитель или терапевт может ограничить устройство iOS, чтобы остаться в одном приложении, отключив кнопку «Домой», и даже ограничить ввод касания в определенных областях экрана. Внедрение протокола Guided Access в приложениях позволяет указать, какие части ваших приложений функционируют в зависимости от необходимости пользователя. Воспитатели смогут легко контролировать доступ к чувствительным областям, таким как Настройки или Помощь, что может сделать его трудным для студентов, чтобы оставаться сосредоточенным.
Доступность для разработчиков
Устройства Apple являются стандартными с отмеченными наградами функциями доступности, которые позволяют людям испытать все, что могут предложить Mac, iPhone, iPad, Apple Watch и Apple TV. А с api-доступом на всех платформах Apple, вы можете сделать ваши приложения легко функциональными для широкого круга пользователей.
Macos
macOS включает в себя широкий спектр функций и вспомогательных технологий, которые включают увеличение экрана и курсора, полное считыватель экрана, визуальные флэш-оповещения, замкнутую поддержку субтитров и многое другое.
Подробнее
Ios
Со встроенными функциями доступности, API accessibility, а также множеством инструментов и утилит разработчиков, iOS предоставляет чрезвычайную возможность предоставить превосходный мобильный опыт каждому клиенту, в том числе с особыми потребностями.
Официальный сайтРесурсы от apple для разработчиков по реализации специальных возможностей.

Ресурсы от google для разработчиков по реализации специальных возможностей.

Реализация специальных возможностей
Специалисты Google убеждены, что современные продукты и приложения должны быть адаптированы для пользователей с инвалидностью, и готовы помочь в этом разработчикам и издателям.
1 млрд людей с инвалидностью
Создавая приложения, удобные для таких пользователей, вы не только поможете почти миллиарду людей во всем мире, но и откроете дополнительные возможности для всех остальных.
Continue reading

Специальные возможности Yandex как сделать сайт доступным для людей с инвалидностью.

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

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

Крупный текст и большие картинки для людей с ослабленным зрением облегчают понимание информации.

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

Крупные ссылки легче нажать людям с нарушениями моторной функции опорно-двигательной системы.

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

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

Просто написанные тексты с поясняющими графиками и анимацией делают информацию доступнее для понимания людьми с дислексией и трудностями в обучении.
Возможности операционных систем
Специальные настройки браузера
Программы экранного доступа позволяют людям с ослабленным зрением считывать информацию с экрана компьютера с помощью тактильного или речевого управления.
Программа
Операционная система
Браузер
JAWS
MS Windows
Yandex версии 14.12 и выше
Internet Explorer
Mozilla Firefox
Google Chrome
NVDA
MS Windows
Yandex версии 14.12 и выше
Internet Explorer
Mozilla Firefox
Google Chrome
VoiceOver
macOS и iOS (встроена)
как запустить программу
Safari
TalkBack
Android
Mozilla Firefox
Google Chrome
Orca
Linux
Mozilla Firefox
Горячие клавиши
about hotkeys
Горячие клавиши — это сочетания клавиш на клавиатуре компьютера, с помощью которых можно выполнять действия в программе без помощи компьютерной мыши.

Windows
macOS
Развернуть окно во весь экран
F11
Shift + ⌘ + F
Выйти из полноэкранного режима
F11
Shift + ⌘ + F
Увеличить масштаб страницы
Ctrl + +
Ctrl + ⌘ + +
Уменьшить масштаб страницы
Ctrl + —
Ctrl + ⌘ + —
Установить для страницы масштаб 100%
Ctrl + 0
Ctrl + ⌘ + 0
Перейти в поле ввода поискового запроса
Ctrl + ↑

Перейти на следующую страницу
Ctrl + →

Перейти на предыдущую страницу
Ctrl + ←

Выйти, «разлогиниться»
accesskey + x

Перейти к соответствующему результату поиска
accesskey + N
где N — это цифра от 1 до 9

Примечание. Атрибут accesskey позволяет активировать ссылку с помощью сочетания клавиш. Например, для accesskey = «s» работают следующие сочетания:
Yandex
Alt + s
Internet Explorer
Alt + s
Google Chrome
Alt + s
Mozilla Firefox
Shift + Alt + s
Opera
Shift + Esc, затем s
Safari
Shift + Alt + s
Клавиатурные сочетания в программах экранного доступа:

JAWS

NVDA

Window-Eyes

VoiceOver

Orca
Узнайте больше
•Горячие клавиши
Размер страницы и шрифта
about zoom
Размер страницы и шрифта в браузере можно сделать крупнее, чтобы слабовидящие люди могли читать с экрана.

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

Изменить размер шрифта в Яндекс.Браузере:
1.
В правом верхнем углу нажмите  → Настройки.
2.
Нажмите ссылку Показать дополнительные настройки внизу страницы.
3.
В блоке Веб-содержимое воспользуйтесь выпадающим списком Размер шрифта.
Информацию о том, как изменить размер страницы или шрифта в других браузерах, смотрите в разделе Помощи.
Возможности операционных систем
about os
Операционные системы нового поколения предлагают встроенные вспомогательные технологии и решения: управление компьютером с клавиатуры, звуковые эффекты для визуальных оповещений, регулирование контрастности экрана и т. д.

Windows (на английском языке)

macOS

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

Специальные возможности в Яндекс.Браузере

Internet Explorer (на английском языке)

Google Chrome

Mozilla Firefox.
Официальный сайт Специальные возможности Yandex как сделать сайт доступным для людей с инвалидностью.