CSS-контент и устройства для чтения с экрана (JAWs)

Question

Я использую CSS-контент для создания значков из набора шрифтов. Проблема в том, что читатели экрана, особенно JAW, тоже читают контент!

Так следующее:

<span class="uxf-icon uxf-search"></span> 

и:

.uxf-search::before { 
    content: ";" 
} 

Так читатель экран фактически считаны "точка с запятой". Есть ли способ предотвратить это? Я понимаю, что говорят: ни один тег CSS на самом деле не работает!

Answer 1

Считыватели экрана адаптировали теперь прочитанный CSS-контент. Комментарии по вашему вопросу дают хорошие отзывы (даже с 2013 года и с некоторыми обновлениями для JAWS с тех пор). Обратите внимание, что если вы используете сторонний шрифт значка, то вы не можете контролировать, живут ли эти значки в области частного использования Unicode.

Шрифт Awesome использует ту же технику, что и в вашем примере, и поймал какую-то флэку только за вопрос, который вы цитируете. В результате, Font Awesome came up with an accessibility page, который может пригодиться вам.

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

иконки, используемые для чистого украшения или визуальный стиль

Если вы используете значок, чтобы добавить дополнительное украшение или брендинг, его не нужно анонсировать пользователям, так как они ориентируются на ваш сайт или приложение. Кроме того, если вы используете значок для визуального повторного подчеркивания или добавления стиля в контент, уже присутствующий в вашем HTML, его не нужно повторять для пользователя, использующего вспомогательные технологии. Вы можете убедиться, что это не прочитано, добавив aria-hidden="true" к вашей разметке шрифта Awesome.

<i class="fa fa-fighter-jet" aria-hidden="true"></i> 

значок используется в качестве чистого украшения

<h1 class="logo"> 
    <i class="fa fa-pied-piper" aria-hidden="true"></i> 
    Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller 
</h1> 

икону используется в качестве логотипа

<a href="https://github.com/FortAwesome/Font-Awesome"><i class="fa fa-github" aria-hidden="true"></i> View this project's code on Github</a> 

значок используется перед текстом ссылки

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