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

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

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

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

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

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

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

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

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

С развитием 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

<span>Вместо этого вы должны использовать или что-то в этом роде. Вы можете использовать title=""атрибут для добавления текста при наведении курсора, если это то, что вы ищете. Что касается обеспечения доступности программ чтения с экрана или ценности SEO, вы можете добавить следующий CSS:

.icon-lock{
    text-indent:-99999px;
}

А затем напишите свою разметку так:

<span class="icon-lock">What I want the screen reader to say</span>

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

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

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