WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!

Pages:     || 2 |
ИКТ для неограниченных возможностей Как сделать веб-сайт дружественным к людям с ограничениями по зрению Как сделать веб-сайт дружественным к людям с ограничениями по зрению Буклет выпущен в рамках реализации Программы «ИКТ для неограниченных возможностей». Автор благодарит Андрея Анисимова, Анатолия Попко, Алексея Хорошилова и Александра Суркова за участие в подготовке настоящего буклета.

Публикация № 090915/a/1 Издатель МОО «Информация для всех» Адрес: Россия, 121096, Москва, а/я 44 E-mail: contact@ifap.ru Сайт: www.ifap.ru Настоящее издание может свободно и без получения особого разрешения правообладателей копироваться и распространяться в оригинальном печатном или электронном виде, а также в виде полной или частичной копии печатной версии издания, изготовленной на копировально-множительном оборудовании; полной или частичной распечатки электронной версии издания, при условии, что:

копирование и/или распространение не преследует целей извлечения прибыли;

оригинальная электронная версия издания, которую можно загрузить с сайта www.ifap.ru, не будет модифицирована или отредактирована каким-либо образом, включая конвертацию в другие форматы файлов.

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

© Евгений Альтовский, 2009 © МОО «Информация для всех», издание, 2009 Как сделать веб-сайт дружественным к людям с ограничениями по зрению Предисловие В погоне за оригинальностью дизайна и оптимизацией кода веб-сайтов, их разработчики часто забывают об обеспечении удобства пользования (usability) и доступности (accessibility) своих работ для различных категорий посетителей.

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

Эта категория посетителей не оценит внешних достоинств сайтов, однако может наравне со всеми пользоваться ими при помощи обычных веб-браузеров и т.н. «программ экранного доступа» (screen reader).

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

Предлагаемые в этом буклете решения основываются на рекомендациях, изложенных в руководстве Консорциума Всемирной паутины (W3C) Web Content Accessibility Guidelines, и положениях государственного стандарта Российской Федерации ГОСТ Р 52872-«Интернет-ресурсы. Требования доступности для инвалидов по зрению».

Стоит отметить, что соответствующие усилия обеспечат не только приток дополнительных посетителей на сайт, но и сделают его код более удобным для индексирования поисковыми системами, то есть послужат целям поисковой оптимизации (SEO).

Рекомендации, изложенные в этом буклете, соответствуют также принципу разделения контента (содержания), структуры и оформления документов, отраженному во всех современных и перспективных версиях языков разметки гипертекста (HTML, XHTML, XML и др.), и, соответственно, помогут подготовить сайт к новому уровню развития «Всемирной паутины» – «Семантической паутине» (Semantic Web).

Хотя настоящий буклет ни в коей мере не может рассматриваться как руководство по верстке «правильных», соответствующих букве и духу рекомендаций Консорциума Всемирной паутины сайтов, а тем более, как руководство по созданию «семантических» сайтов, приведенные в нем примеры покажут, насколько просто сделать сайт более удобным и доступным для его посетителей.

Общие рекомендации 1. При разработке сайтов придерживайтесь рекомендаций Консорциума Всемирной паутины, которые являются де-факто стандартами в области «сайтостроения». Не соответствующие этим рекомендациям файлы форматов HTML, CSS и т.д. могут некорректно обрабатываться и отображаться в веб-браузерах, а программы экранного доступа (ПЭД) могут озвучивать содержащуюся на соответствующих сайтах информацию в неправильной последовательности, пропускать значимую информацию и т.п.

Существует множество бесплатных и свободно доступных программ и онлайнсервисов для проверки синтаксиса файлов форматов HTML, CSS и других, использующихся для создания сайтов; ссылки на некоторые из них приведены в этом буклете.

2. Старайтесь размещать всю значимую информацию на сайте в текстовом виде или в аудио-файлах, т.к. ПЭД не в состоянии озвучить текст, размещенный в виде графических файлов, flash-элементов и т.п.

Как сделать веб-сайт дружественным к людям с ограничениями по зрению Сайт, дружественный к людям с ограничениями по зрению Люди с ограничениями по зрению видят окружающий нас мир иначе. В частности, они могут не различать цветов, не видеть определенные участки в поле своего зрения и т.д.

Чтобы помочь им пользоваться сайтом, можно принять следующие меры.

1. Используйте на страницах сайта, особенно в их содержательно значимых областях, таких как блоки с информацией и навигационные элементы, контрастные цвета. Старайтесь не злоупотреблять «раздражающими» цветами (например, ярко-красным) и «вывороткой», то есть размещением текста на фоне, цвет которого темнее цвета текста. Все это может серьезно осложнить пользование сайтом даже людям с хорошим зрением.

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

3. Старайтесь не использовать в качестве ссылок графические файлы, flash-элементы и т.п. с текстом, так как слабовидящие посетители не смогут увеличить размер шрифта, либо делайте на них достаточно крупные надписи с поясняющим текстом, дающим четкое представление о том, куда ведет соответствующая ссылка.

Не забывайте использовать атрибут alt для графических файлов, служащих гиперссылками, а также атрибут title для самих гиперссылок, приводя в них четкое пояснение, куда ведет соответствующая ссылка.

Пример:

использование title не требуется:

Дополнительная информация доступна на портале «Информация для всех».

требуется использование title:

Дополнительная информация доступна на этом портале.

использование alt желательно (например, иллюстрация к тексту):

Лого Информация для всех использование alt обязательно (изображение, являющееся гиперссылкой):

Лого Информация для всех Обратите внимание, что в последнем примере используются оба атрибута – title и alt, – первый из которых описывает, куда ведет гиперссылка, а второй – то, что изображено на картинке в графическом файле.

4. Не препятствуйте тому, чтобы посетители могли самостоятельно устанавливать в используемом ими браузере размер и гарнитуру шрифта, цвет текста и фона страниц просматриваемых сайтов. Постарайтесь сделать макет сайта «резиновым», чтобы он целиком умещался в окне браузера, вне зависимости от установленного посетителем сайта размера шрифта и экранного разрешения.

Как сделать веб-сайт дружественным к людям с ограничениями по зрению 5. Старайтесь не использовать на сайте движущиеся или мерцающие изображения и текст, т.к. они могут вызвать проблемы не только у людей с ограничениями по зрению, но и с эпилепсией.

Сайт, дружественный к незрячим Незрячие, так же как и остальные люди, могут успешно пользоваться сайтами с помощью ПЭД; эти программы могут прочесть незрячим информацию, размещенную на сайте в текстовом виде. Однако ПЭД не обладают интеллектом человека, и в случае излишне сложной верстки сайта, могут не разобрать правильной последовательности чтения. Чтобы помочь незрячим пользоваться сайтом, в дополнение к вышеописанным мерам можно принять следующие.

Примечание: хотя «стандарт» каскадных таблиц стилей Cascading Style Sheets, level 2 был принят Консорциумом Всемирной паутины еще в 1998 году, большинство ПЭД не поддерживают его «голосовых» возможностей, либо поддерживают их частично, что затрудняет создание сайтов, дружественных к незрячим. В частности, это относится к «голосовым» каскадным таблицам стилей и свойству элементов speak.

Такое положение вещей объясняется тем, что отсутствует стандартная схема взаимодействия «голосовых» (и не только) возможностей CSS с интерфейсами программирования приложений (API), используемыми ПЭД. Ситуация должна улучшиться с окончанием работы над рекомендацией Консорциума Всемирной паутины Accessible Rich Internet Applications (WAI-ARIA).

1. Используйте возможности каскадных таблиц стилей (CSS) для управления отображением разных элементов сайта в зависимости от типа браузера посетителя. Одно из допустимых значений атрибута media ссылок на файлы с каскадными таблицами стилей – aural, что соответствует каскадной таблице стиля, предназначенной для программ синтеза речи, в том числе ПЭД.

Пример:

С помощью каскадных таблиц стилей можно скрывать от ПЭД бесполезные для них или невоспроизводимые ими части страниц сайта – графические объекты, flash-элементы, элементы дизайна сайта и т.п. Аналогичным образом в каскадной таблице стилей для обычных браузеров можно скрывать части страниц, предназначенные исключительно для ПЭД.

Пример:

файл index.html (страница сайта):

файл screen.css (каскадная таблица стилей для обычных браузеров):

DIV.flash_menu {} DIV.text_menu {display: none} файл aural.css (каскадная таблица стилей для ПЭД):

DIV.flash_menu {display: none} DIV.text_menu {} Как сделать веб-сайт дружественным к людям с ограничениями по зрению 2. Так как ПЭД может не поддерживать работу с «голосовыми» каскадными таблицами стилей, в каскадной таблице стилей для обычных браузеров следует задать свойство speak, присвоив ему значение none для тех элементов, которые не следует озвучивать.

Пример:

файл screen.css (каскадная таблица стилей для обычных браузеров):

DIV.flash_menu {speak: none} 3. Другим способом скрыть часть информации от зрячих посетителей сайта (например, пояснительный текст), но предоставить доступ к ней незрячим, является использование свойств элементов visibility, position и z-index со значениями hidden, absolute и -1 (минус единица) соответственно.

Пример:

файл screen.css (каскадная таблица стилей для обычных браузеров):

DIV.remark {visibility: hidden; position: absolute; z-index: -1} файл aural.css (каскадная таблица стилей для ПЭД):

DIV.remark {} 4. Старайтесь не использовать на сайте фреймы (frameset), так как навигация по ним с помощью ПЭД крайне затруднительна, либо создавайте альтернативную версию навигации, не использующую фреймы, например с помощью тэга noframes.

Пример:

[навигационное меню сайта] 5. При «табличной» верстке сайта, то есть на основе таблиц (table), не злоупотребляйте большой вложенностью таблиц друг в друга, количеством столбцов и строк, особенно объединенных с помощью элементов colspan и rowspan, так как это может создать существенные трудности для ПЭД.

6. Создавайте альтернативную – текстовую – версию навигационного меню, если основное меню создано с использованием графических файлов, flash-элементов или JavaScript. Использование каскадных таблиц стилей позволит отображать посетителям только одну из версий навигационного меню, в зависимости от типа используемого ими браузера. Кроме того, технология Flash позволяет создавать альтернативную – текстовую – версию flash-элементов, которая будет доступна незрячим с помощью ПЭД.

Как сделать веб-сайт дружественным к людям с ограничениями по зрению 7. Поместите в самом начале страницы гиперссылку, ведущую к «якорю» непосредственно перед началом содержательной части страницы. Таким образом незрячие и другие посетители с ограниченными возможностями смогут быстрее получить доступ к интересующей их информации.

Пример:

Пропустить меню [навигационное меню, элементы оформления сайта и т.п.] либо

[содержательная часть сайта] Аналогичным образом в конце содержательной части страницы можно поместить гиперссылку, ведущую к «якорю» в начале страницы Пример:

[содержательная часть сайта] Вернуться к началу страницы либо

[навигационное меню, элементы оформления сайта и т.п.] 8. Сопровождайте элементы форм (form) содержательным описанием, используя при этом тэги id и label для сопоставления элементов формы и их описания. Используйте также тэги tabindex – для задания очередности переключения между полями формы с помощью клавиатуры – и accesskey – для сопоставления элементам формы определенной клавиши на клавиатуре. Так вы поможете не только незрячим посетителям сайта, но и посетителям с ограниченными физическими возможностями, которые не могут пользоваться манипулятором «мышь».

Пример:

Искать или
Обратите внимание, что в приведенном выше примере пояснения к элементам формы расположены до соответствующих элементов. Благодаря этому, ПЭД сначала озвучит пояснение к элементу, а лишь затем сообщит о наличии самого элемента и предоставит посетителям возможность взаимодействия с ним.

Pages:     || 2 |



© 2011 www.dissers.ru - «Бесплатная электронная библиотека»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.