Из серии статей о новинках на сайте Государственной Думы. Предыдущие: первая, вторая и третья.
В начале декабря была запущена специальная версия сайта Госдумы для людей с нарушениями зрения. Нам хотелось бы поделиться информацией об особенностях разработки такого рода сайтов.
Адрес спецверсии: spec.duma.gov.ru
Всю разработку специальной версии можно логически разделить на 4 этапа:
По данным Всемирной организации здравоохранения, во всем мире насчитывается около
39 миллионов слепых людей и 246 миллионов с плохим зрением. [7]
Количество учтенных слепых и слабовидящих в России составляет 218 тыс. человек, из них абсолютно слепых – 103 тыс. (данные на 2009 год). Из этого количества 22% составляет молодежь трудоспособного возраста, т.е. практически каждый пятый из всех слепых и слабовидящих. [9]
Есть еще одна категория людей с нарушением зрения – дальтоники. Дальтонизм или цветовая слепота – наследственная (реже приобретённая) особенность зрения человека, заключающаяся в неспособности различать один или несколько цветов из трех основных (красный, зеленый, синий). Таких людей насчитывается от 4 до 8 процентов от общего количества населения, причем процент заболевания у слабой половины составляет не более 1% [4].
Собственно, ГОСТ этой по теме существует всего один — ГОСТ Р 52872-2007 «Интернет-ресурсы. Требования доступности для инвалидов по зрению». Его основные тезисы сводятся к следующему [8]:
Данный стандарт строится на 4 базовых принципах [6]:
Полностью слепые пользователи пользуются специальными программами, выполняющие синтез речи из текста страницы, так называемые скрин-ридеры, которые «читают» пользователю содержание веб-страницы, анализируя html-разметку и отсеивая что нужно прочитать, а что нет. Другой разновидностью такого рода программ являются дисплеи Брайля (на рисунке ниже), состоящие из программы-ридера и специального устройства, на корпусе которого есть определенное количество ячеек рельефно-точечного шрифта Брайля для подачи и получения команд от скрин-ридера на компьютере.
Пользователи с ослабленным зрением используют обычные браузеры совместно с программами, увеличивающими часть экрана, либо используют средства масштабирования самого браузера или механизмы, которые предусмотрели разработчики веб-сайта. Также такие пользователи зачастую используют так называемые текстовые браузеры, которые представляют содержание веб-сайта в виде текста.
Пользователи с цветовой слепотой (дальтонизмом) используют обычные браузеры, но с определенными цветовыми настройками системы, позволяющими переопределить стандартные цвета своими собственным, чтобы компенсировать недостающие цвета спектра. Но, зачастую, пользователи и не подозревают о том, что такие настройки могут быть применены.
Нами были изучены методы и практики, а также удачные реализации версий сайтов для людей с нарушениями зрения как мировом интернете, так и в русскоговорящей его части.
Как и политике, в нашем случае у России свой путь.
За рубежом, как правило, действует следующая схема: сайт изначально разрабатывается согласно
всем стандартам и рекомендациям, а для людей с ограниченными возможностями помещают видную ссылку «Accessibility», перейдя по которой, пользователю сообщается о стандартах совместимости, специальных программах для лучшего взаимодействия и т.п.
В такой схеме есть свои плюсы: упрощается поддержка сайта, да и в целом сайт, созданный по стандартам – это всегда хорошо как для пользователей, так и для поисковых систем.
Но, определенно, существуют и минусы такой схемы: отсутствуют явные и понятные настройки для пользователей; структура сайта не упрощается, что пользователям с нарушениями зрения затрудняет работу с ним.
В России прижилась другая схема – наряду с обычной версией сайта разрабатывается «специальная» версия для людей с ограниченными возможностями. На главной странице основного сайта размещается ссылка на «специальную» версию.
Плюсы такого подхода: пользователь может настроить представление содержимого спецверсии сайта собственноручно непосредственно на странице; в «специальной» версии сайта значительно упрощается навигация; основной контент выводится в одну колонку, что облегчает доступ к нему для пользователей с различными ограничениями по здоровью.
Есть и минусы у такого подхода: усложняется поддержка сайта, т.к. нужно сопровождать две версии сайта, хотя при правильной архитектуре сайта, этого недостатка можно избежать; появляются дополнительные затраты на разработку; бывает, что у пользователей складывается мнение о том, что «специальная» версия поддерживается во вторую очередь, и контент на такой версии может быть не всегда актуальным.
Нами был выбран второй путь в виде создания специализированной версии сайта, но при этом хочется отметить, что «основная» версия сайта Госдумы полностью соответствует стандарту W3C XHTML 1.0 Strict.
Далее некоторые технические детали реализации версии для пользователей с нарушениями зрения.
Структура страниц «основного» сайта была значительно упрощена: вспомогательные информационные блоки были убраны, а основной контент был размещен в центре рабочей области в одну колонку.
Главное меню также было упрощено: основные пункты вынесены на видные места. Т.к. меню повторяется на каждой странице, первой ссылкой на сайте сделано «перейти к основному контенту», чтобы пользователи программ скрин-ридеров могли сразу перейти к содержимому страницы, пропустив блок навигации.
Для удобства пользователей было сформировано три варианта размера шрифтов, которые можно выбрать из меню настроек. Помимо этого пользователь может масштабировать размер текста средствами браузера, все размеры текста указаны в относительных единицах (% или em).
В CSS предусмотрено 3 варианта цветовых схем сайта. Две стандартные цветовые схемы: «черным текстом по белому фону» и «белым тестом по черному фону» с максимальными уровнями контрастности, а также цветовая схема для людей с дальтонизмом: «светло-желтым текстом по темно-синему фону», которая тоже обладает большим уровнем контрастности. Кнопки управления этой функциональностью также вынесены на панель настроек.
В дальнейшем можно добавить и другие высоко-контрастные цветовые схемы, которые приведены на рисунке ниже. В таблице показаны двухцветные схемы (слева – как их видят люди с нормальным зрением, справа – как их видят люди с цветовой слепотой) [4].
В панель настроек добавлена возможность включать/отключать отображение изображений, а также функции выбора типа шрифта (с засечками или без) и интервала между парами знаков (кернинг), регулируя который можно значительно повлиять на «читабельность» текста, особенно при больших размерах шрифта.
К вышесказанному можно добавить несколько общих советов:
В начале декабря была запущена специальная версия сайта Госдумы для людей с нарушениями зрения. Нам хотелось бы поделиться информацией об особенностях разработки такого рода сайтов.
Адрес спецверсии: spec.duma.gov.ru
Всю разработку специальной версии можно логически разделить на 4 этапа:
- Анализ действующих стандартов и ГОСТ-ов;
- Анализ существующих решений;
- Обобщение проанализированных данных;
- Разработка сайта.
Немного статистики
По данным Всемирной организации здравоохранения, во всем мире насчитывается около
39 миллионов слепых людей и 246 миллионов с плохим зрением. [7]
Количество учтенных слепых и слабовидящих в России составляет 218 тыс. человек, из них абсолютно слепых – 103 тыс. (данные на 2009 год). Из этого количества 22% составляет молодежь трудоспособного возраста, т.е. практически каждый пятый из всех слепых и слабовидящих. [9]
Есть еще одна категория людей с нарушением зрения – дальтоники. Дальтонизм или цветовая слепота – наследственная (реже приобретённая) особенность зрения человека, заключающаяся в неспособности различать один или несколько цветов из трех основных (красный, зеленый, синий). Таких людей насчитывается от 4 до 8 процентов от общего количества населения, причем процент заболевания у слабой половины составляет не более 1% [4].
Анализ действующих стандартов и ГОСТ-ов
Собственно, ГОСТ этой по теме существует всего один — ГОСТ Р 52872-2007 «Интернет-ресурсы. Требования доступности для инвалидов по зрению». Его основные тезисы сводятся к следующему [8]:
- Для полноценного доступа инвалидов по зрению к интернет-ресурсам информация должна быть представлена в виде текста;
- Изображения должны сопровождаться поясняющим текстом, т.к. доступ к графическим файлам незрячему пользователю в большинстве случаев невозможен или значительно затруднен;
- Таблицы не должны иметь большую степень вложенности, т.к. доступ к информации, представленной в таблицах, осуществляется последовательно, в соответствии с ячейками таблиц;
- Одна таблица должна иметь не более 15 ячеек. Уровень вложенности одной таблицы в другую должен быть не более трех;
- Одна таблица должна иметь не более 15 ячеек. Уровень вложенности одной таблицы в другую должен быть не более трех
Данный стандарт строится на 4 базовых принципах [6]:
- Воспринимаемость. Информация и компоненты пользовательского интерфейса должны быть представлены пользователю в таких формах, которые он способен воспринимать;
- Операбельность. Пользователь должен иметь возможность оперировать всеми компонентами пользовательского интерфейса и навигации;
- Ясность. Работа пользовательского интерфейса и информация должны быть понятны пользователю;
- Надежность. Содержимое должно одинаково хорошо интерпретироваться широким кругом веб-браузеров, включая специальные браузеры для людей с ограниченными возможностями.
Воспринимаемость
- Визуальное представление текста (или текста на рисунке) должно иметь уровень контраста не менее 4.5:1;
- Размер текста (за исключением заголовков и текста в виде изображения) может быть увеличен минимум в 2 раза без применения специальных вспомогательных технологий, при этом функциональность не должна теряться, а пользователю не нужно будет прибегать к горизонтальной прокрутке чтобы прочитать строку текста;
- Пользователь должен иметь возможность выбора цвета фона и цвета текста;
- Ширина текстового блока не должна превышать 80 символов или знаков
используемой шрифтовой гарнитуры; - Выравнивание текста по ширине не допускается;
- Рекомендуется, как минимум, полуторный междустрочный интервал и
расстояние между параграфами текста, как минимум, в полтора раза больше чем междустрочный интервал.
Операбельность
- Весь функционал веб-сайта должен быть доступен с помощью клавиатуры;
- Пользователю должны быть обеспечены удобная навигация, легкий поиск содержимого и простое определение текущего местоположения страницы относительно главной страницы сайта;
- Должна быть возможность пропустить блоки дублирующиеся на каждой странице с
возможностью перейти к основному содержимому страницы; - Текущий фокус, при управлении с помощью клавиатуры, должен быть видимым;
Ясность
- Содержимое должно быть читаемым и понятным;
- Язык текста страницы должен быть задан программно (
<html lang="fr">
); - В тексте или в глоссарии после текста, должны быть приведены определения
редких слов, необычных сочетаний слов, аббревиатур, сокращений и т.п.
(<acronym> и <abbr>
); - Веб-старницы должны формироваться и «вести» себя предсказуемо;
- Пользователю должна быть обеспечена помощь при вводе данных: проверка и
сообщения об ошибках, подписи и инструкции по заполнению полей, контекстная помощь;
Надежность
- Разрабатываемый веб-сайт должен быть совместимым с различными браузерами и платформами как действующими, так и перспективными, включая специальные вспомогательные технологии и инструменты для людей с ограниченными возможностями.
Как пользователи с нарушениями зрения пользуются интернетом
Полностью слепые пользователи пользуются специальными программами, выполняющие синтез речи из текста страницы, так называемые скрин-ридеры, которые «читают» пользователю содержание веб-страницы, анализируя html-разметку и отсеивая что нужно прочитать, а что нет. Другой разновидностью такого рода программ являются дисплеи Брайля (на рисунке ниже), состоящие из программы-ридера и специального устройства, на корпусе которого есть определенное количество ячеек рельефно-точечного шрифта Брайля для подачи и получения команд от скрин-ридера на компьютере.
Пользователи с ослабленным зрением используют обычные браузеры совместно с программами, увеличивающими часть экрана, либо используют средства масштабирования самого браузера или механизмы, которые предусмотрели разработчики веб-сайта. Также такие пользователи зачастую используют так называемые текстовые браузеры, которые представляют содержание веб-сайта в виде текста.
Пользователи с цветовой слепотой (дальтонизмом) используют обычные браузеры, но с определенными цветовыми настройками системы, позволяющими переопределить стандартные цвета своими собственным, чтобы компенсировать недостающие цвета спектра. Но, зачастую, пользователи и не подозревают о том, что такие настройки могут быть применены.
Анализ действующих решений
Нами были изучены методы и практики, а также удачные реализации версий сайтов для людей с нарушениями зрения как мировом интернете, так и в русскоговорящей его части.
Как и политике, в нашем случае у России свой путь.
За рубежом, как правило, действует следующая схема: сайт изначально разрабатывается согласно
всем стандартам и рекомендациям, а для людей с ограниченными возможностями помещают видную ссылку «Accessibility», перейдя по которой, пользователю сообщается о стандартах совместимости, специальных программах для лучшего взаимодействия и т.п.
В такой схеме есть свои плюсы: упрощается поддержка сайта, да и в целом сайт, созданный по стандартам – это всегда хорошо как для пользователей, так и для поисковых систем.
Но, определенно, существуют и минусы такой схемы: отсутствуют явные и понятные настройки для пользователей; структура сайта не упрощается, что пользователям с нарушениями зрения затрудняет работу с ним.
В России прижилась другая схема – наряду с обычной версией сайта разрабатывается «специальная» версия для людей с ограниченными возможностями. На главной странице основного сайта размещается ссылка на «специальную» версию.
Плюсы такого подхода: пользователь может настроить представление содержимого спецверсии сайта собственноручно непосредственно на странице; в «специальной» версии сайта значительно упрощается навигация; основной контент выводится в одну колонку, что облегчает доступ к нему для пользователей с различными ограничениями по здоровью.
Есть и минусы у такого подхода: усложняется поддержка сайта, т.к. нужно сопровождать две версии сайта, хотя при правильной архитектуре сайта, этого недостатка можно избежать; появляются дополнительные затраты на разработку; бывает, что у пользователей складывается мнение о том, что «специальная» версия поддерживается во вторую очередь, и контент на такой версии может быть не всегда актуальным.
Нами был выбран второй путь в виде создания специализированной версии сайта, но при этом хочется отметить, что «основная» версия сайта Госдумы полностью соответствует стандарту W3C XHTML 1.0 Strict.
Далее некоторые технические детали реализации версии для пользователей с нарушениями зрения.
Обобщение проанализированных данных и разработка сайта
Структура страниц «основного» сайта была значительно упрощена: вспомогательные информационные блоки были убраны, а основной контент был размещен в центре рабочей области в одну колонку.
Главное меню также было упрощено: основные пункты вынесены на видные места. Т.к. меню повторяется на каждой странице, первой ссылкой на сайте сделано «перейти к основному контенту», чтобы пользователи программ скрин-ридеров могли сразу перейти к содержимому страницы, пропустив блок навигации.
Для удобства пользователей было сформировано три варианта размера шрифтов, которые можно выбрать из меню настроек. Помимо этого пользователь может масштабировать размер текста средствами браузера, все размеры текста указаны в относительных единицах (% или em).
В CSS предусмотрено 3 варианта цветовых схем сайта. Две стандартные цветовые схемы: «черным текстом по белому фону» и «белым тестом по черному фону» с максимальными уровнями контрастности, а также цветовая схема для людей с дальтонизмом: «светло-желтым текстом по темно-синему фону», которая тоже обладает большим уровнем контрастности. Кнопки управления этой функциональностью также вынесены на панель настроек.
В дальнейшем можно добавить и другие высоко-контрастные цветовые схемы, которые приведены на рисунке ниже. В таблице показаны двухцветные схемы (слева – как их видят люди с нормальным зрением, справа – как их видят люди с цветовой слепотой) [4].
В панель настроек добавлена возможность включать/отключать отображение изображений, а также функции выбора типа шрифта (с засечками или без) и интервала между парами знаков (кернинг), регулируя который можно значительно повлиять на «читабельность» текста, особенно при больших размерах шрифта.
К вышесказанному можно добавить несколько общих советов:
- Стоит избегать ненужных перезагрузок страницы, из-за которых «озвучка» страницы в скрин-ридерах начинается заново;
- Упрощая структуру сайта и выводя контент в одну колонку, мы тем самым упрощаем доступ к нему со специализированных устройств;
- Некоторые скрин-ридеры читают текст от заголовка к заголовку (пользователь может настроить этот параметр самостоятельно), поэтому нужно активнее использовать заголовки и выделение жирным начертанием в тексте – это упростит понимание содержания пользователем [3];
- Большинство пользователей скрин-ридеров не пользуются мышью и полностью зависят от управления с клавиатуры, поэтому очень важно обеспечить полное управление навигацией по сайту с помощью нее [3] [6].
Использованные материалы
- Designing for Screen Reader Compatibility webaim.org/techniques/screenreader
- Joe Clark. Big, Stark & Chunky www.alistapart.com/articles/lowvision
- Mary Frances Theofano, Janice (Ginny) Redis. Guidelines for Accessible and Usable Web Sites: Observing Users Who Work With Screen Readers www.redish.net/images/stories/PDF/InteractionsPaperAuthorsVer.pdf
- Pabini Gabriel-Petit. Ensuring Accessibility for People With Color-Deficient Vision www.uxmatters.com/mt/archives/2007/02/ensuring-accessibility-for-people-with-color- deficient-vision.php
- Trenton Moss. What Is Web Accessibility? www.alistapart.com/articles/wiwa
- Web Content Accessibility Guidelines (WCAG) 2.0 www.w3.org/TR/WCAG
- World Health Organization. Visual impairment and blindness www.who.int mediacentre/factsheets/fs282/en/index.html
- ГОСТ Р 52872-2007 «Интернет-ресурсы. Требования доступности для инвалидов по зрению». www.web-canape.ru/img/file/GOST-52872-2007.pdf
- МедНовости. Инвалидность по зрению ежегодно получают 45 тысяч россиян medportal.ru/mednovosti/news/2009/10/07/blind