Этот текст является неофициальным переводом документа W3C и не имеет той же силы, что и оригинал.

Заметка W3C от 6 ноября 2000 г.

Английский оригинал этой версии:

http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20001106/

Последняя версия:

http://www.w3.org/TR/WCAG10-CSS-TECHS/

Предыдущая версия:

http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20000920/

Редакторы:

Wendy Chisholm, W3C;
Gregg Vanderheiden, Trace R&D Center, University of Wisconsin -- Madison;
Ian Jacobs, W3C

Перевод на русский язык

Алексей Бешенов

Copyright1999 - 2000 W3C (MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.

Резюме

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

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

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

Данная версия от 6 ноября 2000 г. была издана для исправления некоторых устаревших ссылок. Она является публикацией в серии заметок, разработанных и одобренных рабочей группой WCAG, но она не выносилась на рассмотрение и утверждение другими членами W3C. Набор документов заменяет один прежний текст Techniques for Web Content Accessibility Guidelines 1.0, темы прежней публикации были распределены по документам о конкретных технологиях.

Хотя рекомендация WCAG 1.0 [WCAG10] является стабильным документом, этот набор взаимодополняющих текстов предполагается редактировать по мере изменения технологий и появления более эффективных приёмов по созданию доступного веб-контента.

Доступны история изменений в серии публикаций и список открытых и решённых задач. Просим читателей оставлять комментарии по поводу документа и предлагать решения открытых задач. Пожалуйста, направляйте подробные комментарии по поводу этого документа на адрес рабочей группы w3c-wai-gl@w3.org; архив комментариев находится в открытом доступе.

Только английская версия этой спецификации является нормативной, но могут быть доступны переводы документа.

Список известных ошибок в тексте оригинала доступен по ссылке http://www.w3.org/WAI/GL/WAI-WEBCONTENT-ERRATA. Замечания по английскому тексту направляйте по адресу wai-wcag-editor@w3.org.

Web Accessibility Initiative (WAI) консорциума WWW (W3C) создает различные ресурсы о доступности веб-контента. Это руководство создано в рамках WAI Technical Activity. Цели рабочей группы WCAG объяснены в ее уставе.

Список текущих рекомендаций W3C и других технических документов вы можете найти по адресу http://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 также включает следующие возможности пользовательского контроля:

• Системные цвета (для свойств color, background-color, border-color и outline-color) и шрифты (для font) означают, применяют к веб-документу настройки системы пользователя.
• Динамические обводки (свойство outline) позволяют пользователям (например, с плохим зрением) создавать вокруг контента рамки, которые не влияют на верстку, но подсвечивают информацию.

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

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

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

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

Приёмы:

• Для установки размеров шрифта используйте единицу измерения em.
• Используйте относительные единицы измерения и процентные отношения. CSS позволяет вам использовать относительные единицы даже в абсолютном позиционировании. Таким образом, вы можете поместить изображение на расстоянии 3em от верхней границы содержащего его элемента. Это фиксированное расстояние, но оно зависит от текущего размера шрифта, так что размер шрифта успешно меняется.
• Используйте абсолютные единицы измерения, только если известны физические характеристики выходных объектов (например, как в случае с растровыми изображениями).

H1 { font-size: 2em }

H1 { font-size: 12pt }

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

.businesscard { font-size: 8pt }

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

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

• 3.1. Если для представления информации имеется соответствующий язык разметки, используйте его, а не изображения [II приоритет].
• 6.1. организуйте документы таким образом, чтобы их можно было читать без таблиц стилей [I приоритет].

Приёмы:

• Предоставьте текстовый заменитель для любого важного изображения или текста, созданного таблицами стилей (например, при помощи свойств background-image, list-style или content).
• Убедитесь, что важный контент появляется в объекте документа. Созданный стилями текст не является частью исходного кода и не будет доступен вспомогательным технологиям, которые работают с контентом через объектную модель документа первого уровня [DOM1].

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

• Псевдоэлементы :before и :after, свойство content в сочетании позволяют авторам вставлять маркеры (например, счетчики и постоянные строки вроде «Конец примера» в примерах ниже) до или после содержимого элемента.
• Свойства cue, cue-before и cue-after позволяют пользователям воспроизводить звуки до и после содержимого элемента.
• Стили списков позволяют размечать их номерами, символами, изображениями (обычно, связанными с элементом HTML LI); CSS2 добавляет дополнительные стили к тем, что определены в CSS1, см. свойства list-style-type и content.

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

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

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

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

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

5. Шрифты

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

Приёмы:

• Всегда указывайте общий шрифт в качестве запасного варианта.
• Для задания свойств шрифта вместо устаревших элементов и атрибутов представления, используйте свойства CSS font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, и font-weight.
• Для задания информации о цвете используйте свойства CSS2 font, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant и font-weight.
• Не используйте устаревшие элементы и атрибуты HTML: FONT, BASEFONT, face и size.
• Если для контроля информации о шрифтах вы должны использовать элементы HTML, используйте BIG и SMALL, которые не считаются нежелательными.

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:

• Для регистра — text-transform (верхний, нижний и написание с большой буквы).
• Эффект тени: text-shadow.
• Подчеркивания, мигание: text-decoration.

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

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

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

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

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

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

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

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

• Отступ: text-indent. Не используйте BLOCKQUOTE или любой другой структурный элемент для создания текстового отступа.
• Расстояние между буквами и словами: letter-spacing, word-spacing. Например, вместо того, чтобы писать «П Р И В Е Т» (что пользователи, в основном, воспримут как слово «привет», но услышат как отдельные буквы), авторам следует создать тот же визуальный эффект при помощи свойства word-spacing, примененного к тексту «ПРИВЕТ». Текст без пробелов будет более эффективно преобразован в речь.
• Пробелы: white-space влияет на обработку пробелов в содержимом элемента.
• Направление текста: direction, unicode-bidi.
• Псевдоэлементы :first-letter и :first-line позволяют ссылаться на первую букву и первую строку абзаца.

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

<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 Цветовой контраст

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

• 2.2. Убедитесь, что сочетание цветов фона и переднего плана дают достаточный контраст при просмотре людьми с ослабленным восприятием цвета или на черно-белом экране [II приоритет для изображений, III приоритет для текста].

Приёмы:

• Используйте числовые значения, а не названия цветов.

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

H1 {color: red}

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

• color для цвета текста,
• background-color для цвета фона,
• border-color, outline-color для цветов рамок;
• для цветов ссылок обратитесь к псевдоклассам :link, :visited, :active.

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

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

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

• 2.1 Убедитесь, что вся информация, представленная цветом, также доступна без цвета, например, из контекста или разметки [I приоритет].

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

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

• они обводятся рамкой,
• они используют другой цвет фона,
• они начинаются со слов «Пример» или «Плохой пример»,
• они завершаются фразой «Конец примера», но она скрыта по умолчанию правилом display: none. Для пользовательских агентов, которые не поддерживают таблицы стилей, или где таблицы стилей отключены, этот текст поможет установить конец примера для читателей, которые не могут видеть рамку вокруг примера.

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

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

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

• 3.6. Разметьте верно списки и элементы списков [II приоритет].
• 13.2. Предоставьте метаданные, чтобы добавить семантическую информацию к страницам и сайтам [II приоритет].

Разработчикам контента рекомендуется использовать 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. Разметка, расположение, слои и выравнивание

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

• 3.3. Используйте таблицы стилей для контролирования верстки и представления [II приоритет].
• 5.3. Не используйте таблицы для верстки, если табличное разбиение не имеет смысла. Иначе предоставьте альтернативную версию, где не используются таблицы [II приоритет].

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

• text-indent, text-align, word-spacing, font-stretch позволяют контролировать отступы без добавления их в разметку. Используйте text-align: center вместо устаревшего элемента CENTER.
• margin, margin-top, margin-right, margin-bottom, margin-left могут создавать пробелы по четыре стороны от содержимого элемента без использования неразрывных пробелов ( ).
• float, position, top, right, bottom, left могут управлять визуальным расположением практически каждого элемента независимо от того, где он указан в документе. Авторам следует создавать документы, которые передают смысл и без таблиц стилей (то есть, содержимое должно следовать в логическом порядке), и потом уже применять стили для достижения визуальных эффектов. Свойства позиционирования могут быть использованы для создания примечаний на полях (которые можно автоматически нумеровать), боковых панелей, эффектов кадров, простых заголовков и колонтитулов, и т. д.
• Свойство empty-cells позволяет рисовать рамки вокруг пустых ячеек таблиц; пустые ячейки не должны заполняться пробелами лишь для создания визуальных эффектов.

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 для определения стилей рамок:

• border, border-width, border-style, border-color.
• border-spacing и border-collapse для таблиц.
• outline, outline-color, outline-style, и outline-width для динамических обводок.

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

<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" target="_blank" href="next.html">[Следующая страница]</A>
 <A rel="Previous" rel="nofollow" target="_blank" href="previous.html">[Предыдущая страница]</A>
 <A rel="First" rel="nofollow" target="_blank" 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>

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

Когда таблицы стилей не применены, весь текст появляется в одной строке слов «Продукты Адреса Телефоны Компьютеры Переносные 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:

• volume определяет громкость произносимого текста.
• speak определяет, будут ли произнесены слова и как они будут произнесены.
• pause, pause-before и pause-after задает паузы до и после произнесения содержимого. Это позволяет разделять содержимое для лучшего восприятия.
• cue, cue-before и cue-after определяет звук, воспроизводимый до и после контента, который может служить для ориентирования пользователя (во многом как визуальное изображение).
• play-during определяет фоновые звуки при воспроизведении элемента (во многом это напоминает фоновые изображения).
• azimuth и elevation задают характеристики звука, по которым пользователи, например, могли бы различать голоса.
• speech-rate, voice-family, pitch, pitch-range, stress и richness определяют качество произносимого текста. Подстроив эти параметры, можно четко определить манеру звукового представления.
• speak-punctuation и speak-numeral задают, как будут произноситься числа и знаки пунктуации, что влияет на качество восприятия звукового представления.

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

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

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

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

• селекторы атрибутов.
• функция attr() и свойство content
• псевдоэлементы :before и :after

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

IMG:after {
 content: attr(alt)
 }

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

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

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

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

18. Ссылки

Последние версии любой спецификации W3C можно найти в перечне технических отчетов W3C по адресу http://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 http://www.w3.org/TR/1999/REC-CSS1-19990111. The latest version of CSS1 is available at http://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 http://www.w3.org/TR/1998/REC-CSS2-19980512/. The latest version of CSS2 is available at http://www.w3.org/TR/REC-CSS2.

[WCAG10]

«Web Content Accessibility Guidelines 1.0», W. Chisholm, G. Vanderheiden, and I. Jacobs, eds., 5 May 1999. This WCAG 1.0 Recommendation is http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/.

[WCAG10-TECHS]

«Techniques for Web Content Accessibility Guidelines 1.0», W. Chisholm, G. Vanderheiden, I. Jacobs, eds. This document explains how to implement the checkpoints defined in "Web Content Accessibility Guidelines 1.0". The latest draft of the techniques is available at http://www.w3.org/TR/WCAG10-TECHS/.

19. Ресурсы

19.1. Другие руководства

[UWSAG]

"The Unified Web Site Accessibility Guidelines", G. Vanderheiden, W. Chisholm, eds. The Unified Web Site Guidelines were compiled by the Trace R & D Center at the University of Wisconsin under funding from the National Institute on Disability and Rehabilitation Research (NIDRR),  U.S. Dept. of Education.

19.2. Ресурсы по доступности контента

[LIGHTHOUSE]

Lighthouse предоставляет информацию о доступных цветах и контрастах.

20. Благодарности

Сопредседатели рабочей группы WCAG:

Jason White, University of Melbourne

Gregg Vanderheiden, Trace Research and Development

Связь с командой W3C:

Wendy Chisholm

Мы хотим поблагодарить людей, уделивших свое время и оставивших ценные комментарии в процессе разработки этого документа:

Harvey Bingham, Kevin Carey, Chetz Colwell, Neal Ewers, Geoff Freed, Al Gilman, Larry Goldberg, Jon Gunderson, Eric Hansen, Phill Jenkins, Leonard Kasday, George Kerscher, Marja-Riitta Koivunen, Josh Krieger, Chuck Letourneau, Scott Luebking, William Loughborough, Murray Maloney, Charles McCathieNevile, MegaZone (Livingston Enterprises), Masafumi Nakane, Mark Novak, Charles Oppermann, Mike Paciello, David Pawson, Michael Pieper, Greg Rosmaita, Liam Quinn, Dave Raggett, T.V. Raman, Robert Savellis, Jutta Treviranus, Steve Tyler, Jaap van Lelieveld.