Доступность и альтернативные устройства
CSS позволяет отделить структуру и содержание документа от его оформления. Следование такому принципу дает возможность доступа к его контенту пользователям устройств, не воспроизводящих дизайн сайта. Причиной таких ограничений могут быть технические особен- ности, как в случае определенных броузеров мобильных устройств, или конкретная функциональность, как у экранных дикторов, воспроизво- дящих текст для пользователей с нарушениями зрения. При этом у нас остается возможность создания красивых и привлекательных с визу- альной точки зрения сайтов для большинства пользователей, чьи броу- зеры поддерживают CSS.
Определенным пользователям с ограниченными возможностями вы об- легчите доступ к сайтам, созданным с учетом вышесказанных сооб- ражений, однако следует подумать и о тех посетителях, которые мо- гут увидеть дизайн сайта, но которым требуются дополнительные ин- струменты для работы с ним. Чтобы различным категориям пользова- телей было удобно пользоваться вашим сайтом, недостаточно просто сверстать макет страницы с использованием CSS. Например, некото- рые пользователи со слабым зрением смогут прочитать только четкий текст, размер шрифта которого можно увеличить. Также в настоящей главе будут рассмотрены вопросы использования альтернативных та- блиц стилей, таблиц стилей, предназначенных для определенной сре- ды отображения (например, для печати) и написания CSS-кода для мо- бильных устройств.
Аспекты доступности, о которых следует помнить при использовании CSS
Чтобы ваш сайт можно было с уверенностью назвать доступным для всех категорий пользователей, недостаточно только позаботиться об
удобстве посетителей, использующих экранные дикторы. При разра- ботке дизайна сайта необходимо учитывать потребности самых различ- ных пользователей: людей с нарушениями зрения, страдающих дис- лексией и тех, кто в силу физических ограничений не может пользо- ваться мышью. Такие пользователи, скорее всего, будут просматривать сайт в обычном веб-броузере, и только от вас зависит, насколько удоб- но им будет работать.
Решение
Ниже представлен достаточно сжатый список полезных приемов, часть из которых уже обсуждалась в предыдущих главах книги.
Наряду с фоновым изображением задайте простой цвет фона
Если текст в вашем документе отображается поверх фонового изобра- жения – заданного, например, для ячейки таблицы или блочного эле- мента – не забудьте указать также и фоновый цвет. Использование фо- нового цвета обеспечит сохранение уровня контрастности текста в том случае, если изображение по тем или иным причинам не загрузится.
Задав цвет фона, задайте цвет текста и наоборот
Чтобы читать документ было удобнее, необходимо продумать оптималь- ное сочетание цвета фона и текста для обеспечения должного уровня кон- трастности. Если вы зададите, скажем, только цвет фона, есть вероят- ность того, что он сольется с текстом, отображаемым в соответствии с на- стройками по умолчанию пользователя. Например, в настройках поль- зователя значится, что фон должен быть черным, а текст – белым, а вы задаете черный цвет текста. В этом случае текст просто-напросто исчез- нет! Если вы хотите дать пользователю возможность самостоятельно определять настройки цвета, не следует задавать никаких цветов вооб- ще, однако не так уж много веб-дизайнеров согласятся на такие условия!
Проверьте контрастность цвета
Убедитесь, что текст выглядит достаточно контрастно на выбранном фоне. Пользователям со слабым зрением будет крайне сложно прочи- тать текст, если уровень его контрастности по отношению к фону неве- лик. Кроме того, учтите, что пользователи, страдающие дальтонизмом, могут не различать определенные сочетания цвета фона и текста. По рекомендации консорциума W3C в документации «Критерии доступ- ности веб-контента» (WCAG 2.0 Success Criterion 1.4.31) указано, что контрастность между текстом и изображениями должна поддержи- ваться в соотношении по меньшей мере 4,5:1. Для оценки уровня кон- трастности между выбранными вами цветами можно воспользоваться
1 http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast- contrast
очень удобной программой Luminosity Contrast Ratio Analyser, напи- санной Джезом Лемоном (Jez Lemon)1.
Фоновые изображения следует использовать исключительно в декоративных целях
Добавлять фоновые изображения с помощью CSS настолько просто, что можно незаметно для себя приобрести пагубную привычку их повсе- местного использования – и там, где надо, и там, где совсем не надо. Од- нако следует помнить, что пользователи, отключившие просмотр изо- бражений и/или CSS, вообще не узнают о его существовании. В этом нет ничего страшного, если изображение выполняет только декоратив- ную функцию, однако если оно несет информативную нагрузку, лучше сопроводить его описательным атрибутом alt. Тогда пользователи, не имеющие возможности его увидеть, смогут узнать, что оно существует, и прочитать его описание.
Используйте свойство line-height, чтобы текст было легче читать
Благодаря увеличению высоты строки с помощью свойства line-height воспринимать текст будет еще легче, однако избегайте слишком боль- ших отступов межу строками, поскольку это может привести к обрат- ному эффекту. Оптимальное значение данного свойства составляет от
1,2 до 1,6, причем если не указывать единицы, то высота строки будет изменяться пропорционально размеру шрифта.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Создание релевантности: чего хотят люди (0)
- Создание текстов для пользователей (0)
- Разработка подробной схемы контента (0)
- Завершение углубленного анализа востребованности поисковых запросов (0)
- Авторитетные сайты ссылаются только на ценный материал (0)
- Ссылки даются на URL-адреса, а не на страницы (0)
- РАЗРАБОТАЙТЕ СВОЙ ВЕБ-САЙТ ДЛЯ ПОИСКОВОЙ СИСТЕМЫ GOOGLE (0)