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

Ответ 1

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

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

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

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

Ответ 2

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

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

И затем напишите свою разметку следующим образом:

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

Ответ 3

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

• Роль presentation для удаления неявной семантики родной роли элемента. Это особенно важно, если вы (ab) используете элемент с родной семантикой для создания значков, как это имеет место в вашем примере, используя i (который, согласно спецификациям), представляет собой диапазон текста в альтернативном голосе или настроении [...] ").
• aria-label, чтобы предоставить строковое значение, которое маркирует элемент -или- собственный HTML title, если вы в порядке с браузером, отображающим всплывающую подсказку при зависании.
• 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

Ответ 4

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

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