Sind Icons Inhalt?

Edd Morgan schreibt in

Offensichtlich sind wir uns alle einig, dass das Markup nur Inhalte enthalten sollte, nichts Ornamentales. Aber in welche Kategorie fallen Icons? Sind sie nicht ornamental, sollten sie also nicht im Markup vorkommen und rein in CSS definiert werden?

Ich bin sicher, wir können uns ein "ornamentales" Icon vorstellen. Ich wette, das ist die häufigste Art. Es begleitet ein Wort oder eine Phrase als Teil des Designs. Ich habe hier keine wissenschaftlichen Arbeiten zu zitieren, aber ich stelle mir vor, sie würden uns sagen, dass es eine Sache einprägsamer, auffindbarer, unterscheidbarer oder interkulturell relevanter machen kann oder was auch immer.

Hier ist eines

Lasst es uns wie das Zitat in Eds Frage machen: "sollten sie also nicht im Markup vorkommen und rein in CSS definiert werden".

<button class="button button-follow">
  Follow
</button>

.button-follow {
  padding-left: 70px; /* Normal left padding plus space for icon */
  background: url(/images/icons/icon-follow.svg) no-repeat left center;
}

Es gibt nichts Spezifisches im HTML über das Icon. Rein ornamental. Es wäre immer noch ein Button, wenn dieses Bild nicht geladen würde, oder sogar, wenn das CSS nicht geladen würde, und es hängt sicherlich nicht von JavaScript ab. Wenn wir hier perfekte progressive Enhancement Bürger sind, würden wir sicherstellen, dass <button> in einem <form action="/do/the/right/thing"> eingeschlossen ist oder es zu einem <a href="/go/to/right/place"> machen, um sicherzustellen, dass seine Funktionalität allein intakt ist.

Oder wir hätten auch tun können

.button-follow::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  background: url(/images/icons/icon-follow.svg);
  background-size: cover;
}

Keine Änderung am HTML.

Icon-Fonts sind die gleiche Art von Ding

.button::before {
  font-family: "icon-font";
}
.button-follow::before {
  content: "\e901";
}

Obwohl Pseudoelemente mit Screenreadern gelesen werden, auch wenn "Private Use Area" verwendet wird, was für ein Icon ziemlich umständlich sein kann. Ganz zu schweigen von anderen Problemen mit Icon-Fonts.

Mit im Markup...

Wenn Sie das beste Ergebnis mit Icon-Fonts erzielen wollen, werden Sie wahrscheinlich mindestens

<span class="icon icon-hamburger" aria-hidden="true"></span>

Wenn nicht sogar noch ein umgebendes Element darum. Jetzt haben wir also etwas "Ornamentales" im HTML. Sollten Sie sich schlecht fühlen? Na ja.

Ich bevorzuge SVG-Icon-Systeme, die uns möglicherweise ein Markup wie dieses liefern

<button class="button button-follow">
  <svg class="icon icon-follow" aria-hidden="true">
    <use xlink:href="#icon-follow" />
  </svg>
  Follow
</button>

... und dieses <use> verweist wahrscheinlich auch irgendwo im HTML auf ein <symbol>.

Fühle ich mich schlecht dabei? Na ja.

Und dann gibt es noch Icons ohne begleitenden Text

Für die wir vielleicht etwas tun könnten

<button aria-label="Save Now" class="button button-save">
  <svg class="icon icon-save">
    <use xlink:href="#icon-save" />
  </svg>
</button>

Es ist leicht anders, aber alles in allem ziemlich ähnlich. Wir haben die Welt nicht auf den Kopf gestellt, weil dieses Icon "Inhalt" ist und andere "dekorativ".

Es ist nur HTML

Der Trick ist, es gut zu verwalten, nicht dogmatisch daran zu festhalten, was "dort hingehört" und was nicht.

HTML ist voller Zeug. Mein Favicon ist da drin, ist das nicht dekorativ? Meine Google Analytics Skripte sind da unten, das scheint gar kein Inhalt zu sein. Ich musste ein zusätzliches <div> verwenden, um mir einen relativen Positionierungskontext zu geben. Es schadet nichts.

Ich würde mir mehr Sorgen machen über unnötigen Kram, der in eine Datenbank eindringt.

Aber ich verstehe es

Es hilft, Regeln zu haben. Es hilft, Konzepte zu propagieren, die dem Web mehr nützen als schaden. Sie sollten wahrscheinlich kein <img> für die Aufgabe einer background-image verwenden.

Ich mag die Idee, die Auswirkungen des Markups zu berücksichtigen, während Sie es verwenden. Tut es, was Sie brauchen? Hilft es der Zugänglichkeit oder schadet es ihr? Der Leistung? Wie sieht es mit der Wartbarkeit aus?