HTML - Semantische Art der Anzeige von Bildern/Icons/Benutzeroberflächenelementen?

Question

Stimmt es, dass es semantisch korrekte & falsche Möglichkeiten zur Anzeige von Bildern/Symbolen gibt?
Ich meine natürlich ist es nicht sehr freundlich, alle Bilder eines Zeitungsartikels als Hintergrundbilder zu enthalten, weil Screenreader so den alt Text nicht lesen können, aber was ist mit Icons oder Benutzeroberflächenelementen? Ist es aus semantischer Sicht vertretbar, diese als Hintergrundbilder einzubeziehen?

Answer 1

Es gibt einige semantisch korrekte und inkorrekte Möglichkeiten, unterschiedliche Arten von Bildern anzuzeigen.

• Normale Bilder Es ist besser Standard <img>-Tags zu verwenden, da sie oft der Hauptinhalt einer Website. Diese sollten alt Tags haben, um Benutzer über wichtige Teile des Inhalts zu informieren.
• Die Symbole sind eine Art Bild, das nicht der Hauptinhalt Ihrer Website ist, aber sie sollten auch unter Verwendung von Tags angezeigt werden, da es für die Benutzerfreundlichkeit wichtig ist zu zeigen, welche spezifischen Symbole dies tun, wenn es nicht korrekt angezeigt wird.
• Nicht wichtige Bilder, die die Website schön machen und nicht Hauptinhalt der Website sollte als Hintergrund angezeigt werden, denn dann verwenden Sie keine unnötigen Knoten in Ihrem DOM.

Answer 2

Ich glaube nicht, dass Sie Symbole als ein separates Element, das nur dieses Symbol darstellt; z.B. ein img oder i.

Stattdessen stellt jedes Symbol eine bestimmte Funktion dar - daher sollten Sie ein Element verwenden, das für diese Funktionalität verwendet werden könnte, z. ein Anker a oder ein button. Jedes dieser Elemente sollte einen nicht grafischen Inhalt haben, der von Bildschirmleseprogrammen und Webspidern analysiert werden könnte. Sie können diese Elemente dann verschönern, indem Sie Hintergrundbilder für ein grafisches Symbol verwenden.

Verwenden von separaten Markup für Symbole ist ein semantischer Fehler. Das Symbol selbst tut nichts. Es ist nur da, um sich die Funktion des zugrunde liegenden Elements zu merken. Tatsächlich sind diese Elemente jedoch immer noch vorhanden, wenn Sie das Symbol entfernen.

Also ja, ich würde immer Symbole als Hintergrundbilder zu einem Element direkt oder zu einem generierten Pseudoelement hinzufügen.