Я использую font-awesome и показываю их шрифты вот так:
<i class="icon-lock"></i>
Появится красивый маленький символ замка. Чтобы пользователь знал, что именно это означает, я попытался добавить такие атрибуты, как title и alt, но безрезультатно.
Есть ли какой-нибудь атрибут, который я могу использовать для <i>
тега, который выполняет ту же задачу, что и alt для изображений и title для ссылок?
html
tags
font-awesome
Weltschmerz
источник
источник
.sr-only
отдельный<span>
.Ответы:
Вы можете использовать
title
атрибут вi
элементе, как любой элемент, например<i class="icon-lock" title="This symbolizes your being locked inside"></i>
Помогает ли это - вопрос более сложный. Браузеры обычно показывают
title
значение атрибута как «всплывающую подсказку» при наведении курсора мыши, но зачем пользователю наводить курсор на значок? И такие всплывающие подсказки неудобны; так называемые подсказки CSS часто работают лучше.Программы чтения с экрана могут предоставлять пользователю дополнительный доступ к
title
атрибутам, но я не уверен, что они делают с элементами с пустым содержимым.источник
title
обычно читается, даже без содержимого, при условии, что сам элемент можно выбрать<i>
теги обычно не могут быть выбраны, если вы не добавите к ним tabIndex.title
атрибут будет работать, а может быть, нет, кто знает? " было сочтено достаточно хорошим, чтобы проголосовать 120 человек, иллюстрирует формальные усилия, которые поддержка программ чтения с экрана получает от большинства веб-разработчиков (я признаю, в том числе). Как профессия, мы должны выяснить, как решать эти проблемы более строго, чем это.title
визуально скрытому тексту (например,.sr-only
класс в Bootstrap). См. Хорошие примеры здесь: fontawesome.com/how-to-use/on-the-web/other-topics/…С развитием WAI-ARIA при использовании значков шрифтов вам, вероятно, следует использовать комбинацию следующего для улучшения доступности:
Я не знаю вашего точного варианта использования, поэтому беру на себя смелость использовать более простой случай предоставления номера телефона. В порядке убывания предпочтения я бы использовал:
<span aria-label="Our phone number"> <span class="icon-phone" aria-hidden="true"></span> +33 7 1234576 </span> (or any variation implying: - an `i` element with a `role` presentation attribute instead of the inner `span` element - a `title` attribute instead of an `aria-label` attribute)
<span class="icon-phone" aria-label="Our phone number">+33 7 1234576</span> (or any variation using `title` instead of `aria-label`)
<i class="icon-phone" role="presentation" aria-label="Our phone number">+33 7 1234576</i> (or any variation using `title` instead of `aria-label`)
Обратите внимание, что атрибуты aria-label и title должны описывать содержимое элемента. Не следующий родственный элемент. Поэтому я чувствую, что следующее решение не соответствует спецификациям (даже если большинство инструментов обеспечения доступности фактически будут иметь такое же наблюдаемое поведение, как если бы номер телефона действительно находился внутри
span
элемента):<span class="icon-phone" title="Our phone number"></span>+33 7 1234576
источник
<span>
Вместо этого вы должны использовать или что-то в этом роде. Вы можете использоватьtitle=""
атрибут для добавления текста при наведении курсора, если это то, что вы ищете. Что касается обеспечения доступности программ чтения с экрана или ценности SEO, вы можете добавить следующий CSS:.icon-lock{ text-indent:-99999px; }
А затем напишите свою разметку так:
<span class="icon-lock">What I want the screen reader to say</span>
источник
<i>
не устарела в HTML 4.01.<u>
и<s>
были, я всегда ловлю себя на мысли, что<b>
и<i>
были, тем более что у них есть<em>
и<strong>
, но вы абсолютно правы.<i>
теги предназначены для разметки текста. Вы меняете семантическое значение этого тега на то, что не имеет никакого отношения, используя курсив (и даже курсивный тег - плохая идея). Вы должны использоватьSPAN
Вместо этого .Элементы курсивом не поддерживают
alt
атрибуты,IMG
элементы поддерживают . Если вам нуженALT
атрибут, используйте изображение.источник
<i>
, поэтому вы, вероятно, должны сказать, что пойдет не так, если вы сделаете это таким образом. Использование чего-либо (в данном случае<i>
) не предназначенным изначально способом сопряжено с риском, но в данном случае этот риск был смягчен тем фактом, что тысячи авторитетных сайтов с сотнями миллионов пользователей уже используют font-awesome.Я думаю, что роль шрифтов, которые действуют как изображения, следует оставить за role = "img". Затем это можно использовать с aria-label = "alt-text". Это работает благодаря алгоритму доступного имени ARIA. См .: Методы Арии с использованием Img Role .
источник