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

Я використовую чудовий шрифт і відображаю їх шрифти так:

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

Це відобразить приємний маленький символ замка. Щоб користувач знав, що саме це означає, я спробував додати такі атрибути, як title і alt, але безуспішно.

Чи є якийсь атрибут, який я можу використовувати для <i>тегу, який виконує те саме завдання, що і alt для зображень та заголовка для посилань?

Ви можете використовувати titleатрибут на iелементі, як будь-який елемент, наприклад

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

Чи це допомагає, є складнішим питанням. Браузери зазвичай показують titleзначення атрибута як “підказку” під час наведення курсора миші, але чому користувач наводить мишу на піктограму? І такі підказки погано використовуються; так звані підказки CSS часто працюють краще.

Зчитувачі екрану можуть надавати користувачеві необов’язковий доступ до titleатрибутів, але я не впевнений, що вони роблять з елементами з порожнім вмістом.

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

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

Автори МОЖУТЬ із обережністю використовувати прихований за допомогою aria приховування видимо відтвореного вмісту від допоміжних технологій лише в тому випадку, якщо приховування цього вмісту має на меті покращити роботу користувачів допоміжних технологій шляхом видалення зайвого або стороннього вмісту. Автори, які використовують 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. Див .: Техніка Aria з використанням ролі Img .