Атрибут alt или title для тега i

83

Я использую font-awesome и показываю их шрифты вот так:

<i class="icon-lock"></i>

Появится красивый маленький символ замка. Чтобы пользователь знал, что именно это означает, я попытался добавить такие атрибуты, как title и alt, но безрезультатно.

Есть ли какой-нибудь атрибут, который я могу использовать для <i>тега, который выполняет ту же задачу, что и alt для изображений и title для ссылок?

Weltschmerz
источник
1
Многие сайты FontAwesome также используют Bootstrap. Если да, используйте .sr-onlyотдельный <span>.
rybo111
Хороший пример с визуально скрытым внутренним текстом: fontawesome.com/how-to-use/on-the-web/other-topics/…
Hrvoje Golcic

Ответы:

154

Вы можете использовать titleатрибут в iэлементе, как любой элемент, например

<i class="icon-lock" title="This symbolizes your being locked inside"></i>

Помогает ли это - вопрос более сложный. Браузеры обычно показываютtitle значение атрибута как «всплывающую подсказку» при наведении курсора мыши, но зачем пользователю наводить курсор на значок? И такие всплывающие подсказки неудобны; так называемые подсказки CSS часто работают лучше.

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

Юкка К. Корпела
источник
1
titleобычно читается, даже без содержимого, при условии, что сам элемент можно выбрать
Майк
обратите внимание, что <i>теги обычно не могут быть выбраны, если вы не добавите к ним tabIndex.
dandavis
Я добавил заголовок в свой значок fa <i class = "fa fa-info-circle" aria-hidden = "true" title = "heeeeeelp"> </i>, но не работает
GomuGomuNoRocket
4
Нас должно беспокоить то, что это стало общепринятым и высоко оцененным, когда это в основном дикая спекуляция со стороны Юкки. Я не говорю, что Юкка был неправ, чтобы опубликовать его, или что наличие этого ответа вредит, но я думаю, что тот факт, что ответ сводится к «Эх, может быть, titleатрибут будет работать, а может быть, нет, кто знает? " было сочтено достаточно хорошим, чтобы проголосовать 120 человек, иллюстрирует формальные усилия, которые поддержка программ чтения с экрана получает от большинства веб-разработчиков (я признаю, в том числе). Как профессия, мы должны выяснить, как решать эти проблемы более строго, чем это.
Марк Эмери
3
Не лучшая практика с точки зрения доступности . Не все программы чтения с экрана будут читать атрибут title, если элемент хоста изначально не настраивается (например, кнопка, привязка). Рекомендуется добавить в дополнение к titleвизуально скрытому тексту (например, .sr-onlyкласс в Bootstrap). См. Хорошие примеры здесь: fontawesome.com/how-to-use/on-the-web/other-topics/…
Hrvoje Golcic
13

С развитием WAI-ARIA при использовании значков шрифтов вам, вероятно, следует использовать комбинацию следующего для улучшения доступности:

  • Роль презентация , чтобы удалить неявную нативную роль семантику элемента. Это особенно важно, если вы (ab) используете элемент с собственной семантикой для предоставления значков, как это имеет место в вашем примере с использованием элемента i (который, согласно спецификациям, «представляет собой отрезок текста альтернативным голосом. или настроение [...] " ).
  • Ария метки , чтобы обеспечить строковое значение , которое помечает элемент -или- нативного HTML заголовка атрибута , если вы хорошо с браузером отображаются подсказки при наведении указателя мыши.
  • Ария-скрытый атрибут , чтобы скрыть генерируемое содержимое из вспомогательных технологий (как вы используете семейство шрифтов значка, есть сгенерированный характер: перед тем из: после). Согласно спецификациям:

Авторы МОГУТ с осторожностью использовать aria-hidden, чтобы скрыть визуально отображаемый контент от вспомогательных технологий, только если действие сокрытия этого контента предназначено для улучшения работы пользователей вспомогательных технологий путем удаления избыточного или постороннего контента. Авторы, использующие aria-hidden для сокрытия видимого содержимого от программ чтения с экрана, ДОЛЖНЫ гарантировать, что идентичное или эквивалентное значение и функции доступны вспомогательным технологиям.


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

<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
Сильвен Леру
источник
7

<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.
Джим
2
Вы правы ... учитывая, что <u>и <s>были, я всегда ловлю себя на мысли, что <b>и <i>были, тем более что у них есть <em>и <strong>, но вы абсолютно правы.
Крис Соболевски
3

<i>теги предназначены для разметки текста. Вы меняете семантическое значение этого тега на то, что не имеет никакого отношения, используя курсив (и даже курсивный тег - плохая идея). Вы должны использоватьSPANВместо этого .

Элементы курсивом не поддерживают altатрибуты, IMGэлементы поддерживают . Если вам нужен ALTатрибут, используйте изображение.

Диодей - Джеймс Макфарлейн
источник
Инструкции font-awesome говорят вам использовать <i>, поэтому вы, вероятно, должны сказать, что пойдет не так, если вы сделаете это таким образом. Использование чего-либо (в данном случае <i>) не предназначенным изначально способом сопряжено с риском, но в данном случае этот риск был смягчен тем фактом, что тысячи авторитетных сайтов с сотнями миллионов пользователей уже используют font-awesome.
cesoid 07
2

Я думаю, что роль шрифтов, которые действуют как изображения, следует оставить за role = "img". Затем это можно использовать с aria-label = "alt-text". Это работает благодаря алгоритму доступного имени ARIA. См .: Методы Арии с использованием Img Role .

NoseToThePage
источник