Alt- oder Titelattribut für i-Tag

Ich benutze font-awesome und zeige ihre Schriften so an:

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

Dies zeigt ein schönes kleines Schlosssymbol an. Damit der Benutzer genau weiß, was das bedeutet, habe ich versucht, Attribute wie title und alt hinzuzufügen, aber ohne Erfolg.

Gibt es ein Attribut, das ich für das <i>Tag verwenden kann, das dieselbe Aufgabe wie alt für Bilder und den Titel für Links ausführt?

Sie können das titleAttribut für ein iElement verwenden, wie für jedes Element, z

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

Ob es hilft, ist eine schwierigere Frage. Browser zeigen den titleAttributwert normalerweise als "Tooltip" beim Mouseover an, aber warum sollte der Benutzer mit der Maus über das Symbol fahren? Und solche Tooltips sind von geringer Benutzerfreundlichkeit. Sogenannte CSS-Tooltips funktionieren oft besser.

Screenreader gewähren dem Benutzer möglicherweise optionalen Zugriff auf titleAttribute, aber ich bin mir nicht sicher, was sie mit Elementen mit leerem Inhalt tun.

Mit dem Fortschritt von WAI-ARIA sollten Sie bei der Verwendung von Schriftsymbolen wahrscheinlich eine Kombination der folgenden Elemente verwenden, um die Barrierefreiheit zu verbessern:

• Die Rollenpräsentation zum Entfernen der impliziten nativen Rollensemantik des Elements. Dies ist besonders wichtig, wenn Sie (ab) ein Element mit einer nativen Semantik verwenden, um Symbole bereitzustellen, wie dies in Ihrem Beispiel der Fall ist, wenn Sie das i- Element verwenden (das gemäß den Spezifikationen "eine Textspanne mit einer alternativen Stimme darstellt oder Stimmung [...] " ).
• Eine Arie-Label einen String - Wert zur Verfügung zu stellen, die das Element Etiketten -oder einer nativen HTML - Titel - Attribut , wenn Sie OK mit dem Browser angezeigt wird ein Tooltip, wenn schwebte.
• Ein arienverstecktes Attribut zum Ausblenden generierter Inhalte vor Hilfstechnologien (da Sie eine Symbolschriftfamilie verwenden, gibt es ein generiertes Zeichen: vor oder nach). Nach den Angaben:

Autoren KÖNNEN mit Vorsicht aria-hidden verwenden , um sichtbar gerenderte Inhalte nur dann vor unterstützenden Technologien zu verbergen, wenn durch das Ausblenden dieser Inhalte die Benutzererfahrung unterstützender Technologien verbessert werden soll, indem redundante oder fremde Inhalte entfernt werden. Autoren, die aria-hidden verwenden, um sichtbare Inhalte vor Screenreadern zu verbergen, MÜSSEN sicherstellen, dass identische oder gleichwertige Bedeutungen und Funktionen unterstützenden Technologien ausgesetzt sind.

Ich kenne Ihren genauen Anwendungsfall nicht, daher erlaube ich mir, den einfacheren Fall der Angabe einer Telefonnummer zu verwenden. In absteigender Reihenfolge der Präferenzen würde ich verwenden:

<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`)

Bitte beachten Sie, dass die Attribute aria-label und title den Inhalt des Elements beschreiben sollten . Nicht das nächste Geschwisterelement. Also ich wie die folgende Lösung fühlen , ist nicht mit den Spezifikationen gemäß (auch wenn die meisten Eingabehilfen tatsächlich das gleiche beobachtbare Verhalten , als ob die Telefonnummer tatsächlich innerhalb der waren hätte spanElement):

<span class="icon-phone" 
  title="Our phone number"></span>+33 7 1234576

Sie sollten <span>stattdessen etwas in diese Richtung verwenden. Sie können das title=""Attribut verwenden, um beim Schweben Text zu geben, wenn Sie danach suchen. In Bezug auf die Zugänglichkeit für Screenreader oder den SEO-Wert können Sie das folgende CSS hinzufügen:

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

Und dann schreibe dein Markup so:

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

<i>Tags dienen zum Markieren von Text. Sie ändern die semantische Bedeutung dieses Tags in etwas, das mit Kursivschrift nichts zu tun hat (und selbst das Kursivschrift-Tag ist eine schlechte Idee). Sie sollten stattdessen ein SPANverwenden.

Kursive Elemente unterstützen keine altAttribute, IMGElemente jedoch. Wenn Sie ein ALTAttribut möchten , verwenden Sie ein Bild.

Ich denke, die Rolle für Schriftarten, die sich wie Bilder verhalten, sollte role = "img" vorbehalten sein. Dies kann dann mit aria-label = "alt-text" verwendet werden. Es funktioniert aufgrund des ARIA Accessible Name-Algorithmus. Siehe: Arientechniken mit Img-Rolle .