Руководство по созданию доступного веб-контента. Приемы CSS

Резюме

Здесь объясняются приемы создания доступных каскадных таблиц стилей (CSS), определенных рекомендациями W3C «CSS Level 1» [CSS1] и «CSS Level 2» [CSS2]. Этот документ создан для того, чтобы помочь авторам веб-контента, которые хотят достичь соответствия правилам «Руководства по созданию доступного веб-контента» («Web Content Accessibility Guidelines 1.0») [WCAG10], однако перечисленные здесь приемы не гарантируют полной доступности контента и не могут считаться единственным направлением в обеспечении доступности.

Текст входит в серию публикаций по приемам создания доступного веб-контента, информацию о других документах в серии вы найдете в [WCAG10-TECHS].

Статус этого документа

Список текущих рекомендаций W3C и других технических документов вы можете найти по адресу www.w3.org/TR/.

1. Уменьшите поддержку и увеличьте постоянство

Проверочные пункты в этом разделе: 14.3 Создайте для страниц общий стиль представления [III приоритет].

2. Переопределение стилей пользователем

Проверочный пункт в этом разделе: 11.2. Избегайте устаревших приемов в технологиях W3C [II приоритет].

В целях обеспечения пользовательского контроля над стилями, CSS2 меняет семантику оператора !important, определенного в CSS1. В CSS1 авторы всегда имеют последнее слово в отношении стилей. В CSS2, если таблица стилей пользователя содержит !important, она имеет приоритет над любым применимым правилом в таблице стилей автора. Это важная возможность для пользователей, которые требуют или должны избегать конкретные сочетания цветов или контрастов, пользователей, которым необходимы большие размеры шрифтов, и т. д. Например, следующее правило задает большой размер шрифта для текста параграфа и отменяет правило автора равного веса:

P { font-size: 24pt !important }

Значение CSS2 inherit, которое может принимать любое свойство, позволяет сократить использование правил !important, касающихся всего или почти всего документа. Например, следующий стиль делает фон каждого объекта белым, а цвет текста — черным:

/* Установить черный текст и белый фон для тела документа. */

body {
  color: black ! important ;
  background: white ! important
}

/* Наследовать значения color и background
   всеми другими элементами, усилив правило
   при помощи !important. Обратите внимание,
   это можно по-прежнему переопределить более
   конкретными пользовательскими стилями */

* {
  color: inherit !important ;
  background: inherit !important
}

CSS2 также включает следующие возможности пользовательского контроля:

Например, для рисования жирной черной линии вокруг элемента, на который наведен фокус и красной вокруг активного элемента, можно использовать следующие правила:

:focus  { outline: thick solid black }
:active { outline: thick solid red }

3. Единицы измерения

Проверочные пункты в этом разделе: 3.4. Используйте относительные единицы измерения вместо абсолютных в значениях атрибутов языка разметки и свойств таблицы стилей [II приоритет].

Приемы:

h1 { font-size: 2em }

h1 { font-size: 12pt }

body { margin-left: 15%; margin-right: 10%}

.businesscard { font-size: 8pt }

4. Сгенерированный контент

Проверочные пункты в этом разделе:

Приемы:

CSS2 включает несколько средств, позволяющих создавать контент:

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

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

DIV.example:after {
  content: Конец примера
}

Также пользователи могут, например, нумеровать параграфы, так чтобы можно было найти свое положение при чтении документа:

P:before {
  content: counter(paragraph) ". " ;
    counter-increment: paragraph
}

5. Шрифты

Проверочные пункты в этом разделе: 11.2. Избегайте устаревших возможностей технологий W3C [II приоритет].

Приемы:

body { font-family: "Gill Sans", sans-serif }

<style type="text/css">
   p.important { font-weight: bold }
   p.less-important { font-weight: lighter; font-size: smaller }
   h2.subsection { font-family: Helvetica, sans-serif }
</style>

6. Стилевые эффекты текста

Проверочные пункты в этом разделе: 7.2. Пока пользовательские агенты позволяют пользователям контролировать мигание, не используйте мигающий контент (такой, который меняет оформление с постоянной частотой, например, показывает и скрывает элементы) [II приоритет].

Для применения к тексту стилей используйте следующие свойства CSS2:

7. Текст вместо изображений

Проверочные пункты в этом разделе: 3.3. Используйте таблицы стилей для контролирования верстки и представления [II приоритет].

Разработчики контента должны использовать таблицы стилей для оформления текста, а не представлять текст изображениями. Использование текста вместо изображений делает информацию доступной для большего числа пользователей (с синтезаторами речи, дисплеями Брайля, графическими дисплеями, и так далее). Использование CSS также позволит пользователям с большей легкостью менять стили авторов, цвета и размеры шрифта.

Если для создания текстовых эффектов необходимо использовать растровые изображения (особый шрифт, преобразование, тени и т. д.), растр должен быть доступным (см. разделы текстовые заменители и альтернативные страницы).

<p>Вот <img src="RedExample.gif" alt="пример"> того, что мы имеем в виду.</p>

8. Форматирование и положение текста

Проверочные пункты в этом разделе: 3.3. Используйте таблицы стилей для контролирования верстки и представления [II приоритет].

Следующие свойства CSS2 можно использовать для контроля форматирования и позиции текста:

Следующий пример показывает, как использовать таблицы стилей для создания эффекта буквицы:

<HEAD>
<TITLE>Drop caps</TITLE>
<STYLE type="text/css">
      .dropcap { font-size : 120%; font-family : Helvetica }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="dropcap">Ж</SPAN>или-были…
</BODY>

9. Цвета

9.1 Цветовой контраст

Проверочные пункты в этом разделе:

Приемы:

H1 {color: #808000}
H1 {color: rgb(50%,50%,0%)}

H1 {color: red}

Используйте следующие свойства CSS для задания цветов:

Убедитесь, что цвета фона и переднего плана хорошо контрастируют. Если указываете цвет переднего плана, всегда указывайте также и цвет фона (и наоборот).

9.2. Убедитесь, что информация представляется не только цветом

Проверочные пункты в этом разделе:

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

Например, в этом документе примеры оформлены по умолчанию (таблицами стилей) следующим образом:

Для дальнейшей информации о цветах и контрастах обратитесь к [LIGHTHOUSE].

10. Предоставьте контекстную связь в списках HTML

Проверочные пункты в этом разделе:

Разработчикам контента рекомендуется использовать UL для неупорядоченных списков и OL для упорядоченных (то есть использовать присущую разметку) совместно с CSS для предоставления контекстных связей.

Следующая таблица стилей CSS2 показывает, как использовать составную нумерацию вложенных списков, созданных с UL или OL. Элементы нумеруются с «1», «1.1», «1.1.1», и так далее.

<STYLE type="text/css">
    UL, OL { counter-reset: item }
    LI { display: block }
    LI:before { content: counters(item, "."); counter-increment: item }
</STYLE>

Пока пользовательскими агентами не будет широко поддерживаться CSS2, либо программы не будут позволять пользователям влиять на отображение списков другими методами, авторам следует предоставить контекстную связь во вложенных списках. Приведенный ниже механизм CSS1 показывает, как спрятать конец списка, если таблицы стилей включены, и сделать видимым, если стили не применены, когда пользовательские таблицы стилей изменяют механизм сокрытия, либо когда CSS не поддерживаются.

<STYLE type="text/css">
    .endoflist { display: none }
</STYLE>
<UL>
   <LI>Бумага:
      <UL>
         <LI>Конверты
         <LI>Бумага для заметок
         <LI>Бланки
         <LI>Плакаты
         <span class="endoflist">(Конец списка бумаги)</span>
      </UL>
   <LI>Пишущие принадлежности:
      <UL>
         <LI>Синие ручки
         <LI>Маркеры
         <span class="endoflist">(Конец списка пишущих принадлежностей)</span>
      </UL>
   <LI>Приспособления для скрепления бумаги:
      <UL>
         <LI>Скрепки
         <LI>Скобы
         <LI>Завязки
         <span class="endoflist">(Конец списка приспособлений
для скрепления бумаги)</span>
      </UL>
   <span class="endoflist">(Конец списка офисных принадлежностей)</span>
</UL>

11. Разметка, расположение, слои и выравнивание

Проверочные пункты в этом разделе:

Верстку, позиционирование, разбиение на слои и выравнивание следует делать при помощи таблиц стилей (в частности, с использованием плавающих блоков и абсолютного позиционирования CSS):

11.1. Если вам приходится использовать изображения для создания отступов

Предоставьте текстовые заменители для всех изображений, включая невидимые и прозрачные.

Если разработчики контента не могут использовать таблицы стилей и вынужденны использовать невидимые или прозрачные изображения (например, с IMG) в верстке, они должны указать для них alt="".

В моем стихотворении здесь
<IMG src="10pttab.gif" alt="&nbsp;&nbsp;&nbsp;">
нужно поставить большой отступ

<IMG src="spacer.gif" alt="spacer">
<IMG src="colorfulwheel.gif" alt="Колесо фортуны">

12. Линейки и рамки

Проверочные пункты в этом разделе: 6.1. организуйте документы таким образом, чтобы их можно было читать без таблиц стилей [I приоритет].

Линейки и рамки могут служить разделителями для видящих пользователей, но разделяющая роль не может сохраняться вне визуального контекста.

Используйте эти свойства CSS для определения стилей рамок:

Для создания линеек и рамок авторы должны использовать таблицы стилей.

<HEAD>
<TITLE>Redline with style sheets</TITLE>
<STYLE type="text/css">
     H1 { padding-top: 1em; border-top: 2px red }
</STYLE>
</HEAD>
<BODY>
<H1>Глава 8. Слуховые и тактильные устройства</H1>
</BODY>

Если линейка (т. е. элемент HR) используется для обозначения структуры, убедитесь, что структура также выделяется невизуальным средствами (например, в разметке).

<DIV class="navigation-bar">
   <HR>
   <A rel="Next" rel="nofollow" href="next.html">[Следующая страница]</A>
   <A rel="Previous" rel="nofollow" href="previous.html">[Предыдущая страница]</A>
   <A rel="First" rel="nofollow" href="first.html">[Первая страница]</A>
</DIV>

13. Использование позиционирования таблиц стилей и разметки для аккуратного преобразования

Проверочные пункты в этом разделе: 6.1 организуйте документы таким образом, чтобы их можно было читать без таблиц стилей [I приоритет].

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

1. текст появляется в браузере не в том порядке, как в разметке,
2. позиционирование в CSS может быть использовано для колоночной верстки. Элемент TABLE для создания такого же эффекта использовать нельзя.

Обратите внимание, для каждого позиционируемого объекта определен класс. В этих примерах вместо class можно использовать id. class использован потому, что в реальном случае объекты повторяются и не уникальны.

<head><style type="text/css">
  .menu1 { position: absolute; top: 3em; left: 0em;
           margin: 0px; font-family: sans-serif;
           font-size: 120%; color: red; background-color: white }
  .menu2 { position: absolute; top: 3em; left: 10em;
           margin: 0px; font-family: sans-serif;
           font-size: 120%; color: red; background-color: white }
  .item1 { position: absolute; top: 7em; left: 0em; margin: 0px }
  .item2 { position: absolute; top: 8em; left: 0em; margin: 0px }
  .item3 { position: absolute; top: 9em; left: 0em; margin: 0px }
  .item4 { position: absolute; top: 7em; left: 14em; margin: 0px }
  .item5 { position: absolute; top: 8em; left: 14em; margin: 0px }
  #box { position: absolute; top: 5em; left: 5em }
</style></head>
<body>
<div class="box">
  <span class="menu1">Продукты</span>
  <span class="menu2">Адреса</span>
  <span class="item1">Телефоны</span>
  <span class="item2">Компьютеры</span>
  <span class="item3">Переносные MP3-плееры</span>
  <span class="item5">Висконсин</span>
  <span class="item4">Айдахо</span>
</div>
</body>

Когда таблицы стилей не применены, весь текст появляется в одной строке слов «Продукты Адреса Телефоны Компьютеры Переносные MP3-плееры Висконсин Айдахо». Они появляются в порядке, в котором записаны в исходном документе, а значит то, что появляется в качестве заголовков колонок, если таблицы стилей применены, будет первыми фразами, так как они определены в исходной разметке первыми.

Следующий пример показывает, как то же самое визуальное представление можно создать в браузере, поддерживающем таблицы стилей, а также создать более осмысленное представление, если стили не применены. К содержимому можно применить структурную разметку (списки определений). Обратите внимание, что нулевые отступы указаны явно, так как в браузерах HTML списки определений отображаются с отступом.

<head><style type="text/css">
  .menu1 { position: absolute; top: 3em; left: 0em;
           margin: 0px; font-family: sans-serif;
           font-size: 120%; color: red; background-color: white }
  .menu2 { position: absolute; top: 3em; left: 10em;
           margin: 0px; font-family: sans-serif;
           font-size: 120%; color: red; background-color: white }
  .item1 { position: absolute; top: 7em; left: 0em; margin: 0px }
  .item2 { position: absolute; top: 8em; left: 0em; margin: 0px }
  .item3 { position: absolute; top: 9em; left: 0em; margin: 0px }
  .item4 { position: absolute; top: 7em; left: 14em; margin: 0px }
  .item5 { position: absolute; top: 8em; left: 14em; margin: 0px }
  #box { position: absolute; top: 5em; left: 5em }
</style></head>
<body>
<div class="box">
<dl>
  <dt class="menu1">Продукты</dt>
    <dd class="item1">Телефоны</dd>
    <dd class="item2">Компьютеры</dd>
    <dd class="item3">Переносные MP3-плееры</dd>
  <dt class="menu2">Адреса</dt>
   <dd class="item4">Айдахо</span>
   <dd class="item5">Висконсин</span>
  </dt>
</dl>
</div>
</body>

Когда таблицы стилей применены, это выглядит как прежде. Однако если стили не обработаны, текст появляется не в строке слов, а списке определений. То, что было заголовками колонок, появится в виде определяемых терминов.

14. Использование движения в таблицах стилей и скриптах

Проверочные пункты в этом разделе: 7.3. Пока пользовательские агенты не позволяют пользователям останавливать движущийся контент, избегайте в страницах движения [II приоритет]:

15. Звуковые таблицы стилей

Проверочные пункты в этом разделе: 11.3. Предоставьте такую информацию, чтобы пользователи могли получать документы в соответствии со своими настройками (такими как язык, тип содержимого и т. д.) [III приоритет].

Звуковые свойства CSS2 предоставляют информацию для незрячих пользователей и пользователей голосовых браузеров примерно так же, как шрифты предоставляют визуальную информацию. Следующий пример показывает, как различные параметры звука (включая voice-family, что подобно аудио-шрифту) могут показать пользователю, что произнесенный текст относится к заголовку:

H1 {
  voice-family: paul;
  stress: 20;
  richness: 90;
  cue-before: url("ping.au")
}

Следующие звуковые свойства входят в CSS2:

Кроме того, свойство speak-header определяет, как произносится информация в заголовке таблицы до содержимого ячейки.

16. Доступ к альтернативным представлениям контента

Проверочные пункты в этом разделе: 11.3. Предоставьте такую информацию, чтобы пользователи могли получать документы в соответствии со с своими настройками (такими как язык, тип содержимого и т. д.) [III приоритет].

CSS2 предоставляет доступ к альтернативным представлениям контента, указанным в значениях атрибутов, при совместном использовании следующих элементов:

В следующем примере значение атрибута alt элемента IMG обрабатывается после изображения (визуально, в звуке и т. д.):

IMG:after {
    content: attr(alt)
 }

Обратите внимание, что значение атрибута отображается даже если не показано само изображение (например, пользователь отключил изображения в настройках браузера).

17. Типы устройств

Проверочные пункты в этом разделе: 11.3. Предоставьте такую информацию, чтобы пользователи могли получать документы в соответствии со с своими настройками (такими как язык, тип содержимого и т. д.) [III приоритет].

Типы устройств CSS2 (используемые с правилами @media) позволяют авторам и пользователям разрабатывать таблицы стилей, которые позволяют корректно обрабатывать документы на конкретных целевых устройствах. Эти таблицы стилей могут приспосабливать контент для представления на устройствах Брайля, голосовых синтезаторах, телетайпах. С правилами @media можно уменьшить скорость загрузки, позволив пользовательским агентам игнорировать неприменимые правила.

18. Источники

Последние версии любой спецификации W3C можно найти в перечне технических отчетов W3C по адресу www.w3.org/TR/.

[CSS1]

«CSS, level 1 Recommendation», B. Bos, H. Wium Lie, eds., 17 December 1996, revised 11 January 1999. This CSS1 Recommendation is www.w3.org/TR/1999/REC-CSS1-19990111. The latest version of CSS1 is available at www.w3.org/TR/REC-CSS1.

[CSS2]

«CSS, level 2 Recommendation», B. Bos, H. Wium Lie, C. Lilley, and I. Jacobs, eds., 12 May 1998. This CSS2 Recommendation is www.w3.org/TR/1998/REC-CSS2-19980512/. The latest version of CSS2 is available at www.w3.org/TR/REC-CSS2.

Заметка W3C от 6 ноября 2000 г.
Перевод на русский язык: Алексей Бешенов
© 1999–2000 W3C