- Учитывайте разные размер и разрешение экрана:
Располагайте важную информацию слева и вверху страницы
Не привязывайте дизайн к определенным, заданным размеру экрана и
разрешению
- Облегчайте просмотр :
Большинство пользователей (около 75%) сначала просматривают текст и
меню в поисках информации
(и игнорируют графику!)
Детализируйте и ветвите структуру сайта, делайте ссылки на следующие
страницы
(менее 20% читают слово в слово)
- Стандартизируйте дизайн и навигацию
Размещайте логотипы, меню и характерные детали единообразно,
предсказуемо
На длинных страницах ставьте ссылки "к началу страницы"
Интуитивно обозначайте ссылки на контент и URL страницы
Уменьшайте пустое пространство на главных страницах - это выделяет
индексированные каталоги и упрощает просмотр
- Разветвляйте контент, делая ссылки на связанные
страницы
Связанные страницы могут быть третьего и более уровней глубины
Посетитель сайта всегда должен знать, где находится и иметь
возможность легко пройти обратно по пройденному пути или вернуться в
начало
- Делайте текст легким для чтения (см. "Writing for
the Web")
Свободно используйте списки, заголовки, подзаголовки и размер шрифта
Разделяйте блоки текста пробелами
Не заполняйте весь экран однородным текстом: делайте отступы, колонки
текста
Шрифты: используйте стандартные шрифты, если не
задано "по умолчанию"
Размер шрифта на экране зависит от размеров монитора, разрешения
экрана, а также установок браузера. Georgia (serif), Trebuchet и
Verdana (sans serif) были специально созданы для мониторов; Times
Roman (serif), Helvetica и Ariel (sans serif) также часто применяются.
- В целях максимальной доступности, размеры
шрифта надо указывать в относительных единицах,
а не в абсолютных, фиксированных. Если размер шрифта фиксирован:
Минимальный размер должен быть 10 (PC) или
12 (Macintosh) или "medium" или "3"
Используйте крупный шрифт "larger" на сайтах для детей и
пожилых людей
(см.
Руководство
по созданию доступного контента (Web Content Accessibility
Guidelines) (WCAG), опубликованного
Web Accessibility Initiative
(WAI),
которая является частью
World Wide
Web Consortium (W3C).
Study Guides Accessibility
(English)
- Исследования показали, что невелика разница
в скорости чтения
между Times Roman, Georgia, Helvetica и Verdana при размере
шрифта в 10 пунктов
- Используйте один шрифт для меню, навигации
и другой - для контента
Не используйте больше двух типов шрифта для одного сайта
- Старайтесь не использовать форматирования
шрифта (цвет, мерцание, бегущая строка, FACE и т.п..)
Зачастую такое форматирование не отображается корректно и
очень раздражает пользователя
Разумно подбирайте цвета
- Задайте все цвета (BGCOLOR, TEXT, LINK,
VLINK, and ALINK) или они будут выведены "по умолчанию"
"По умолчанию" выводятся цвета, определенные по умолчанию
на компьютере посетителя сайта
Если вы зададите только некоторые цвета, то все остальные
будут выводиться по умолчанию и не будут гармонировать с
теми, которые вы задали сами
- Цвет фона и текста должны быть резко
контрастными,
предпочтительнее сделать светлый фон и темный текст
- Избегайте фона, который затемняет текст
- Используйте безопасную палитру из 216
цветов
Эти цвета стандартны для всех браузеров (IE, Netscape,
Opera, Lynx) и платформ (PC и Macintosh).
Такие цвета задаются как "#RRGGBB" (Red, Green, Blue)
парами одинаковых шестнадцатеричных чисел (00, 33, 66, 99,
CC, and FF)
Графика:
- Изображения не должны иметь
разрешение больше 75 пиксел на дюйм
Это принятое для Интернет ограничение; если задать
больше, то изображение будет медленно загружаться, а
качество при этом не улучшится
- Используйте .jpg файлы для
изображений с нечеткими границами;
используйте .gif файлы для изображений с четкими
границами, без полутонов
- Используйте альтернативный текст
для описания сути изображения:
для людей с плохим зрением, для тех, кто отключает
графику в своем браузере,
для браузеров Lynx; для цифровых устройств; для 30%
всех браузеров
HTML код, с тэгом <alt>,
который определяет альтернативный текст:
<img src="logo.gif" alt="Логотип нашей
компании"> Логотип нашнй компании заменяет
изображение
<img src="space.gif" alt="*"> или <img src="space.gif"
alt="">Пустое место заменит
изображение-иллюстрацию, размещенное только
для декорации
- Избегайте делать ссылки
с изображений.
Если без этого не обойтись, в
альтернативном тексте к рисунку опишите
страницу, на которую сделана ссылка
- Не делайте
картинок-текстов, в целях декорации или
чего-то еще
Всегда можно заменить такую картинку
текстом соответствующего размера и цвета
- Избегайте использования
прозрачных однопиксельных изображений
формата GIF без особых на то причин.
Некоторые люди чрезмерно используют такие
изображения для разметки страницы. В
результате Страница получается нечитаемой
для людей, которые отключают графику в
своем браузере
Аккуратно используйте
таблицы для форматирования страниц
- Ширину таблицы и размер ячеек, как
правило, лучше задавать в процентах, а
не в пикселах.
Обычно удобнее, когда ширина строк
таблицы увеличивается и уменьшается в
зависимости от размеров окна браузера.
Фиксированная ширина строк и
увеличенный размер шрифта часто бывают
несовместимы
Фиксированная ширина строк может
приводить к горизонтальной прокрутке
для маленьких экранов
- Избегайте
использовать таблицы с тэгом абзаца <p>
или делать их "плавающими" (float) с
текстом
- Текстовый Lynx
сначала считывает целиком верхнюю
строку, и только потом переходит к
следующей строке.
Ссылки:
- Как можно лучше
описывайте
содержание ссылки
- Используйте
конструкцию "пробел | вертикаль |
пробел,
чтобы отделять стоящие рядом
ссылки
- Не используйте
такие фразы как "нажмите здесь "
"ввод"
- Избегайте
делать ссылки с изображений (image)
Трудно бывает понять, что рисунки
на странице - это ссылки!
- Не делайте
"выпадающих" меню
Трудно бывает понять, что здесь
содержится набор ссылок
Трудно адекватно описать
содержание таких ссылок
Не
используйте
- Фреймы.
Либо используйте
альтернативный не-фреймовый
вариант
- Java и
Flash, где это возможно
- Графику,
которая не несет смысловой
нагрузки и отвлекает от
контента
- Изображений, которые крутятся,
дрожат, подпрыгивают, если они
не иллюстрируют
непосредственно ваш контент
- Бегущих
строк
Просмотрите
ваши странички :
- Используя
черно-белую палитру,
чтобы проверить доступность
вашего дизайна для дальтоников
- Без
графики,
чтобы проверить доступность
вашего дизайна для людей с
плохим зрением и тех, кто
отключает графику
- На разных
платформах (PC, Macintosh,
Linux и т.п.)
- В разных
браузерах (Internet Explorer,
Netscape, Opera, Linus)
- С разным
шрифтом и размером экрана
Можно
оценить доступность веб-сайта
.
Один
сервис - это W3C HTML
Validation Service, там
проверяются документы в
формате HTML и XHTML на
предмет соответствия W3C
Recommendations и другим
стандартам
http://validator.w3.org
Ссылки:
Australian Lawlink of New
South Wales standards of
accessibility
Bobby
WorldWide
http://www.cast.org/bobby/
инструмент для создания
веб-страниц.
Помогает преобразовать
страницу так, чтобы люди с
плохим зрением и т.п.
могли тоже просматривать
ваши страницы.
Dr.
Watson
http://watson.addy.com/
Dr. Watson -
бесплатный сервис для
анализа вашей веб-страницы
в Интернет. Вы задаете URL
своей веб-страницы, и
Watson получает копию
страницу с веб-сервера.
Watson может проверить ваш
сайт по многим параметрам,
включая надежность ссылки,
скорость загрузки,
совместимость с
поисковиками и
востребованность.
Оптимизация для поисковых
машин (SEO) и доступность
сайта
в документе (.pdf файл)
обсуждается, как
использовать указания W3C
по доступности для
улучшения позиций сайта в
поисковиках. Там показано,
как использовать каждый
проход (поисковика) и
делается попытка убедить
оптимизаторов сделать
использование указаний W3C
стандартной практикой для
SEO.
Great
Britain's Royal National
Institute for the Blind
http://www.rnib.org.uk/digital/hints.htm
Human
Factors International on
accessibility:
http://www.humanfactors.com/accessibility/default.asp
Веб-сайт
Национального Института
Онкологии и Руководство
пользователям
http://www.usability.gov/guidelines/
Статьи по
доступному веб-дизайну
от Carmen Mardiros
University of Kentucky's "Engaging
Differences"
Проектирование веб-сайта
WebAIM Web
Accessibility In Mind
W3C's
HTML validator
validator.w3.org
W3C validator имеет
свободный доступ,
обновляется и является
официальным источником
стандартов спецификаций.
Проверяет HTML на разных
платформах и удаляет с
вашего сайта "трюки
браузера".
Web
Design Group
http://www.htmlhelp.com/design/accessibility/tips.htm
Русский перевод/редактирование:
Е.Гаврикова
Веб-сайт
Рекомендации учащимся
Study Guides and Strategies создан, развивается и поддерживается
Джо Ландсбергером (Joe Landsberger) как
общедоступный образовательный ресурс. Последние изменения в
"Рекомендации" были внесены November 09, 2005 . Разрешается
свободное копирование, адаптация и распространение
Рекомендаций учащимся в печатном виде на некоммерческой
основе в помощь преподавателю. Разрешение на размещение
ссылки на данный веб-сайт не требуется. "Рекомендации"
постоянно обновляются, дорабатываются, редактируются. По
этой причине воспроизведение всего содержимого в Интернет
может быть осуществлено только с разрешения в соответствии с
лицензионным солашением.
|
