Библиографическое описание:

Леонтьев В. В. Разработка программного модуля для обеспечения комфортного доступа к информации // Молодой ученый. — 2016. — №13. — С. 334-336.



В статье рассмотрена разработка программного модуля для обеспечения комфортного доступа к информации, ориентированного на слабовидящих людей. Выделены основные положения из нормативных документов, содержащих рекомендации по представлению информации. Описана архитектура расширения браузера 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-элементов; определен список основных фильтров, применение которых позволит слабовидящим людям комфортнее воспринимать информацию с графических элементов. В завершении работы был разработан программный модуль для обеспечения комфортного доступа к информации, ориентированного на слабовидящих людей.

Литература:

  1. Google Chrome extension [Электронныйресурс]. — Overview — URL: https://developer.chrome.com/extensions/overview/
  2. W3C [Электронныйресурс]. — HTML 4.0.1 Specification — URL: http://www.w3.org/TR/html401/
  3. W3C [Электронный ресурс]. — HTML 5 — URL: http://www.w3.org/TR/html5/
  4. W3C [Электронныйресурс]. — Web Content Accessibility Guidelines — URL: http://www.w3.org/TR/2008/REC-WCAG20–20081211/
  5. ВОЗ [Электронный ресурс]. — Нарушения зрения и слепота — URL: http://who.int/mediacentre/factsheets/fs282/ru/
  6. МедНовости [Электронный ресурс]. — Инвалидность по зрению — URL: http://medportal.ru/mednovosti/news/2009/10/07/blind/
  7. Интернет-ресурсы. Требования доступности для инвалидов по зрению: ГОСТ Р 52872–2012. — Издание официальное. — М.: ИПК Стандартинформ, 2014;
  8. ФОМ [Электронный ресурс]. — Интернет в России — URL: http://fom.ru/SMI-i-internet/12275/
  9. 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
  10. MDN [Электронный ресурс]. — CSSfilters — URL: https://developer.mozilla.org/en-US/docs/Web/CSS/filter/

Обсуждение

Социальные комментарии Cackle