Автор:	© Михаил Шестаков
Источник:	www.akvi.ru
Дата публикации:	2009

Данный документ является переводом статьи "Accessibility Features of CSS".

Официальная версия документа существует только на сайте W3C http://www.w3.org/TR/CSS-access

Данный перевод НЕ является официальным документом W3C. Все авторские права принадлежат W3C. Данный документ может содержать ошибки перевода и опечатки.

Автор перевода: Михаил Шестаков

Возможности CSS для обеспечения доступности

W3C NOTE 4 августа 1999

Эта версия:

http://www.w3.org/1999/08/NOTE-CSS-access-19990804

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

http://www.w3.org/1999/06/NOTE-CSS-access-19990616

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

http://www.w3.org/TR/CSS-access

Редакторы:

Ian Jacobs (ij@w3.org)

Judy Brewer (jbrewer@w3.org)

Все права защищены © 1999 W3C^® (MIT, INRIA, Keio), все права защищены. К этому документу применяются правила W3C, касательно ответственности, торговых маркок, использования и лицензирования программного обеспечения.

Аннотация

Этот документ обобщает все возможности каскадных таблиц стилей CSS2 ([CSS2]), которые напрямую влияют на доступность Веб документов. Некоторые из возможностей, описанных в этом документе, были доступны так же и в CSS1 ([CSS1]). Этот документ был написан для того, чтобы другие документы могли непротиворечиво ссылаться на возможности CSS по обеспечению доступности документов.

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

Этот документ является Заметкой W3C, которая была сделана общедоступной непосредственно W3C. Эта Заметка была одобрена Web Accessibility Initiative (WAI) Education and Outreach Working Group (EOWG), the Protocols and Formats Working Group (PFWG) и the Cascading Style Sheets and Formatting Properties Working Group.

Публикация записки W3C не означает одобрения ее всеми членами W3C. Список текущих технических докладов и публикаций W3C, в том числе рабочие проекты и записки, можно найти на http://www.w3.org/TR.

Какая польза для Доступности от использования CSS

Основное преимущество для обеспечения доступности от использования CSS заключается в разделении структуры документа от его представления. Каскадные таблицы стилей были разработаны, чтобы позволить вне разметки точно контролировать такие параметры отображения документа, как расстояние между символами, выравнивание текста, позиционирование объекта на странице, управление аудио и голосовой информацей, а также характеристики шрифта и другие параметры. Отделив стиль от разметки, верстальщики могут упростить и привести в порядок свои HTML документы, делая их при этом более доступными.

CSS позволяет полностью управлять межсимвольным расстоянием, выравниванием текста и позиционированием. Это позволяет авторам избежать "неправильного использования тэгов" - практики использования семантически неправильных в контексте элементов в целях достижения желаемого визуального отображения страницы. Например, элементы BLOCKQUOTE и TABLE в HTML должны использоваться для вставки цитат и отображения табличных данных, но их часто используют для выравнивания и создания отступов. Когда специализированный браузер, такой как программа голосового синтеза Веб документов, встречает неправильно использованные элементы, он может обработать их некорректно с точки зрения человека.

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

CSS дает полный контроль над размером шрифта, цветом и стилем. Некоторые верстальщики используют картинки для отображения текста, набранного необычным шрифтом, когда они не уверены, что такой шрифт есть на машине клиента. Картинки с текстом являются недоступными как для некоторых специальных программ, таких как экранные синтезаторы речи, так и для поисковых роботов. Чтобы исправить ситуацию, в CSS есть мощное средство WebFonts, которое позволяет пользователям в гораздо большей степени контролировать отображение информации на стороне клиента. С WebFonts авторы могут рассчитывать на механизм последовательного перебора шрифтов в заданном порядке, до тех пор, пока не будет выбран шрифт, имеющийся в системе пользователя. Шрифты могут быть подставлены с большей точностью, синтезированы браузером и даже загружены из Сети.

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

CSS дает возможность автоматически генерировать номера, маркёры и другое содержимое, которое помогает пользователям ориентироваться в документе. Длинные листинги, таблицы и документы более просты для восприятия, когда в них присутствует нумерация или другие контекстные подсказки.

CSS поддерживает акустические таблицы стилей, которые определяют, как документ будет воспроизводиться при звуковом рендеринге. Звуковые таблицы стилей (или "ACSS") позволяют авторам определить громкость произносимого текста, фоновые звуки, пространственные характеристики звука и множество других свойств, добавляющих эффекты к синтезу речи, аналогичные тем, которые управляют визуальным оформлением документов.

CSS дает более точный контроль над отображением альтернативного содержимого, по сравнению с чистым HTML. Селекторы CSS2 дают доступ к значениям атрибутов, которые часто используются для передачи альтернативного содержимого. В CSS2 значения атрибутов могут быть отрендерены вместе с основным содержимым элементов.

Реализации CSS

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

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

До тех пор, пока большинство браузеров не начнут поддерживать CSS в соответствии со стандартом, верстальщики по прежнему могут создавать доступные Веб документы, смешивая поддерживаемые браузерами возможности CSS с визуальной HTML разметкой. Но все же не стоит забывать, что документы, использующие визуальные особенности рендеринга HTML должны быть сверстаны с умом. Например, табличная верстка должна адекватно отображаться в последовательном виде при рендеринге на мобильных устройствах.

Возможности CSS2 для обеспечения доступности

Ниже приведен список возможностей CSS2 по обеспечению доступности (с указанием разделов спецификации CSS2, в которых они объявлены). Разделы, следующие за списком, уточняют, каким образом эти свойства влияют на доступность.

Замечание. Названия свойств заключены в одинарные кавычки, также как это принято в спецификациях CSS1 и CSS2.

Отступы, выравнивание и позиционирование

'text-indent' (16.1); 'text-align' (16.2); 'word-spacing' и 'letter-spacing' (16.4); 'font-stretch', (15.2.3); 'margin', 'margin-top', 'margin-right', 'margin-bottom' и 'margin-left' (8.3); 'float' (9.5.1), 'position' (9.3.1); 'top', 'right', 'bottom' и 'left' (9.3.2); 'empty-cells' (17.6.1)

Приоритетный контроль пользователя над стилями

!important (6.4.1); значение 'inherit' (6.2.1); системные шрифты (15.2.5); системные цвета (18.2); типы списков (12.6.2); рамки ('outline', 'outline-width', 'outline-style' и 'outline-color') (18.4)

Генерируемое содержимое

:before/:after псевдо-элементы (5.12.3, 12.1); 'content' (12.2); 'cue', 'cue-before' и 'cue-after' (19.5)

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

'volume' (19.2); 'speak' (19.3); 'pause', 'pause-before' и 'pause-after' (19.4); 'cue', 'cue-before', 'cue-after' (19.5); 'play-during' (19.6); 'azimuth', 'elevation' (19.7); 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress' и 'richness' (19.8); 'speak-punctuation' и 'speak-numeral' (19.9)

Доступ к альтернативному содержимому

attribute selectors (5.8); the attr() function (12.2)

WebFonts

См. главу 15 спецификации CSS2.

Отступы, выравнивание и позиционирование

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

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

• 'text-indent', 'text-align', 'word-spacing', 'font-stretch'. Каждое из этих свойств позволяет контролировать отступы без необходимости использования дополнительных пробелов. Например, вместо того, чтобы писать П Р И В Е Т (что будет правильно прочитано человеком, но совершенно неправильно воспринято голосовым синтезатором речи, который прочтет это слово, как набор отдельных букв) верстальщики могут воспользоваться свойством 'word-spacing', примененным к слову "HELLO".
• 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'. Эти свойства позволяют делать отступы с каждой из четырех сторон от элемента, вместо того, чтобы использовать неразрывные пробелы ( ), что является неправильным способом создания отступов вокруг элемента.
• 'float', 'position', 'top', 'right', 'bottom', 'left'. Эти свойства позволяют управлять визуальным позиционированием практически любого элемента, независимо от того, где этот элемент расположен в документе. Тем не менее, нужно стараться сверстать документ так, чтобы он читался и без таблиц стилей (другими словами нужно верстать в "логичном" порядке) и уже после этого писать таблицы стилей для наложения визуальных эффектов. Свойства позиционирования могут быть использованы для создания заметок на полях (которые могут быть автоматически пронумерованы), боковых отступов, простых "хедеров" и "футеров" и других целей.
• Свойство 'empty-cells' позволяет присваивать пустым ячейкам таблицы рамки на экране или на бумаге. Не нужно заполнять неразрывным пробелом ячейку таблицы, которая по смыслу должна быть пустой только для того, чтобы применить к ней визуальный эффект.

Приоритетный контроль пользователя над стилями

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

P { font-size: 24pt ! important }

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

 /* 
 Устанавливает цвет белый цвет фона
 и черный цвет текста для элемента BODY
 */

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 }

Генерируемое содержимое

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

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

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

Для примера, следующая пользовательская таблица стилей будет дописывать фразу "Конец примера" в каждом блоке, имеющим класс '.example':

DIV.example:after { 
   content: End Example 
}

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

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

Звуковые каскадные таблицы стилей

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

Доступ к альтернативному представлению содержимого

CSS2 позволяет пользователям получать доступ к альтернативным представлениям содержимого, указанным в значениях атрибутов. Это можно сделать, если одновременно использовать:

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

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

IMG:after { content: attr(alt) }

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

Типы media

Типы "media" в CSS2 (используемые с правилами @media) позволяют авторам и пользователям создавать специальные таблицы стилей для более точного рендеринга документов на некоторых типах устройств. Такие таблицы стилей могут приспособить содержимое для отображения на устройствах чтения для слепых, голосовых синтезаторах речи и телетайп-устройствах. Использование "@media" правил позволят также сократить время загрузки страницы, поскольку это даст возможность браузеру не загружать те таблицы стилей, которые ему не нужны для рендеринга.

Об Инициатива по Доступности Сети

Инициатива по Доступности Сети W3C (WAI) прикладывает усилия по обеспечению доступности Сети, ведя деятельность в пяти дополнительных направлениях:

1. Гарантия поддержки доступности Веб технологиями
2. Разработка рекомендаций по доступности
3. Разработка инструментов для анализа и восстановления сайтов
4. Координирование образовательных и социально-ориентированных программ
5. Проведение исследований и разработок

Офис Международной Программы WAI позволяет заключать партнерство между промышленными организациями, организациями, занимающимися проблемами людей с ограниченными возможностями, исследованиями в области доступности Сети, а также правительственными организациями, заинтересованными в создании доступной Сети. Среди спонсоров WAI есть US National Science Foundation and Department of Education's National Institute on Disability and Rehabilitation Research; the European Commission's DG XIII Telematics for Disabled and Elderly Programme; Telematics Applications Programme for Disabled and Elderly; Government of Canada, Industry Canada; IBM, Lotus Development Corporation и NCR.

Дополнительную информация о WAI можно получить по адресу http://www.w3.org/WAI/.

О рекомендациях WAI по доступности Сети

Рекомендации по доступности Сети являются неотъемлемыми как для разработчиков сайтов, так и для разработчиков программного обеспечения для работы в Сети. Множество организаций координируют действия WAI по созданию трех наборов рекомендаций:

• Рекомендации по доступности контента в Сети 1.0 ([WAI-WEBCONTENT]) для доступных Веб сайтов.
• Рекомендации по созданию доступных пользовательских приложений для работы с Сетью ([WAI-USERAGENT]) для доступных приложений (браузеры, мультимедиа плееры и смежные приложения).
• Рекомендации по созданию доступных инструментов авторинга ([WAI-AUTOOLS]) для доступных инструментов авторинга (редакторы, системы управления сайтом, средства для преобразования и генерации контента).

О консорциуме W3C

Консорциум W3C был создан, чтобы направить развитие Сети на полную реализацию ее потенциала, путем разработки общих протоколов, которые бы подталкивали ее к развитию и обеспечивали возможность взаимодействия. Консорциум является международным, который одновременно управляется MIT Laboratory for Computer Science (LCS) в США, the National Institute for Research in Computer Science and Control (INRIA) во Франции и Keio University в Японии. Консорциум предоставляет следующие сервисы: хранилище информации о Всемирной паутине для пользователей и разработчиков; эталонные образцы кода для воплощения и продвижения стандартов; различные прототипы приложений и примеры использования новой технологии. На сегодняшний день более 320 организаций являются Участниками Консорциума. Более подробная информация о Консорциуме: http://www.w3.org/

Ссылки

Список текущих Рекомендаций W3C и другая техническая документация находятся по адресу http://www.w3.org/TR.

[CSS2]

"Cascading Style Sheets, level 2", B. Bos, H. W. Lie, C. Lilley и I. Jacobs, 17 мая 1998.

[CSS1]

"Cascading Style Sheets, level 1", H. W. Lie и B. Bos, 17 декабря 1996. Исправленное 11 января 1999.

[HTML40]

"HTML 4.0 Recommendation", D. Raggett, A. Le Hors и I. Jacobs, eds., 18 декабря 1997, исправленное 24 апреля 1998.

[XML10]

"Extensible Markup Language (XML) 1.0.", T. Bray, J. Paoli, C.M. Sperberg-McQueen, eds., 10 февраля 1998.

[WAI-AUTOOLS]

Последняя версия "Authoring Tool Accessibility Guidelines", J. Treviranus, J. Richards, I. Jacobs, C. McCathieNevile, eds.

[WAI-WEBCONTENT]

"Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden и I. Jacobs, eds., 5 May 1999

[WAI-USERAGENT]

Последняя версия "User Agent Accessibility Guidelines", J. Gunderson и I. Jacobs, eds.