Автор: Леонтьев Вадим Вячеславович

Рубрика: Информатика

Опубликовано в Молодой учёный №13 (117) июль-1 2016 г.

Дата публикации: 01.07.2016

Статья просмотрена: 100 раз

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

Леонтьев В. В. Разработка программного модуля для обеспечения комфортного доступа к информации // Молодой ученый. — 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/
Основные термины (генерируются автоматически): обеспечения комфортного доступа, расширения браузера, основные положения, слабовидящих людей, графических элементов, расширения браузера googlechrome, минимальное значение, архитектура расширения браузера, браузера google chrome, обеспечению доступности веб-контента, исходному изображению, слабовидящим людям комфортнее, нормативных документов, определен список основных, список основных фильтров, Фильтр насыщенности цвета, базе расширения браузера, реализация расширения браузера, оттенки серого, Архитектура расширения браузера.

Обсуждение

Социальные комментарии Cackle
Задать вопрос