it-swarm.com.de

Alt- oder Titelattribut für i-Tag

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

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

Daraufhin wird ein kleines Schlosssymbol angezeigt. Damit der Benutzer wissen kann, was genau das bedeutet, habe ich versucht, Attribute wie title und alt hinzuzufügen, jedoch ohne Erfolg.

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

65
weltschmerz

Sie können das title-Attribut wie jedes andere Element für ein i-Element verwenden, z.

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

Ob es hilft, ist ein schwierigeres Problem. Browser zeigen normalerweise den title-Attributwert als "Tooltip" beim Mouseover an, aber warum sollte der Benutzer mit der Maus über das Symbol fahren? Und solche Tooltips sind schlecht nutzbar. sogenannte CSS-Tooltips funktionieren oft besser.

Bildschirmlesegeräte geben dem Benutzer optionalen Zugriff auf title-Attribute, aber ich bin nicht sicher, was er mit Elementen mit leerem Inhalt macht.

124

Sie sollten stattdessen <span> oder etwas in dieser Richtung verwenden. Sie können das title=""-Attribut verwenden, um einen Text im Hover anzuzeigen, wenn Sie danach suchen. Soweit Sie für Screenreader oder den SEO-Wert barrierefrei sind, können Sie folgendes CSS hinzufügen:

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

Und dann schreiben Sie Ihr Markup so:

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

Mit dem Fortschritt von WAI-ARIA sollten Sie beim Verwenden von Zeichensymbolen wahrscheinlich eine Kombination der folgenden verwenden, um die Zugänglichkeit zu verbessern:

  • Die Rolle Präsentation , um die implizite native Rollensemantik des Elements zu entfernen. Dies ist besonders wichtig, wenn Sie (ab) ein Element mit einer systemeigenen Semantik verwenden, um Symbole bereitzustellen, wie dies in Ihrem Beispiel der Fall ist, indem Sie das Element i verwenden (das entsprechend den Angaben "für a steht.) alternative Textsprache oder Stimmung [...] ").
  • Ein aria-label , um einen Zeichenfolgewert bereitzustellen, der das Element -or- ein natives HTML title -Attribut kennzeichnet, wenn der Browser eine QuickInfo anzeigt, wenn er im Hover-Modus ist.
  • Ein aria-hidden -Attribut, um generierter Inhalt vor assistiven Technologien zu verbergen (da Sie eine Icon-Schriftfamilie verwenden, gibt es ein generiertes Zeichen: vor: after). Nach den spezifikationen:

Autoren KÖNNEN mit Vorsicht aria-hidden verwenden, um sichtbar gerenderte Bilder auszublenden Inhalte aus assistiven Technologien nur dann, wenn dies verborgen bleibt Inhalt soll die Erfahrung für Benutzer von assistiven .__ verbessern. Technologien durch Entfernen redundanter oder fremder Inhalte. Autoren Verwenden von aria-hidden, um sichtbaren Inhalt vor Bildschirmlesegeräten auszublenden. MUST Stellen Sie sicher, dass die identische oder äquivalente Bedeutung und Funktionalität .__ ist. assistiven Technologien ausgesetzt.


Ich kenne Ihren genauen Anwendungsfall nicht, daher erlaube ich mir, den einfacheren Fall der Angabe einer Telefonnummer zu verwenden. In abnehmender Reihenfolge der Präferenz würde I Folgendes 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 die content des Elements beschreiben sollen. Nicht das nächste Geschwisterelement. So I fühlen, wie die folgende Lösung ist k in Übereinstimmung mit den Spezifikationen (auch wenn die meisten Eingabehilfen würden tatsächlich das gleiche beobachtbare Verhalten haben, als ob die Telefonnummer innerhalb der tatsächlich waren span Element):

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

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

Kursive Elemente unterstützen keine alt Attribute, IMG Elemente tun dies. Wenn Sie ein ALT Attribut möchten, verwenden Sie ein Bild.

Ich denke, dass die Rolle für Schriftarten, die wie Bilder wirken, für role = "img" reserviert werden sollte. Dies kann dann mit aria-label = "alt-text" verwendet werden. Es funktioniert aufgrund des ARIA Accessible Name-Algorithmus. Siehe: Aria-Techniken mit Img-Rolle .

0
NoseToThePage