Как настроить шрифт Брайля/скрининга через CSS

Я использую webfont для отображения некоторых значков на веб-сайте. Это фантастика, потому что они масштабируются, и я могу напечатать их, если захочу... Но проблема в том, что слепые люди видят в них обычные буквы или символы. Следующий пример возвращает мне приятный значок + текст.

<span>i</span> Info
<span>t</span> Contact
etc...

Слепой будет просто читать: iInfo, tContact и т.д.

Возможно ли каким-то образом ориентироваться только на брайлевские и экранные программы с CSS?

Я нашел это на веб-сайте w3, но я не уверен, что работа в реальной жизни: http://www.w3.org/TR/CSS2/media.html#media-types

Есть ли у кого-нибудь опыт?

------ Обновление -----

:before и :after → Некоторые экраны, такие как VoiceOver для MacOS, действительно читают часть контента. Я испытал это сам.

@media braille, speech → Швы не влияют на VoiceOver. Он читает то, что видно на экране (проверено сафари и хром)

speak: none; → не имеет никакого влияния на VoiceOver или NVDA (https://twitter.com/#!/jcsteh/status/143848614979055616)

ОТВЕТЫ

Ответ 1

Я думаю, что нет "окончательного решения". Но вы можете использовать abbr-tag, чтобы описать использование вашего шрифта char, поэтому большинство экранных считывателей считывают заголовок-параметр abbr, и пользователь получает значение символа-значка.

Я не уверен на 100%, но поскольку он швыряет NVDA, JAWS и VoiceOver для iOS, это работает - на Mac OS X (к сожалению) не...

Пример:

<abbr title="Attachment Icon">A</abbr>

Ответ 2

Вы не одиноки в том, чтобы задаваться вопросом о проблемах доступности здесь. Там много дискуссий об этом в недавней статье 24Ways о отображении значков с шрифтами и атрибутами данных. Предложение Jon Hicks состоит только в том, чтобы генерировать ваш диапазон, используя: перед псевдоэлементом, который не подхвачен большинством экранных считывателей (я считаю, что Apple VoiceOver может быть исключением, но все равно проверять его во всех ваших целевых браузерах), Таким образом, зрячие пользователи получат значок и текст, а вспомогательные браузеры получат только текст.

Отредактировано для добавления: я не пробовал этот метод самостоятельно, но он кажется довольно простым и предсказуемым.

Ответ 3

Вы можете закодировать его следующим образом:

<span class="icon">i<span class="audio-description"> icon</span></span> Info
<span class="icon">t<span class="audio-description"> icon</span></span> Contact

со следующим CSS:

.audio-description 
{
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media speech
{
    .icon
    {
        display: none;
        speak: none;
    }
}

Это добавляет описание для каждого значка, который может быть прочитан устройством чтения с экрана, но перемещает его с экрана, чтобы он не отображался в стандартный веб-браузер.

Преимущество этого заключается в том, что он должен грациозно деградировать:

  • в стандартном веб-браузере, ваш значок должен отображаться так же, как сейчас (если CSS не отключен, в этом случае зритель увидит дополнительный текст значка)
  • в программе чтения с экрана, которая соответствует @media speech, значок не должен вообще считаться
  • в устройстве чтения с экрана, которое не соответствует @media speech, значок должен быть считан как i icon и т.д.

Кроме того, поскольку перемещение содержимого с экрана, по-видимому, является общим подходом к предоставлению альтернативного текста для экранных читателей, маловероятно, что это решение внезапно нарушится (т.е. читатели с экрана, скорее всего, не скажут часть icon, даже если он был сдвинут в крайнее левое положение).