Поскольку сайт в своём стандартном представлении является подборкой графических материалов, то и разработка его, как правило, ведётся именно с учётом визуального восприятия представленных данных и зрительного контроля результатов разработки. Тем не менее, для незрячего пользователя, две совершенно идентичные с визуальной точки зрения страницы могут выглядеть по-разному, что, в значительной степени, обуславливается порядком блоков в исходном коде.
Подробнее о принципах работы пользователей с нарушениями зрения можно ознакомиться в другом материале, здесь же будет кратко описана лишь концепция представления гипертекстовых документов.
При значительных нарушениях зрения, не позволяющих воспринимать информацию с дисплея напрямую, используется вспомогательное программное обеспечение, которое либо прочитывает информацию вслух посредством синтеза речи, либо выводит её на специальный тактильный дисплей в форме рельефно-точечного шрифта Брайля. Такое ПО принято называть «screenreader» (в русском языке чаще всего — «программа экранного доступа»).
Для представления содержимого гипертекстового документа, программа экранного доступа самостоятельно (отдельно от окна браузера) анализирует исходный код страницы и выводит его в виде, доступном для восприятия при помощи синтеза речи или тактильного дисплея, попутно обеспечивая ряд дополнительных возможностей для невизуальной навигации по гипертексту.
Фактически речь идёт о том, что пользователю предоставляется возможность последовательно читать содержимое страницы.
Проблема кроется именно в «последовательности», так как она субъективна. Современный web-дизайн отошёл от структурирования информации подобно обычному тексту. Используется структурирование в две колонки, три колонки и прочее.
Чтобы понять проблему, достаточно открыть какую-нибудь страницу с многоколоночным дизайном и начать читать представленный на ней текст, поставив себе задачу прочитать абсолютно всё содержимое. Уже после верхнего колонтитула возникнет вопрос: «В каком порядке читать содержимое колонок?» В сущности, разработчики программ экранного доступа сталкиваются с теми же самыми проблемами, когда разрабатывают алгоритмы выстраивания потока последовательного чтения. Разумеется, у пользователей таких программ есть возможность перемещаться по элементам страницы, но нет возможности быстро взглядом охватить всё содержимое, поэтому корректность именно последовательности представления блоков в потоке чтения остаётся актуальной.
Для примера рассмотрим следующую страницу:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Заголовок страницы</title> <style type="text/css"> .header, .sidebar, .content, .footer { padding: 10px; border: solid 1px #000000; background: #FFFFFF; } .header, .footer { font-size: 24px; } .layout { margin: 15px 0; overflow: hidden; min-width: 800px; max-width: 1200px; } .sidebar { width: 100px; float: left; } .content { margin-left: 135px; } </style> </head> <body> <div class="header">Верхний колонтитул</div> <div class="layout"> <div class="sidebar"> <h2>Меню</h2> <ul> <li><a href="link1.htm">Ссылка 1</a></li> <li><a href="link2.htm">Ссылка 2</a></li> <li><a href="link3.htm">Ссылка 3</a></li> </ul> </div> <div class="content"> <h1>Заголовок страницы</h1> <p>Абзац 1.</p> <p>Абзац 2.</p> <p>Абзац 3</p> </div> </div> <div class="footer">Нижний колонтитул</div> </body> </html> В данном примере, у страницы имеется верхний и нижний колонтитулы, а между ними две колонки. Левая колонка представляет собой боковую панель с разделами сайта и имеет определённый размер, а правая колонка содержит основной контент и её ширина устанавливается автоматически, исходя из ширины окна браузера. Плюс поскольку речь идёт о «резиновом» макете, то установлены определённые лимиты на сжимание и растягивание общего блока обеих колонок, при достижении которых просто будут появляться полосы прокрутки. В общем-то это достаточно традиционная модель вёрстки.
Далее можно проделать небольшой эксперимент, переставив местами блоки боковой панели и основного содержимого:
<div class="layout"> <div class="content"> <h1>Заголовок страницы</h1> <p>Абзац 1.</p> <p>Абзац 2.</p> <p>Абзац 3</p> </div> <div class="sidebar"> <h2>Меню</h2> <ul> <li><a href="link1.htm">Ссылка 1</a></li> <li><a href="link2.htm">Ссылка 2</a></li> <li><a href="link3.htm">Ссылка 3</a></li> </ul> </div> </div> Не смотря на изменение кода, визуально страница осталась абсолютно такой же, и зрячий пользователь этого совершенно не заметит.
Тем не менее, как уже говорилось выше, программа экранного доступа парсит исходный код страницы и перерабатывает его в форму потокового представления, поэтому для неё данные изменения окажутся существенны.
В первом случае, программа будет в потоке читать сначала верхний колонтитул, затем боковую панель, потом основное содержимое и в конце нижний колонтитул. Во втором же случае, сначала будет верхний колонтитул, затем сразу основное содержимое, только потом боковая панель и в конце нижний колонтитул.
Таким образом, программы экранного доступа традиционно используют порядок представления информации в том виде, в котором он получается при последовательном парсинге исходного кода страницы. Это означает, что при вёрстки многоколоночного макета, или любой другой схемы представления контента, оставляющей возможность для неоднозначной трактовки порядка чтения, web-мастер, желающий разрабатывать грамотно во всех отношениях, в том числе должен учитывать и порядок блоков в исходном коде, выстраивая их соответственно общему замыслу порядка чтения страницы. То есть, например, переносить код боковой панели ниже блока основного содержимого, из соображений более простого чтения исходного кода (боковая панель везде одна и не надо её прокручивать, чтобы посмотреть различающееся основное содержимое и т.п.), неправильно, так как это повлечёт за собой нарушение логики представления информации для пользователей программ экранного доступа.
ссылка на оригинал статьи http://habrahabr.ru/post/191256/
Добавить комментарий