В статье рассмотрена разработка программного модуля для обеспечения комфортного доступа к информации, ориентированного на слабовидящих людей. Выделены основные положения из нормативных документов, содержащих рекомендации по представлению информации. Описана архитектура расширения браузера Google Chrome и определен список основных фильтров, применение которых позволит слабовидящим людям комфортнее воспринимать информацию с графических элементов.
Ключевые слова: информация, информационные потребности, нарушение зрения, слабовидящие люди, браузер
Наличие оперативного доступа к информации, даже для людей, обладающих нарушениями зрения — это основа для удовлетворения информационных потребностей в современном мире. Но для них это сопряжено с некоторыми трудностями, возникает ряд проблем с навигацией и восприятием информации, вследствие ее неадаптированного визуального представления. С учетом приведенных ниже реалий проблема встает особенно остро.
По данным Всемирной организации здравоохранения, во всем мире насчитывается около 246 миллионов людей с плохим зрением [5]. В России это 218 тыс. человек, 22 % которых составляет молодежь трудоспособного возраста [6].
По данным, актуальным на начало 2015 года, доля интернет-аудитории, выходящей в сеть хотя бы раз в сутки, составляет 61,5 млн человек, показатель ее годового прироста равняется 6 % [8].
Есть различные методы решения проблемы, например адаптация существующей или создание отдельной специализированной версии для веб-ресурса. Так поступила компания Google со своими продуктами Google Drive и the Docs editors [9], но такой подход требует больших финансовых затрат.
Целью данной работы является повышение порога читаемости текста и восприятия графических элементов на веб-страницах.
Существует два основных документа с рекомендациями представления информации на веб-страницах, следуя которым разработчики могут сделать работу в сети в разы проще для слабовидящих людей.
Руководство по обеспечению доступности веб-контента Web Content Accessibility Guidelines 2.0 [4].
ГОСТ Р 52872–2007 «Интернет-ресурсы. Требования доступности для инвалидов по зрению» [7].
Для достижения поставленной цели требуется решить следующие задачи:
выделить основные положения из вышеприведенного списка документов с рекомендациями для разработчиков;
описать архитектуру расширений Chrome;
разобрать способы определения семантической значимости DOM-элементов;
рассмотреть способы применения различных фильтров к графическим элементам.
В завершении работы был разработан программный модуль для обеспечения комфортного доступа к информации на базе расширения браузера Google Chrome, ориентированного на слабовидящих людей.
Опираясь на Руководство по обеспечению доступности веб-контента WCAG 2.0 и на ГОСТ Р 52872–2007, выделим основные положения.
Воспринимаемость.
Контраст — не менее 4.5:1.
Размер шрифта может быть увеличен в 2 и более раз, при сохранении функциональности и без появления горизонтальной прокрутки.
Возможность выбора цвета текста и фона.
Ширина текстового блока не должна превышать 80 знаков.
Выравнивание текста по ширине блока или окна не допускается.
Междустрочный интервал полуторный или выше, расстояние между параграфами в полтора раза больше, чем интервал между строками.
Удобство.
Все функции должны быть доступны при помощи клавиатуры.
Навигация, поиск и определение текущего положения пользователя на страницах сайта должны быть простыми и удобными.
При управлении с помощью клавиатуры, текущий фокус должен быть видимым.
Совместимость.
Сайт должен быть совместим с различными платформами.
К основным элементам архитектуры расширения относят [1]:
фоновую страницу (background page). Это скрытая страница, содержащая основную логику расширения;
файл манифеста (manifest.json), в котором содержится информация о расширении (его название, описание, версия, разрешения, используемые файлы и прочее);
страницы пользовательского интерфейса (user interface);
документы с JavaScript-кодом, выполняемые в контексте веб-страницы (content script), применяющиеся, если расширению нужно взаимодействовать с загружаемыми пользователем страницами.
В основе веб страницы, отображаемой в браузере, лежит html-разметка, по которой браузер строит DOM-модель (от англ. Document Object Model — «объектная модель документа»). Для поиска, выделения и модификации тегов чаще всего используют язык JavaScript в связке с популярной библиотекой jQuery.
Пример поиска навигации на сайте с использованием нативного JavaScript:
var nav = document.getElementsByTagName('nav') [0];
Производя последовательный обход элементов, мы сталкиваемся с проблемой, связанной с определением семантической значимости найденных тегов. Для стандарта html ниже пятого она стоит особенно остро. В HTML 4.01 Specification [6] содержится описание элементов, но этого недостаточно. Чтобы дополнить свои знания о найденном элементе, необходимо также обращать внимание на атрибуты class и id, применяемые для взаимодействия со свойствами CSS.
Решить проблему призван новый стандарт HTML5, активно набирающий популярность. В нем введены новые теги, позволяющие правильно семантически размечать страницу.
Только точно определив семантическую значимость блока, мы можем эффективно выделить информацию, находящуюся в нем. В случае с текстом достаточно увеличить междустрочный интервал, размер шрифта и установить комфортную контрастность его цвета относительно фона. Но содержимое веб-страницы не ограничивается только текстом, на них присутствуют картинки, видео и flash-ролики.
Для изменения внешнего вида графических элементов используются фильтры. Фильтр — это некоторый алгоритм, преобразующий визуальное отображение элемента в окне браузера.
Работа фильтра состоит в математической обработке массива пикселей, включающего описания цвета и положения пикселей в изображении. Ниже будет представлено описание каждого из используемых расширением фильтров.
Фильтр инверсии цветов. Инверсия — математическая операция, результатом которой является значение, обратное исходному. В изображении фильтр инверсии меняет все цвета на противоположные. Значения допускаются в диапазоне от 0 до 100 %, где минимальное значение соответствует исходному изображению, а при 100 % все цвета будут инвертированы.
Соответствующее CSS свойство:
filter: invert(100 %);
Фильтр контрастности. Этот фильтр позволяет регулировать разницу между темными и светлыми тонами исходного изображения. Значения допускаются от 0 %, где минимальное значение соответствует полностью серому изображению, 100 % — исходному, больше 100 % будет постепенно увеличивать контрастность. Чем выше контрастность, тем больше разница между светлыми и темными тонами.
Соответствующее CSS свойство:
filter: contrast(200 %);
Фильтр оттенков серого. Превращает цвета в оттенки серого. Значения допускаются в диапазоне от 0 до 100 %, где минимальное значение соответствует исходному изображению, а при 100 % все цвета будут преобразованы в оттенки серого.
Соответствующее CSS свойство:
filter: grayscale(100 %);
Фильтр насыщенности цвета. Фильтр позволяет изменять интенсивность тонов. Насыщенные цвета кажутся более глубокими, яркими, в то время как ненасыщенные приближены к серому. Значения допускаются от 0 %, где минимальное значение соответствует ненасыщенному изображению, 100 % — исходному, больше 100 % будет постепенно увеличивать насыщенность.
Соответствующее CSS свойство:
filter: saturate(200 %);
Архитектура расширения браузера GoogleChrome предоставляет разработчику возможность реализовать все выделенные нами из нормативных документов WCAG 2.0 и ГОСТ Р 52872–2007 положения. Отсюда следует вывод, что задуманная реализация расширения браузера GoogleChrome является оптимальным решением выдвинутой проблемы.
В результате данной работы были выделены основные положения из нормативных документов, содержащих рекомендации по представлению информации, адаптированной для инвалидов по зрению; рассмотрена архитектура расширения браузера GoogleChrome; разобраны способы идентификации DOM-элементов; определен список основных фильтров, применение которых позволит слабовидящим людям комфортнее воспринимать информацию с графических элементов. В завершении работы был разработан программный модуль для обеспечения комфортного доступа к информации, ориентированного на слабовидящих людей.
Литература:
- Google Chrome extension [Электронныйресурс]. — Overview — URL: https://developer.chrome.com/extensions/overview/
- W3C [Электронныйресурс]. — HTML 4.0.1 Specification — URL: http://www.w3.org/TR/html401/
- W3C [Электронный ресурс]. — HTML 5 — URL: http://www.w3.org/TR/html5/
- W3C [Электронныйресурс]. — Web Content Accessibility Guidelines — URL: http://www.w3.org/TR/2008/REC-WCAG20–20081211/
- ВОЗ [Электронный ресурс]. — Нарушения зрения и слепота — URL: http://who.int/mediacentre/factsheets/fs282/ru/
- МедНовости [Электронный ресурс]. — Инвалидность по зрению — URL: http://medportal.ru/mednovosti/news/2009/10/07/blind/
- Интернет-ресурсы. Требования доступности для инвалидов по зрению: ГОСТ Р 52872–2012. — Издание официальное. — М.: ИПК Стандартинформ, 2014;
- ФОМ [Электронный ресурс]. — Интернет в России — URL: http://fom.ru/SMI-i-internet/12275/
- Google for Education [Электронныйресурс]. — Google Drive & the Docs editors: designed with everyone in mind — URL: http://googleforeducation.blogspot.ru/2014/09/google-drive-docs-editors-designed-with.html
- MDN [Электронный ресурс]. — CSSfilters — URL: https://developer.mozilla.org/en-US/docs/Web/CSS/filter/
