Могу ли я предотвратить: после того, как псевдоэлемент будет прочитан читателями экрана?

Обратите внимание на следующую разметку:

<label class="required" for="email-address">Email Address <span class="audible">Required</span></label>
<input type="text" id="email-address" placeholder="[email protected]">

Наряду с этим у меня есть следующий css...

   .required:after {
      color: red
      content: "*";
      ......
    }

Когда я фокусирую поле, читатель экрана читает: "Адрес электронной почты требуется" звезда ". Я бы хотел сделать это с помощью css только для отображения визуального *, но я не хочу, чтобы это читали читатели экрана?

Или иначе это достаточно распространенная вещь, что нападающие и пользователи игнорируют звезду или задают настройки. И.Е. Не настоящая проблема?

Есть ли какой-либо возможный способ?

Ответы

Ответ 1

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

@media reader, speech, aural {
    .required:after {
        display: none;
        visibility: hidden;
    }
}

Обновление:

Поскольку поддержка моего первоначального решения, похоже, не настолько хороша, я подумал об альтернативе. Мне пришло в голову, что единственный способ удостовериться, что его не прочитал программа чтения с экрана (без дополнительной разметки), - это вовсе не иметь звездочки! Однако вы можете добавить изображение css, чтобы оно выглядело как звездочка:

.required:after {
    content:'';
    display: inline-block;
    width: .5em;
    height: .5em;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/b/b5/Asterisk.svg);
    background-size: .5em .5em;    
    vertical-align: top;
    margin-left: .15em;
    margin-top: .1em;
}

http://jsfiddle.net/3a1dvdag/

Ответ 2

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

Вышеприведенное решение, данное @Sam, в ближайшем будущем будет лучшим вариантом. Пока нет браузеров, у которых есть медиа-запрос @media aural, speech, поэтому, если вы его предоставите, он будет работать только в ближайшем будущем.

Есть ли другой способ скрыть псевдоэлементы из программы чтения с экрана?

Да, с ограничениями. Вы можете использовать символ персональный набор Unicode для частного использования". Поскольку персонажи используются в частных целях, устройства чтения с экрана не могут произносить их и, следовательно, игнорировать символ.

Если это не вариант, попробуйте привязать к ним элементы <span> или <i> с aria-hidden="true". Это не так чисто, как псевдоэлементы, но, по крайней мере, вы полностью контролируете контент.

<button type="button">
    <span class="i i-arrow-down" aria-hidden="true">Label
</button>

Ответ 3

Если вы используете отдельный интервал для своего значка, вы можете применить скрытый тег aria, чтобы предотвратить чтение прошивок. Я не уверен, что это за поддержка.

<label class="required" for="email-address">Email Address 
<span class="icon" aria-hidden="true"></span>
<span class="audible">Required</span>  </label>
<input type="text" id="email-address" placeholder="[email protected]">

Дополнительная информация в спецификации W3C