HTML für die Verwendung von Icon-Schriftarten

Wo stehen wir gerade in Bezug auf die beste Auszeichnung für die Verwendung von Icon-Schriftarten? Lassen Sie uns einige Optionen behandeln, die meiner Meinung nach derzeit die besten sind.

1. Sie möchten, dass das Symbol ein Wort ergänzt
2. Sie möchten, dass das Symbol für sich allein steht, aber dennoch funktional oder informativ ist

Und unsere Hauptziele hier sind

1. So gute Semantik, wie wir sie bekommen können
2. So wenig umständlich wie möglich für Screenreader

Dieser Boden wurde bereits beschritten, aber ich denke, die folgenden Techniken sind ein kleiner Schritt nach vorne.

Ein Wort hervorheben

Nehmen wir an, wir haben eine Überschrift wie "Statistiken" und möchten sie von anderen Überschriften auf der Seite abheben und ihre Bedeutung hervorheben. Semantisch ideal

<h2 id="stats" class="stats-title">Stats</h2>

Ergebnis

Um das Symbol dort hinein zu bekommen (denken Sie daran, wir sprechen hier von *Schriftart*-Symbolen, wir können nicht einfach links auffüllen und einen Hintergrund verwenden), müssen wir etwas Inhalt einfügen.

Die Verwendung eines Pseudo-Elements ist verlockend, weil 1) es von den meisten Screenreadern nicht gelesen wird und 2) wir keine spezielle Auszeichnung für das Symbol benötigen, was semantisch ideal ist. Leider liest VoiceOver unter OS X den Inhalt von Pseudo-Elementen. (Referenz 1, Referenz 2) Nun, vielleicht "glücklicherweise", denn wenn ich die Spezifikation richtig lese, ist es das, was es tun soll. Pseudo-Elemente sind einfach nicht im DOM und das macht es wahrscheinlich schwieriger für Drittanbieter-Apps.

Die gute Nachricht ist, dass wir, wenn wir ein wenig Auszeichnung verwenden, das Attribut aria-hidden verwenden können, um zu verhindern, dass es gesprochen wird.

Noch eine Prise schlechte Nachrichten, selbst mit aria-hidden auf der Auszeichnung, die das Symbol umgibt, wird VoiceOver unter OS X beim Fokus "HTML-Inhalt" ankündigen. #verdammt.

Aber leider! Wir können hier immer noch gewinnen. Wenn wir die Auszeichnungstechnik und die Pseudo-Element-Technik kombinieren, können wir das Symbol ohne VoiceOver-Eigenheiten einfügen. Und als doppeltes Bonusgeschenk ist diese kombinierte Technik ideal, um unser CSS schlank und straff zu halten, da sie keine überladenen Klassennamen benötigt und gut mit dem nächsten Anwendungsfall harmoniert, den wir behandeln müssen.

Die endgültige Auszeichnung dafür wird also

<h2 id="stats">
  <span aria-hidden="true" data-icon="&#x21dd;"></span>
  Stats
</h2>

Und das CSS ist

[data-icon]:before {
  font-family: icons; /* BYO icon font, mapped smartly */
  content: attr(data-icon);
  speak: none; /* Not to be trusted, but hey. */
}

Heilige Kuh, das ist einfach, oder? Beachten Sie, dass wir keinen spezifischen Klassennamen für das Symbol verwenden (z. B. wie .icon-stats oder etwas Ähnliches), sondern ein data-*-Attribut verwenden, um genau zu speichern, welches Zeichen wir einfügen möchten. In unserer Icon-Schriftart ordnen wir diese Sonderzeichen dem gewünschten Symbol zu. Ich finde dies perfekt semantisch und sogar zukunftssicher (man könnte immer noch eindeutig auswählen, auch wenn man das Zeichen ändert). Wenn Sie jedoch Klassennamen bevorzugen, umso besser, das ist in Ordnung und ändert diese Technik nicht drastisch.

Das Zuordnen von Zeichen behandeln wir am Ende.

Eigenständige Symbole

Sagen wir, wir haben ein Symbol, das ein Link ist oder in irgendeiner Weise funktional, aber es ist nicht von Text begleitet. Zum Beispiel ein Einkaufswagen-Symbol, auf das man klicken kann, um zum Einkaufswagen zu gelangen. Hoffentlich ist diese Funktionalität visuell offensichtlich, mit einer Art Rollover-Zustand oder allgemeiner Design-Offensichtlichkeit. Aber diese Funktionalität muss auch hörbar offensichtlich sein.

Anstatt eine völlig neue Technik für diesen Fall zu entwickeln (mit der ich in der Vergangenheit experimentiert habe), greifen wir auf das zurück, was wir bereits begonnen haben. Ein Span, das das Zeichen mit einem Pseudo-Element einfügt, und Text, der direkt daneben sitzt und den wir visuell von der Seite werfen.

<a href="#rss" class="icon-alone">
  <span aria-hidden="true" data-icon="&#x25a8;"></span>
  <span class="screen-reader-text">RSS</span>
</a>

Wir brauchen nur sehr wenig zusätzliches CSS, nur eine kleine Benutzerfreundlichkeitskorrektur, die über eine Klasse angewendet wird, und eine Toolbox-Klasse zum Ausblenden des Textes, aber dennoch zugänglich machen.

.icon-alone {
  display: inline-block; /* Fix for clickability issue in WebKit */
}
.screen-reader-text { /* Reusable, toolbox kind of class */
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Hey, es funktioniert

Demo ansehen

Update Oktober 2012: Ich habe eine ordentlichere Demo erstellt, die die Verwendung von Icon-Schriftarten mit verschiedenen Techniken vergleicht.

Jedenfalls bei VoiceOver. Es wäre toll, von Leuten zu hören, die andere Screenreader verwenden, wie sich das bewährt.

Erstellen / Zuordnen Ihrer Icon-Schriftart

Ein "Problem" in der Welt der Icon-Schriftarten ist derzeit, dass die Mehrheit der verfügbaren bereits auf Buchstaben gemappt ist. Bei falscher Auszeichnung werden die Buchstaben zu "Inhalt" und Teil der Semantik des Dokuments. Oder schlimmer noch, sie werden von Screenreadern laut vorgelesen.

Es ist fast nie sinnvoll, dass ein Symbol einem Buchstaben zugeordnet wird. Stattdessen empfehle ich, Symbole dem nächstgelegenen Unicode-Symbol zuzuordnen, das Sie finden können. Zum Beispiel ist die Zuordnung eines Herz-Symbols zu ❤ eine ausgezeichnete Idee. Die Bedeutung von Symbolen ist ohnehin eher relativ, daher zählt Nähe und wird sofort eine semantische Verbesserung darstellen.

Noch besser finde ich die Idee, Symbole dem "Private Use Area" von Unicode zuzuordnen. Soweit ich weiß, ist es genau dafür gedacht, es für Ihre eigenen Sonderzeichen zu verwenden. Auf diese Weise zugeordnet, besteht keine Gefahr, dass das Zeichen von einem Screenreader gesprochen wird. Leider funktionieren zu dem Zeitpunkt, an dem dies geschrieben wird, Symbole, die auf diese Weise zugeordnet sind, nicht einmal im neuesten Safari, daher wird es noch nicht empfohlen. Hier sind die Neuigkeiten zu den Problemen mit dem Private Use Area, paraphrasiert von Keyamoon:

Es gibt einen Unterschied zwischen PUA (Private Use Area) und SPUA (Supplementary Private Use Area). Der Unterschied wird hier erklärt. In meinen Tests funktioniert die PUA-Zuordnung in allen Browsern einwandfrei. Die SPUA-Zuordnung schlägt nur in Safari unter Windows fehl. Die IcoMoon-App ordnet nur PUA zu, was zumindest für die absehbare Zukunft empfehlenswert ist.

Hier sind die Schritte, denen Sie folgen können

1. Wählen Sie eine Icon-Schriftart aus.
2. Gehen Sie zu IcoMoon und laden Sie sie hoch (oder verwenden Sie deren Icon-Set)
3. Wählen Sie die gewünschten Symbole aus.
   

   
   

4. Ordnen Sie sie den gewünschten Zeichen zu. Am besten ordnen Sie sie einem relevanten Symbol oder PUA zu.
   

   

5. Laden Sie die Schriftarten/Demo herunter.

Sie können auch Pictos Server verwenden, um die Symbole auszuwählen und zuzuordnen, aber es funktioniert nur mit Pictos und hilft Ihnen nicht bei der Auswahl von Symbolen (Sie könnten von hier kopieren und einfügen). Es ist jedoch ein sehr schönes Set und hostet für Sie und macht es sehr einfach, bestehende Sets zu verwenden, ohne manuell Font-Dateien auszutauschen.

Die Zukunft

In Zukunft können wir hoffentlich auf speak: none; vertrauen, das überall perfekt funktioniert, damit wir wieder Pseudo-Elemente und perfekte Semantik verwenden können.

Relevant

• Wenn Sie Bedenken wegen FOUT (Flash of Unstyled Text) haben, das mit @font-face in Firefox 3.5/3.6 und IE 6-9 einhergeht, wäre eine Lösung, FOUT-B-Gone auszuprobieren.
• Zusammenfassung von Icon-Schriftarten