WWW.DISSERS.RU

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

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

ИКТ для неограниченных возможностей Как сделать веб-сайт дружественным к людям с ограничениями по зрению Как сделать веб-сайт дружественным к людям с ограничениями по зрению Буклет выпущен в рамках

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

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

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

© Евгений Альтовский, 2009 © МОО «Информация для всех», издание, Как сделать веб-сайт дружественным к людям с ограничениями по зрению Предисловие В погоне за оригинальностью дизайна и оптимизацией кода веб-сайтов, их разработчики часто забывают об обеспечении удобства пользования (usability) и доступности (accessibility) своих работ для различных категорий посетителей. Одной из категорий посетителей, чьи возможности и потребности следует учитывать при разработке сайта, являются незрячие и люди с различными ограничениями по зрению. Эта категория посетителей не оценит внешних достоинств сайтов, однако может наравне со всеми пользоваться ими при помощи обычных веб-браузеров и т.н. «программ экранного доступа» (screen reader). В этом буклете рассказывается о трудностях, которые испытывают незрячие и люди с ограничениями по зрению при доступе к размещенной в Интернете информации, а также мерах, которые ответственные веб-разработчики могут предпринять, чтобы таких трудностей стало значительно меньше. Предлагаемые в этом буклете решения основываются на рекомендациях, изложенных в руководстве Консорциума Всемирной паутины (W3C) Web Content Accessibility Guidelines, и положениях государственного стандарта Российской Федерации ГОСТ Р 52872-2007 «Интернет-ресурсы. Требования доступности для инвалидов по зрению». Стоит отметить, что соответствующие усилия обеспечат не только приток дополнительных посетителей на сайт, но и сделают его код более удобным для индексирования поисковыми системами, то есть послужат целям поисковой оптимизации (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 – для сопоставления элементам формы определенной клавиши на клавиатуре. Так вы поможете не только незрячим посетителям сайта, но и посетителям с ограниченными физическими возможностями, которые не могут пользоваться манипулятором «мышь».

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

Как сделать веб-сайт дружественным к людям с ограничениями по зрению 9. Не используйте на сайте системы CAPTCHA, которые не предоставляют альтернативной – голосовой – версии теста. Примером подходящей для незрячих системы CAPTCHA может служить reCAPTCHA, которая доступна для свободного использования на любом сайте. Предоставьте посетителям возможность попасть в защищенный с помощью CAPTCHA раздел сайта альтернативным способом, например, связавшись с администраций сайта по электронной почте. 10. Старайтесь не использовать на сайте текстовые символы в целях украшения, либо скрывайте их от ПЭД, т.к. содержательный текст и «текстовые украшения» не различаются ПЭД.

Пример: файл index.html (страница сайта): О сайте Новости файл screen.css (каскадная таблица стилей для обычных браузеров): SPAN.hidden {speak: none} файл voice.css (каскадная таблица стилей для ПЭД): SPAN.hidden {display: none} 11. ПЭД могут иметь ограниченную поддержку передовых веб-технологий, поэтому убедитесь, что при отключенной в браузере поддержке Java, JavaScript, ActiveX, Flash и т.п. ваш сайт остается доступным, т.е. доступна вся значимая информация, размещенная на нем, и навигация по сайту. Доступность сайта в этом случае имеет значение и для обычных посетителей, которые отключают поддержку перечисленных возможностей, например, по соображениям безопасности. 12. Указывайте в заголовках HTML-файлов язык и кодировку размещенной в них информации, это поможет ПЭД озвучивать информацию, размещенную на сайте.

Пример: Используемый язык можно указать и для отдельных элементов страницы, например, если страница содержит информацию на нескольких языках.

Пример:

Текст на русском языке
English text
13. Делайте заголовок страницы (title) информативным, дающим представление о содержании страницы. Если заголовок страницы содержит название сайта, то его следует указать после описания содержания этой конкретной страницы.

Пример: 1 ИКТ для неограниченных возможностей Как сделать веб-сайт дружественным к людям с ограничениями по зрению Как сделать веб-сайт дружественным к людям с ограничениями по зрению Буклет выпущен в рамках Как сделать веб-сайт дружественным к людям с ограничениями по зрению 14. Аудио- или видео-файлы, flash-ролики и т.п., автоматически проигрывающиеся при загрузке страниц сайта, могут серьезно осложнить незрячим посетителям доступ к размещенной на них информации. Звуковая дорожка таких файлов (например, фоновая мелодия) может заглушать текст, озвучиваемый ПЭД. Файлы, содержащие звуковую дорожку, можно сделать «невидимыми» для ПЭД, а также разместить на сайте таким образом, чтобы они не воспроизводились автоматически, либо воспроизводились в течение очень короткого промежутка времени. 15. Для ПЭД особенно важно использование HTML-тэгов строго по назначению, поэтому избегайте разметки содержимого страниц не предназначенными для этого тэгами. Например, оформляйте заголовок текста только с помощью тэгов заголовков – h1... h6.

Пример: корректное оформление заголовка текста:

Глава 1

некорректное оформление заголовка текста:

Глава 1

16. Применяйте таблицы (table) для оформления табличных данных, а не разметки страниц сайта. Используйте в таблице тэги заголовков строк и столбцов – th и другие тэги логической разметки таблицы – thead, tfoot и tbody, создавайте описание таблицы (summary). Все это существенно упростит доступ к табличным данным с помощью ПЭД.

Пример:

ПосетителейПросмотренных страниц
Всего24000134000
2007700035000
2008800042000
2009900057000
Следование этим простым советам позволит без существенного вмешательства в код и дизайн сайта сделать его дружественным к незрячим и людям с ограничениями по зрению, которые станут благодарными посетителями вашего сайта. Тем, кто интересуется более подробной информацией по вопросам обеспечения доступа людей с ограниченными возможностями к веб-сайтам, рекомендуется ознакомиться с соответствующим руководством Консорциума Всемирной паутины (World Wide Web Consortium, W3C) – Web Content Accessibility Guidelines (WCAG) – и его инициативами по обеспечению доступности интернет-ресурсов – Web Accessibility Initiative (WAI), а также государственным стандартом Российской Федерации ГОСТ Р 52872-2007 «Интернетресурсы. Требования доступности для инвалидов по зрению».

Как сделать веб-сайт дружественным к людям с ограничениями по зрению Дополнительная информация W3C Web Accessibility Initiative – http://www.w3.org/WAI/ W3C Accessible Rich Internet Applications – http://www.w3.org/TR/wai-aria/ Руководство Web Content Accessibility Guidelines 2.0 – http://www.w3.org/TR/WCAG20/ Рекомендация W3C HTML 4.01 – http://www.w3.org/TR/html401/ Рекомендация W3C CSS 2.1 – http://www.w3.org/TR/CSS21/ Валидатор синтаксиса HTML файлов – http://validator.w3.org Валидатор синтаксиса CSS файлов – http://jigsaw.w3.org/css-validator/ Стандарт ГОСТ Р 52872-2007 «Интернет-ресурсы. Требования доступности для инвалидов по зрению» – http://www.ifap.ru/library/gost/528722007.pdf Система reCAPTCHA – http://recaptcha.net Программа «ИКТ для неограниченных возможностей» – http://www.ifap.ru/ictdis/ Пожалуйста, проявите внимание к тем, кто не сможет оценить внешних достоинств вашего сайта, но заинтересован в размещенной на нем информации!

ИКТ для неограниченных возможностей МОО «Информация для всех» Адрес: Россия, 121096, Москва, а/я 44 E-mail: contact@ifap.ru Сайт: www.ifap.ru




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

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