Разработка программного модуля для обеспечения комфортного доступа к информации | Статья в журнале «Молодой ученый»

Автор:

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

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

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

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

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

Леонтьев В. В. Разработка программного модуля для обеспечения комфортного доступа к информации // Молодой ученый. — 2016. — №13. — С. 334-336. — URL https://moluch.ru/archive/117/32213/ (дата обращения: 18.07.2018).



В статье рассмотрена разработка программного модуля для обеспечения комфортного доступа к информации, ориентированного на слабовидящих людей. Выделены основные положения из нормативных документов, содержащих рекомендации по представлению информации. Описана архитектура расширения браузера 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/
Основные термины (генерируются автоматически): CSS, минимальное значение, WCAG, исходное изображение, информация, ГОСТ Р, архитектура расширения браузера, программный модуль, междустрочный интервал, HTML.


Ключевые слова

информация, информационные потребности, нарушение зрения, слабовидящие люди, браузер

Похожие статьи

Использование средств библиотеки SFML для написания игровых...

Полезная информация. Спецвыпуски. Как опубликовать статью.

Библиотека SFML позволяет разработать игровой проект, организовать вывод графических изображений и звуков, при этом уделить

В состав SFML входит пять модулей [1]: system, window, graphics, audio и network.

Вычисление расстояния до наблюдаемого объекта по...

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

Под ошибкой определения диспаратности будем понимать модуль разности значения диспаратностей, соответствующего...

Методика исследования вредоносных программ с использованием...

Данный модуль представляет собой http сервер и предоставляет возможность загрузки файлов по данному протоколу по сети.

Далее, запускается на машине с REMnux утилита ProcDOT и в нее загружается получившийся файл с расширением CSV.

Объектно-ориентированные расширения в программировании...

Полезная информация.

Расширения стандарта должны подчиняться следующим требованиям

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

Разработка комплексного проекта веб-портала «Нейротекст» для...

Её осуществление берёт на себя программный модуль статистического анализа данных, работающий в тесной интеграции с

Данное программное решение построено на базе CMS 1С-Битрикс и написано с использованием следующих языков: HTML, CSS, JavaScript, PHP.

Разработка программного средства управления системой защиты...

Рис. 3. Архитектура программного средства. Модуль сбора информации — получает информацию при определенных событиях в ОС.

2. Если количество событий за установленный интервал времени превышает допустимое значение, то программа производит...

Разработка информационного обеспечения автоматизированной...

Ядром системы является база данных, содержащая всю информацию для оперирования в различных модулях системы.

Каналы приема изображений и передачи описания объекта на аппаратном и программном уровнях не подлежат защите.

Оптимизация взаимодействия web-приложения с базой данных...

Механизм интеграции программных компонентов ИИС - обмен документами XML.

При прохождении по конвейеру происходит преобразование XML-данных от исходной формы к требуемой.

Теги Request предоставляют информацию обо всех аспектах текущего запроса...

Система распознавания интернет угроз по журналам веб-сервисов

Для получения этой информации необходимо произвести анализ Log-файла, сгенерированного нашим сервером.

- Console + html отчёт.

В дальнейшем планируется расширение функционала системой оповещений и автономного принятия решения о блокировке доступа...

Использование средств библиотеки SFML для написания игровых...

Полезная информация. Спецвыпуски. Как опубликовать статью.

Библиотека SFML позволяет разработать игровой проект, организовать вывод графических изображений и звуков, при этом уделить

В состав SFML входит пять модулей [1]: system, window, graphics, audio и network.

Вычисление расстояния до наблюдаемого объекта по...

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

Под ошибкой определения диспаратности будем понимать модуль разности значения диспаратностей, соответствующего...

Методика исследования вредоносных программ с использованием...

Данный модуль представляет собой http сервер и предоставляет возможность загрузки файлов по данному протоколу по сети.

Далее, запускается на машине с REMnux утилита ProcDOT и в нее загружается получившийся файл с расширением CSV.

Объектно-ориентированные расширения в программировании...

Полезная информация.

Расширения стандарта должны подчиняться следующим требованиям

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

Разработка комплексного проекта веб-портала «Нейротекст» для...

Её осуществление берёт на себя программный модуль статистического анализа данных, работающий в тесной интеграции с

Данное программное решение построено на базе CMS 1С-Битрикс и написано с использованием следующих языков: HTML, CSS, JavaScript, PHP.

Разработка программного средства управления системой защиты...

Рис. 3. Архитектура программного средства. Модуль сбора информации — получает информацию при определенных событиях в ОС.

2. Если количество событий за установленный интервал времени превышает допустимое значение, то программа производит...

Разработка информационного обеспечения автоматизированной...

Ядром системы является база данных, содержащая всю информацию для оперирования в различных модулях системы.

Каналы приема изображений и передачи описания объекта на аппаратном и программном уровнях не подлежат защите.

Оптимизация взаимодействия web-приложения с базой данных...

Механизм интеграции программных компонентов ИИС - обмен документами XML.

При прохождении по конвейеру происходит преобразование XML-данных от исходной формы к требуемой.

Теги Request предоставляют информацию обо всех аспектах текущего запроса...

Система распознавания интернет угроз по журналам веб-сервисов

Для получения этой информации необходимо произвести анализ Log-файла, сгенерированного нашим сервером.

- Console + html отчёт.

В дальнейшем планируется расширение функционала системой оповещений и автономного принятия решения о блокировке доступа...

Обсуждение

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

Похожие статьи

Использование средств библиотеки SFML для написания игровых...

Полезная информация. Спецвыпуски. Как опубликовать статью.

Библиотека SFML позволяет разработать игровой проект, организовать вывод графических изображений и звуков, при этом уделить

В состав SFML входит пять модулей [1]: system, window, graphics, audio и network.

Вычисление расстояния до наблюдаемого объекта по...

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

Под ошибкой определения диспаратности будем понимать модуль разности значения диспаратностей, соответствующего...

Методика исследования вредоносных программ с использованием...

Данный модуль представляет собой http сервер и предоставляет возможность загрузки файлов по данному протоколу по сети.

Далее, запускается на машине с REMnux утилита ProcDOT и в нее загружается получившийся файл с расширением CSV.

Объектно-ориентированные расширения в программировании...

Полезная информация.

Расширения стандарта должны подчиняться следующим требованиям

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

Разработка комплексного проекта веб-портала «Нейротекст» для...

Её осуществление берёт на себя программный модуль статистического анализа данных, работающий в тесной интеграции с

Данное программное решение построено на базе CMS 1С-Битрикс и написано с использованием следующих языков: HTML, CSS, JavaScript, PHP.

Разработка программного средства управления системой защиты...

Рис. 3. Архитектура программного средства. Модуль сбора информации — получает информацию при определенных событиях в ОС.

2. Если количество событий за установленный интервал времени превышает допустимое значение, то программа производит...

Разработка информационного обеспечения автоматизированной...

Ядром системы является база данных, содержащая всю информацию для оперирования в различных модулях системы.

Каналы приема изображений и передачи описания объекта на аппаратном и программном уровнях не подлежат защите.

Оптимизация взаимодействия web-приложения с базой данных...

Механизм интеграции программных компонентов ИИС - обмен документами XML.

При прохождении по конвейеру происходит преобразование XML-данных от исходной формы к требуемой.

Теги Request предоставляют информацию обо всех аспектах текущего запроса...

Система распознавания интернет угроз по журналам веб-сервисов

Для получения этой информации необходимо произвести анализ Log-файла, сгенерированного нашим сервером.

- Console + html отчёт.

В дальнейшем планируется расширение функционала системой оповещений и автономного принятия решения о блокировке доступа...

Использование средств библиотеки SFML для написания игровых...

Полезная информация. Спецвыпуски. Как опубликовать статью.

Библиотека SFML позволяет разработать игровой проект, организовать вывод графических изображений и звуков, при этом уделить

В состав SFML входит пять модулей [1]: system, window, graphics, audio и network.

Вычисление расстояния до наблюдаемого объекта по...

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

Под ошибкой определения диспаратности будем понимать модуль разности значения диспаратностей, соответствующего...

Методика исследования вредоносных программ с использованием...

Данный модуль представляет собой http сервер и предоставляет возможность загрузки файлов по данному протоколу по сети.

Далее, запускается на машине с REMnux утилита ProcDOT и в нее загружается получившийся файл с расширением CSV.

Объектно-ориентированные расширения в программировании...

Полезная информация.

Расширения стандарта должны подчиняться следующим требованиям

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

Разработка комплексного проекта веб-портала «Нейротекст» для...

Её осуществление берёт на себя программный модуль статистического анализа данных, работающий в тесной интеграции с

Данное программное решение построено на базе CMS 1С-Битрикс и написано с использованием следующих языков: HTML, CSS, JavaScript, PHP.

Разработка программного средства управления системой защиты...

Рис. 3. Архитектура программного средства. Модуль сбора информации — получает информацию при определенных событиях в ОС.

2. Если количество событий за установленный интервал времени превышает допустимое значение, то программа производит...

Разработка информационного обеспечения автоматизированной...

Ядром системы является база данных, содержащая всю информацию для оперирования в различных модулях системы.

Каналы приема изображений и передачи описания объекта на аппаратном и программном уровнях не подлежат защите.

Оптимизация взаимодействия web-приложения с базой данных...

Механизм интеграции программных компонентов ИИС - обмен документами XML.

При прохождении по конвейеру происходит преобразование XML-данных от исходной формы к требуемой.

Теги Request предоставляют информацию обо всех аспектах текущего запроса...

Система распознавания интернет угроз по журналам веб-сервисов

Для получения этой информации необходимо произвести анализ Log-файла, сгенерированного нашим сервером.

- Console + html отчёт.

В дальнейшем планируется расширение функционала системой оповещений и автономного принятия решения о блокировке доступа...

Задать вопрос