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

Резюме

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

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

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

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

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

Системные цвета (для свойств 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 от верхней границы содержащего его элемента. Это фиксированное расстояние, но оно зависит от текущего размера шрифта, так что размер шрифта успешно меняется.
Используйте абсолютные единицы измерения, только если известны физические характеристики выходных объектов (например, как в случае с растровыми изображениями).

Пример.

Используйте em для установки размеров шрифта, например:

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.

Примечание. Если используется мигающий контент (например, заголовок, появляющийся и пропадающий через одинаковые промежутки времени), предоставьте способ остановки мигания. В CSS мигание задается с text-decoration: blink и может отменяться при помощи переопределения правил в пользовательских таблицах стилей. Не используйте элементы BLINK и MARQUEE — они не входят ни в одну спецификацию HTML от W3C (то есть, не являются стандартными).

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

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

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

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

Пример.

В этом примере вставленное изображение показывает большие красные буквы «пример», и сделано доступным при помощи атрибута alt.

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

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

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

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

Отступ: text-indent. Не используйте BLOCKQUOTE или любой другой структурный элемент для создания текстового отступа.
Расстояние между буквами и словами: letter-spacing, word-spacing. Например, вместо того, чтобы писать «П Р И В Е Т» (что пользователи, в основном, воспримут как слово «привет», но услышат как отдельные буквы), авторам следует создать тот же визуальный эффект при помощи свойства letter-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>

Примечание. На момент написания документа псевдоэлемент CSS :first-letter не поддерживается широко.

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 могут создавать пробелы по четыре стороны от содержимого элемента без использования неразрывных пробелов (&nbsp;).
float, position, top, right, bottom, left могут управлять визуальным расположением практически каждого элемента независимо от того, где он указан в документе. Авторам следует создавать документы, которые передают смысл и без таблиц стилей (то есть, содержимое должно следовать в логическом порядке), и потом уже применять стили для достижения визуальных эффектов. Свойства позиционирования могут быть использованы для создания примечаний на полях (которые можно автоматически нумеровать), боковых панелей, эффектов кадров, простых заголовков и колонтитулов, и т. д.
Свойство empty-cells позволяет рисовать рамки вокруг пустых ячеек таблиц; пустые ячейки не должны заполняться пробелами лишь для создания визуальных эффектов.

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

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

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

Плохой пример.

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

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

Пример.

В этом примере элемент H1 будет иметь красную верхнюю границу толщиной 2 пикселя, отделенную от контента на 1em:

<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 используется для создания панели навигации, включающей горизонтальный разделитель.

<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>

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

Статья по теме:  Как подключить Яндекс.Спеллер к WordPress

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


Понравилась статья? Поделиться с друзьями: