Es ist an der Zeit, ehrlich zu Bildersatztechniken zu sein

Key Takeaways

• Bildersatztechniken, die einst für die Vermittlung von Textinhalten in künstlerischer Form beliebt sind und gleichzeitig die Zugänglichkeit aufrechterhalten, werden jetzt häufig aufgrund der Verfügbarkeit moderner Tools wie benutzerdefinierten Schriftarten und leistungsstarken CSS -Tools kritisiert.
• Verwenden von Text anstelle von Textbildern hat mehrere Vorteile. Es ermöglicht den Benutzern, den Text leicht zu ändern und die Farbe zu ändern. Sie ist für Bildschirmleser und Suchmaschinenbots zugänglich und respektiert die Trennung von Bedenken.
• Es gibt Fälle, in denen Web -Schriftarten und CSS möglicherweise nicht ausreichen, um das gewünschte Ergebnis zu erzielen, z. In diesen Fällen kann die Verwendung eines grafischen Elements erforderlich sein.
• Inline SVG ist eine großartige Möglichkeit, ein Logo auf eine Webseite aufzunehmen, wenn Web -Schriftarten und CSS nicht genutzt werden können. Es ist sowohl für Suchmaschinen als auch für assistive Technologien, die skalierbar und auflösungsunabhängig sind, zugänglich und erfordert keine zusätzlichen HTTP-Anfragen, die angezeigt werden müssen.
• Image -Ersatz ist auf dem Weg, aufgrund der Fähigkeiten moderner CSS, Web -Schriftarten und Vektorgrafiken veraltet zu werden. Es gibt jedoch noch Randfälle, die hauptsächlich Überlegungen zu Barrierefreiheit beinhalten, bei denen Bildersatztechniken weiterhin eine begrenzte Anwendung finden können.

In einem früheren Stück hier bei SitePoint über eine Geschichte des CSS -Bildersatzes geht Baljeet Rathi eine Reihe von Bildersatztechniken durch, die jeweils geniale als der nächste. Diese Techniken konzentrierten sich alle auf die Lösung eines Problems - wie man Textinhalte in einer wunderschön künstlerischen Form im Internet vermittelt und gleichzeitig Menschen und Suchmaschinen zugänglich hält. Das Erreichen eines solchen Ziels in einer Welt des Webdesigns ohne leicht verfügbare benutzerdefinierte Schriftarten und leistungsstarke CSS -Tools von heute war eine ziemliche Aufgabe.

Nehmen Sie meinen Hinweis aus Rathis Artikel, ich machte mich auf den Weg, um die folgenden Fragen zu bewältigen:

• Bildersatztechniken waren früher sehr beliebt. Heutzutage erhalten diese Methoden zum Ersetzen von Text durch Hintergrundbilder häufig einen schlechten Rap unter Webentwicklern. Ich werde einige der Gründe, warum später in diesem Artikel, untersuchen
Sind Bildersatztechniken nur Geister aus dem Webdesign in der Vergangenheit oder können die Bildersatztechniken heute noch sinnvoll eingesetzt werden, ohne Angst zu haben, das Web hässlicher zu machen?

Beginnen wir zunächst das beste Werkzeug für den Job.

Bestes Tool für den Job: Web -Schriftarten und CSS

Wenn Ihr Inhalt Text ist, verwenden Sie Text, verwenden Sie keine Bilder von Text.

Mit den Ihnen heute zur Verfügung stehenden Tools benötigen Sie kaum Bilder, um Textinhalte in schöner Form weiterzugeben.

Einfacher Zugriff auf eine erstaunliche Anzahl von benutzerdefinierten Web-Schriftarten, eine großartige Browser-Unterstützung für die CSS @Font-Face-Immobilie und Schriftstreaming-Dienste wie Typkit und Google-Schriftarten bieten Ihnen eine enorme Kraft, um eine Marke zu kommunizieren, Emotionen zu vermitteln und eine zu erstellen und eine zu erstellen. Auswirkungen mit atemberaubender Typografie im Web.

Die Funktionen des modernen CSS machen es zum Kinderspiel, Transparenzstufen zu steuern, Textschatten hinzuzufügen, Modi zu mischen und sogar Animation zu Ihrem Text - kein Photoshop oder JavaScript -Haft erforderlich.

unten ist nur ein Beispiel dafür, was Sie mit Web -Schriftarten und CSS machen können:

Smart Designs -Website zeigt großartige Typografie ohne Bilder an, nur Web -Schriftarten und CSS.

Schlüsselvorteile der Verwendung von Text anstelle von Textbildern sind:

• Benutzer können den Text leicht ändern und ihre Farbe ändern, um ihre Anforderungen zu erfüllen.
• Bildschirmleser können auf Text zugreifen, und Suchmaschinenbots können es kriechen und indexieren.
• Es ist der semantisch korrekte Ansatz und respektiert die Trennung von Bedenken.
Wenn Sie benutzerdefinierte Schriftarten verwenden, können Sie einfach Web-Safe-Schriftarten als Fallback im CSS-Schriftstapel bereitstellen.

Wie viele von Ihnen wissen, funktioniert dieser Ansatz für jede Situation nicht. Also…

Was ist, wenn Web -Schriftarten und CSS nicht immer dem Job sind?

Es gibt Situationen, in denen Web -Schriftarten und CSS nicht ganz ausreichen, um das Ergebnis zu erzielen, das Sie suchen, und sich der Grafik zuwenden. Das Logo einer Website ist ein typisches Beispiel.

Logos sind ein wesentlicher Bestandteil einer Marke, was bedeutet, dass Sie ein Logo nicht geringfügig ändern können, ohne die Markenidentität zu beeinträchtigen. Es kann Fälle geben, in denen Sie das Logo nicht genau mit Web -Schriftarten und CSS reproduzieren können. Vielleicht ist die Schriftart des Logos im Web nicht ohne weiteres verfügbar, oder das grafische Kunstwerk kann nicht nur mit CSS treu nachgebaut werden. Die Verwendung eines grafischen Elements scheint der richtige Weg zu sein. Obwohl Sie möchten, dass Benutzer das auf Ihrer Website angezeigte grafische Element sehen, möchten Sie auch Bildschirmleser und Bots auf den Markennamen, das das Logo darstellt.

Berücksichtigen Sie auch die Verwendung von Symbolen, ohne Text zu unterstützen. Das eigentliche Problem hier ist, dass Bildschirmleser und Suchmaschinencrawler schwer haben, was das Symbol bedeutet. Symbole sind kein Text, sondern sie stehen

für Text. Zum Beispiel steht das inzwischen vertraute Hamburger -Symbol für das Wort „Menü“, aber es ist nicht selbst das Wort „Menü“. Daher kann das Anzeigen des Symbols ohne die Unterstützung von Text im Web ernsthafte Bedenken hinsichtlich der Zugänglichkeit hervorrufen.

In beiden Fällen oben ist das Ziel, einige Informationen über ein Bild zu vermitteln, ohne den Zugriff durch Bildschirmleser und Suchmaschinencrawler zu seinen Textinhalten zu beeinträchtigen. Bildersatztechniken haben dies in der Vergangenheit etwas möglich gemacht. Es lohnt sich also zu prüfen, ob heute etwas Besseres gibt, um den Job zu erledigen, was vor einiger Zeit nicht weit verbreitet war.

Hier sind einige Optionen.

inline svg

Heute ist eine großartige Möglichkeit, ein Logo in eine Webseite aufzunehmen, wenn Sie die Leistung von Web -Schriftarten und CSS nicht nutzen können, ist inline SVG. SVG steht für skalierbare Vektorgrafiken, ein XML-basiertes Grafikformat. Die Technik, an der ich interessiert bin, besteht darin, eine SVG -Grafik des Logos zu erstellen und ihren Code direkt in das HTML -Dokument abzuwerfen. Wenn Sie Ihren SVG von einem Editor wie Illustrator oder Inkscape exportieren, können Sie einen Schritt weiter gehen und seine Ausgabe optimieren, indem Sie redundantes Markup entfernen.

Wenn Sie das SitePoint -Website -Logo inspizieren, sehen Sie ein Beispiel für diese Technik in Aktion:

Inline SVG wurde zum Erstellen des Logos auf der SitePoint -Website verwendet.

Das ist noch nicht alles. Inline SVG wirkt auch Wunder, wenn es verwendet wird, um einer Webseite knusprige Symbole hinzuzufügen. Wenn Sie mehr erfahren möchten, sehen Sie sich den SVG-Kurs von Chris Coyer auf CSS-Tricks an, das auch einige Video-Tutorials zu Inline-SVG-Symbolen enthält.

Hier sind einige der Gründe, warum die Verwendung von Inline SVG cool ist:

• SVG -Code ist nur Markup, und mit einem Titel und einem DESC -Element, um einen sinnvollen Kontext hinzuzufügen, können sowohl Suchmaschinen als auch assistive Technologien darauf zugreifen. Sie können die Zugänglichkeit Ihrer Inline-SVG-Grafiken verbessern, indem Sie diese Tipps von Léonie Watson auf SitePoint und Heather Migliori auf CSS-Tricks befolgen.
• SVG-Grafiken sind per Definition und auflösungsunabhängig skalierbar, was bedeutet, dass sie fantastisch aussehen, egal wie viel Benutzer sie vergrößern.
• Inline -SVG -Grafiken erfordern keine zusätzlichen HTTP -Anfragen, die angezeigt werden müssen, was für die Leistung der Website hervorragend ist.
• Sie können das Erscheinungsbild und das Verhalten von Inline-SVG-Grafiken mithilfe von CSS und JavaScript, einschließlich der animierenden einzelnen Portionen Ihrer Kunstwerke und sogar dynamisch ihre Formen, fein abstellen. Um mehr über SVG -Animationstechniken zu erfahren, lesen Sie die Animation mit Inline SVG von Jordan Wade.
• Im Gegensatz zu Icon -Schriftarten wird Ihre Website in den Inline -SVG -Symbeln nie nicht geladen, da sich der SVG -Code bereits im HTML -Dokument befindet.

Eine weitere gute Nachricht ist, dass Inline SVG einen großartigen Browser -Support hat. Nur IE8 fehlt die Unterstützung für Inline Svg.

Symbol Schriftarten

Obwohl Icon -Schriftarten nicht zum Anzeigen eines Logos geeignet sind, haben sie Popularität als großartige Möglichkeit, Symbole auf einer Website anzuzeigen. Die Benutzerfreundlichkeit, die durch Online -Symbolbibliotheken wie Glyphicons und Font Awesome ermöglicht wurde, hat stark zum massiven Vorhandensein von Symbolschriften im Web beigetragen.

Symbolschriften sind nur Text. Daher können Sie ihr Erscheinungsbild mit CSS steuern, und Benutzer können sie nach ihren Wünschen ändern.

Für aussagekräftige Symbole ohne begleitende Text können Sie mithilfe von WAI-Aria-Techniken zugängliche Informationen hinzufügen.

Nehmen wir beispielsweise an, Sie verwenden die Schriftart Awesome, um ein verknüpftes Hamburger -Symbol anzuzeigen, um ein verstecktes Menü anzuzeigen. Wenn Sie nur das Markup für das Symbol hinzufügen

<span><span><span><a</span> href<span>="#"</span> class<span>="fa fa-bars"</span>></span><span><span></a</span>></span></span>

Hinzufügen eines Titelsattributs zum Link funktioniert für Bildschirmleser, hat jedoch den Nebeneffekt, ein manchmal unerwünschtes Tooltip für Benutzer anzuzeigen, die ohne assistive Technologien auf der Website navigieren.

Das ARIA-Label-Attribut macht die Hamburger-Symbol-Schriftart für Bildschirmleser zugänglich und wird das unerwünschte Tooltip beseitigt:

<span><span><span><a</span> href<span>="#"</span> class<span>="fa fa-bars"</span> aria-label<span>="Menu"</span>></span><span><span></a</span>></span></span>

Wie Alex Walker und Seren Davies darauf hingewiesen haben, hat das Implementieren von Ikokonschriften im Web eine Reihe von Fallstricken, von denen Sie sich voll und ganz bewusst sein müssen.

Um mehr darüber zu erfahren, was es braucht, um die Zugänglichkeitsprobleme mit Icon-Schriftarten anzugehen, ist kugelsicherer zugänglicher Symbolschriften von Zach Leatherman aus der Filamentgruppe ein Augenöffner.

das tag

Das Bild eines Logos unter Verwendung eines -Tag mit einem geeigneten Alt -Attribut ist ein akzeptabler und weit verbreiteter Ansatz.

Das Alt -Attribut enthält den Text, wodurch sich das Element um die Zugriffsbarkeitsbedenken kümmert.

Sowohl die W3C, ihre Web -Tutorials für die Web Accessibility als auch die Google -Webmaster unterstützen diese Methode.

Ein paar kleine Nachteile, die Sie berücksichtigen müssen, sind:

Eine weitere HTTP -Anfrage, die sich auf die Ladezeit der Website auswirken kann. Dies wird in naher Zukunft weniger ein Problem sein, wenn HTTP/2 vollständig implementiert ist.

• Die Trennung von Bedenken wird nicht berücksichtigt: Wenn Sie sich entscheiden, das Erscheinungsbild des Textes zu ändern, müssen Sie dies tun, indem Sie das Markup ändern, nicht das CSS.
• Rasterbilder können pixeliert aussehen, wenn Benutzer ihre Größe erhöhen, obwohl SVG -Grafiken dieses Problem nicht darstellen.
Die obigen Punkte gehörten zu den Motivationen, die zu den verschiedenen in der Vergangenheit weit verbreiteten Bildersatztechniken führten.

Aber warum werden diese Techniken heute verpönt? Sind wir wirklich mit ihnen fertig?

Der Fall gegen Bildersatz

Der größte Teil des Forschungsmaterials über Bildersatztechniken, auf die ich online gestoßen bin, stammt aus den frühen oder Mitte der 2000er Jahre. Im November 2013 ließ die HTML5 -Kesselplatte alle Arten von CSS -Bildersatztechniken fallen. Dies sind bedeutende Hinweise, was darauf hindeutet, dass der Bildersatz auf dem besten Weg ist, veraltet zu werden.

Mit

CSS können Sie Dinge tun, die Sie erst vor wenigen Jahren auf der Bildbearbeitungssoftware tun können. Warum sollten Sie mit Web -Schriftarten und Vektorgrafiken, die leicht verfügbar sind, nach einem so klugen Hack wie Bildersatz?

Andere wichtige Überlegungen gegen die Verwendung von Bildersatztechniken betreffen ihre potenziellen negativen Auswirkungen auf Suchmaschinenrankings.

Google hat klare Richtlinien gegen den Versteck von Text auf Webseiten und die Missachtung von ihnen könnte zu schwerwiegenden Strafen führen. Die Website von Google berücksichtigt verdächtige Möglichkeiten, in der heutigen Zeit im Internet Text zu verbergen:

Verwenden von weißem Text auf einem weißen Hintergrund.
Text hinter einem Bild lokalisieren.
Verwenden Sie CSS, um Text außerhalb des Bildschirms zu positionieren.
Einstellen der Schriftgröße auf 0.

Elemente in der obigen Abbildung in die meisten beliebten Bildersatztechniken, wodurch wir alle vorsichtig sind, sie zu verwenden.

Die Situation ist jedoch nicht eindeutig. Google weist darauf hin, dass versteckter Text "

, um Googles Such -Ranglisten zu manipulieren. Darüber hinaus sagt Google weiter und sagt:

„… nicht jeder versteckte Text wird als trügerisch angesehen. Wenn Ihre Website beispielsweise Technologien enthält, die Suchmaschinen Schwierigkeiten haben, wie JavaScript, Bilder oder Flash -Dateien zuzugreifen, kann der deskriptive Text für diese Elemente die Zugänglichkeit Ihrer Website verbessern. ”

Solange es keine

Schlüsselwort -Füllung oder eine böswillige Absicht gibt, könnte der Bildersatz unter Einhaltung der Richtlinien von Google berücksichtigt werden. Wie Sie Google Bots Ihren Treu und Glauben vermitteln können, ist nicht einfach, aber ein guter Vorschlag, den SEO -Experten vorgelegt haben, besteht darin, sicherzustellen, dass der von Ihnen versteckte Text genau dem Text ist wie der auf Ihrer Website angezeigte Text. Das ist noch nicht alles. Joost de Valk von Yoast, sicherlich eine maßgebliche Stimme im Bereich SEO, gehört zu den Anhängern des Bildersatzes, insbesondere als eine zugängliche Möglichkeit, Sprites auf einer Website zu nutzen.

Was ist in seinem CSS -Image -Austausch Matt? De Valk hat sich mit Matt Cutts, Software -Ingenieur bei Google, auf die Haltung des letzteren gegen die Verwendung des Bildersatzes in Frage. Sie würden sagen, dass De Valks Stück bis 2009 zurückreicht, Vorgeschichte in der Welt des Webdesigns. Zumindest nach meinem Wissen hat sein Autor nichts geschrieben, was uns denken lässt, dass er seine Meinung zu diesem Thema geändert hat, und zum Zeitpunkt des Schreibens dieses Artikels wird das Logo auf der Yoast -Website immer noch mit der Verwendung angezeigt Bildersatz.

Bildersatz ist aus Sicht der Zugänglichkeit immer noch akzeptabel, zumindest in einigen Fällen. Dies ist nicht überraschend, da der Hauptlaufwerk hinter diesen Methoden darin bestand, die Anzeige ästhetisch polierter, aber vollständig zugänglicher Textinhalte im Web zu ermöglichen.

Eine Notiz der W3C-Arbeitsgruppe unterstützt die Bildersatztechniken ausdrücklich, solange Benutzer problemlos zu einer alternativen, nur Textdarstellung desselben Inhalte wechseln können, falls die Implementierung nicht wie erwartet funktionieren sollte.

Softwareentwickler Logan Franken ist ein vernünftiger Fall für eine begrenzte Verwendung von Bildersatztechniken und argumentiert, dass sie bei der Anzeige von SVG in einem IMG -Tag- oder Symbolschriften ohne Begleittext auf Websites noch eine Rolle spielen können.

.

. Schließlich werden Sie feststellen, dass der Image-Ersatz noch relevant sein kann, um die Zugänglichkeit der modernen SVG-Technologie heute zu verbessern. In dem Abschnitt mit dem Titel Beispiel 5: verknüpftes Symbol mit dynamischem Text

in zugänglichen SVGs weist Heather Migliori darauf hin, dass die Verwendung des ARIA-Label-Attribut ärgert sich nicht für die Situationen, in denen der Link -Text nicht im Voraus bekannt ist, da er der Seite dynamisch hinzugefügt wird. Migliorisi zeigt, wie der Bildersatz hier fruchtbar verwendet werden kann, um den Tag zu retten.

Schlussfolgerung

In diesem Artikel habe ich die Tools und Best Practices aufgeführt, die Sie derzeit als Alternative zu den Bildersatztechniken verwenden können, die in vergangenen Tagen so beliebt sind. Dazu gehören benutzerdefinierte Schriftarten, CSS3 und Inline SVG, die in der Vergangenheit nicht ohne weiteres verfügbar oder von Browsern gut unterstützt wurden, sowie das gute alte Tag mit einem geeigneten Alt -Attribut.

Heute sieht Image -Ersatz ziemlich hacky aus und Googles Haltung zu verstecktem Text fördert die Verwendung nicht. Es gibt jedoch Kantenfälle, die hauptsächlich Überlegungen zu Barrierefreiheit beinhalten, wenn Bildersatztechniken weiterhin eine begrenzte Anwendung finden, hoffentlich nicht lange.

Was machen Sie daraus? Ist Bild Ersatz tot oder lebendig? Lassen Sie mich in den Kommentaren von Ihnen hören!

häufig gestellte Fragen (FAQs) zu Bildersatztechniken

Was sind die verschiedenen Arten von Bildersatztechniken?

Es gibt mehrere Bildersatztechniken, die Entwickler verwenden. Dazu gehören der Fahrnerbildersatz (FIR), den Leahy/Langridge -Bildersatz (LLIR), den Phark Imageersatz (PIR), den Ersatz für Gilder/Levin -Bild (GIR) und die Scott Kellum -Methode. Jede dieser Techniken hat ihre eigenen Vor- und Nachteile, und die Auswahl der Technik hängt von den spezifischen Anforderungen des Projekts ab. Die Fahrer Bildersatztechnik (FIR) besteht darin, ein Textelement durch ein Bild zu ersetzen, ohne die Zugänglichkeit des Textes zu beeinflussen. Dies geschieht durch die Positionierung des Textes außerhalb des Bildschirms mit CSS, sodass das Bild seinen Platz einnehmen kann. Diese Technik wurde jedoch für ihre Auswirkungen auf die Bildschirmleser und die Suchmaschinenoptimierung (SEO) kritisiert. LLIR -Technik (Bildersatz) ist eine Modifikation der FIR -Technik. Es besteht die Verwendung eines Spannelements, um den Text zu halten, der dann mit CSS versteckt wird. Dadurch kann das Bild an seiner Stelle angezeigt werden. Der Vorteil dieser Technik besteht darin, dass sie sich nicht auf Bildschirmleser oder SEO auswirkt. Die Technik ist eine weitere Modifikation der FIR -Technik. Es besteht darin, den Text zu verbergen, indem er die gleiche Farbe wie der Hintergrund macht und das Bild an seiner Stelle angezeigt wird. Diese Technik ist einfacher als andere Techniken, wurde jedoch wegen ihrer Auswirkungen auf SEO kritisiert. (GIR) -Technik beinhaltet die Verwendung eines Hintergrundbildes und das Ausblenden des Textes mit CSS. Diese Technik ist SEO-freundlicher als andere Techniken, wurde jedoch wegen ihrer Auswirkungen auf die Bildschirmleser kritisiert.

Wie funktioniert die Scott Kellum-Methode? Die textinhaltige Eigenschaft, um den Text außerhalb des Bildschirms zu drücken, sodass das Bild an seiner Stelle angezeigt werden kann. Diese Technik ist zugänglicher als andere Techniken, wurde jedoch wegen ihrer Auswirkungen auf SEO kritisiert. Verwenden Sie Bilder anstelle des Textes, ohne die Zugänglichkeit des Textes zu beeinflussen. Diese Techniken können sich jedoch negativ auf SEO- und Bildschirmleser auswirken. Daher ist es wichtig, die richtige Technik für jedes Projekt auszuwählen.

Wie kann ich die richtige Bildersatztechnik für mein Projekt auswählen? Sie sollten Faktoren wie die Auswirkungen auf die SEO- und Screen -Leser, die Komplexität der Technik und die Kompatibilität mit verschiedenen Browsern berücksichtigen. Es gibt Alternativen zu Bildersatztechniken. Dazu gehören die Verwendung von CSS3-Eigenschaften wie Text-Shadow und Box-Shadow, die Verwendung von SVG-Bildern und die Verwendung von Webschriften. Diese Alternativen können ähnliche Ergebnisse ohne die Nachteile von Bildersatztechniken liefern.

Wie kann ich mehr über Bildersatztechniken erfahren? Dazu gehören Tutorials, Artikel und Foren. Sie können auch aus dem Quellcode von Websites lernen, die diese Techniken verwenden.

Das obige ist der detaillierte Inhalt vonEs ist an der Zeit, ehrlich zu Bildersatztechniken zu sein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!