Единое окно доступа к образовательным ресурсам

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

Голосов: 1

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

Приведенный ниже текст получен путем автоматического извлечения из оригинального PDF-документа и предназначен для предварительного просмотра.
Изображения (картинки, формулы, графики) отсутствуют.
       ИКТ для неограниченных возможностей




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


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




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


                                                                                                Публикация № 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-2007
«Интернет-ресурсы. Требования доступности для инвалидов по зрению».
       Стоит отметить, что соответствующие усилия обеспечат не только приток
дополнительных посетителей на сайт, но и сделают его код более удобным для
индексирования поисковыми системами, то есть послужат целям поисковой оптимизации
(SEO).
       Рекомендации, изложенные в этом буклете, соответствуют также принципу
разделения контента (содержания), структуры и оформления документов, отраженному во
всех современных и перспективных версиях языков разметки гипертекста (HTML, XHTML,
XML и др.), и, соответственно, помогут подготовить сайт к новому уровню развития
«Всемирной паутины» – «Семантической паутине» (Semantic Web).
       Хотя настоящий буклет ни в коей мере не может рассматриваться как руководство по
верстке «правильных», соответствующих букве и духу рекомендаций Консорциума
Всемирной паутины сайтов, а тем более, как руководство по созданию «семантических»
сайтов, приведенные в нем примеры покажут, насколько просто сделать сайт более удобным
и доступным для его посетителей.


                                 Общие рекомендации

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

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




                                            2


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

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

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

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

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

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

     Пример:

      использование title не требуется:
     Дополнительная информация доступна на <a href="http://www.ifap.ru/">портале
     «Информация для всех»</a>.

      требуется использование title:
     Дополнительная информация доступна на <a href="http://www.ifap.ru/"
     title="Портал Информация для всех">этом портале</a>.

      использование alt желательно (например, иллюстрация к тексту):
     <img src="http://www.ifap.ru/logo.jpg" alt="Лого Информация для всех">

      использование alt обязательно (изображение, являющееся гиперссылкой):
     <a href="http://www.ifap.ru/" title="Портал Информация для всех">
     <img src="http://www.ifap.ru/logo.jpg" alt="Лого Информация для всех">
     </a>

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

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




                                             3


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

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


                               Сайт, дружественный к незрячим

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

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

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

     Пример:

     <link rel="stylesheet" href="voice.css" type="text/css" media="aural">

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

     Пример:

      файл index.html (страница сайта):
     <link rel="stylesheet" href="screen.css" type="text/css"
     media="screen">
     <link rel="stylesheet" href="aural.css" type="text/css" media="aural">

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

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

                                                    4


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

      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.

     Пример:

     <frameset cols="20%, 80%">
      <frame src="menu.html">
      <frame src="content.html">
      <noframes>
      [навигационное меню сайта]
      </noframes>
     </frameset>

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

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




                                                    5


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

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

     Пример:

     <a href="#content">Пропустить меню</a>
     [навигационное меню, элементы оформления сайта и т.п.]

     <a name="content"></a>                 либо              <div id=content>
     [содержательная часть сайта]

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

     Пример:

     [содержательная часть сайта]
     <a href="#top">Вернуться к началу страницы</a>

     <a name="top"></a>             либо           <div id=top>
     [навигационное меню, элементы оформления сайта и т.п.]

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

     Пример:

     <form action="search.php">
     Искать
     <label for="and">все слова</label>
     <input type="radio" name="stype" value="AND" id="and" tabindex="1"
     accesskey="a">
     или
     <label for="or">любое из слов</label>
     <input type="radio" name="stype" value="OR" id="or" tabindex="2"
     accesskey="o">
     <label for="string">в следующем поисковом запросе:</label>
     <input type="text" name="query" size="80" id="string" tabindex="3"
     accesskey="q">
     <input type="submit" value="Искать" tabindex="4" accesskey="s">
     </form>

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




                                                   6


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

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

      10. Старайтесь не использовать на сайте текстовые символы в целях украшения, либо
скрывайте их от ПЭД, т.к. содержательный текст и «текстовые украшения» не различаются
ПЭД.

     Пример:

      файл index.html (страница сайта):
     <a href="about.html">О сайте</a>
      <span class="hidden"> * </span>
     <a href="news.html">Новости</a>

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

      файл voice.css (каскадная таблица стилей для ПЭД):
     SPAN.hidden              {display: none}

      11. ПЭД могут иметь ограниченную поддержку передовых веб-технологий, поэтому
убедитесь, что при отключенной в браузере поддержке Java, JavaScript, ActiveX, Flash и т.п.
ваш сайт остается доступным, т.е. доступна вся значимая информация, размещенная на нем,
и навигация по сайту. Доступность сайта в этом случае имеет значение и для обычных
посетителей, которые отключают поддержку перечисленных возможностей, например, по
соображениям безопасности.

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

     Пример:

     <html lang="ru">
     <meta http-equiv="Content-Type" content="text/html;
     charset=windows-1251">

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

     Пример:

     <div lang="ru">Текст на русском языке</div>
     <div lang="en">English text</div>

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

     Пример:

     <title>Контактная информация * Портал «Информация для всех»</title>



                                                   7


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

       14. Аудио- или видео-файлы, flash-ролики и т.п., автоматически проигрывающиеся
при загрузке страниц сайта, могут серьезно осложнить незрячим посетителям доступ к
размещенной на них информации. Звуковая дорожка таких файлов (например, фоновая
мелодия) может заглушать текст, озвучиваемый ПЭД. Файлы, содержащие звуковую
дорожку, можно сделать «невидимыми» для ПЭД, а также разместить на сайте таким
образом, чтобы они не воспроизводились автоматически, либо воспроизводились в течение
очень короткого промежутка времени.

      15. Для ПЭД особенно важно использование HTML-тэгов строго по назначению,
поэтому избегайте разметки содержимого страниц не предназначенными для этого тэгами.
Например, оформляйте заголовок текста только с помощью тэгов заголовков – h1 ... h6.

     Пример:

      корректное оформление заголовка текста:
     <h4>Глава 1</h4>

      некорректное оформление заголовка текста:
     <p align="center"><b>Глава 1</b></p>

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

     Пример:

     <table summary="Статистика доступа к сайту за 2007-2009 гг.">
      <thead>
             <tr><th></th><th>Посетителей</th><th>Просмотренных страниц</th></tr>
      </thead>
      <tfoot>
             <tr><th>Всего</th><th>24000</th><th>134000</th></tr>
      </tfoot>
      <tbody>
             <tr><th>2007</th><td>7000</td><td>35000</td></tr>
             <tr><th>2008</th><td>8000</td><td>42000</td></tr>
             <tr><th>2009</th><td>9000</td><td>57000</td></tr>
      </tbody>
     </table>



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




                                                    8


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

                           Дополнительная информация

     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/


Пожалуйста, проявите внимание к тем, кто не сможет оценить внешних достоинств вашего
              сайта, но заинтересован в размещенной на нем информации!




                                          9



    
Яндекс цитирования Яндекс.Метрика