Bilder sind einer der wichtigsten Bestandteile des Webdesigns. Sie dienen dazu, Informationen zu vermitteln, gro\u00dfe Textbl\u00f6cke aufzubrechen und eindrucksvolle Darstellungen zu schaffen, die Besucher ansprechen k\u00f6nnen. Begleitend zu diesen Bildern sollte jedoch auch Alt\u2011Text vorhanden sein, der einen zus\u00e4tzlichen Nutzen f\u00fcr Nutzer bietet, die sie nicht sehen k\u00f6nnen.<\/p>\n
Bilder sind einer der wichtigsten Bestandteile des Webdesigns. Sie dienen dazu, Informationen zu vermitteln, gro\u00dfe Textbl\u00f6cke aufzubrechen und eindrucksvolle Darstellungen zu schaffen, die Besucher ansprechen k\u00f6nnen. Begleitend zu diesen Bildern sollte jedoch auch Alt\u2011Text vorhanden sein, der einen zus\u00e4tzlichen Nutzen f\u00fcr Nutzer bietet, die sie nicht sehen k\u00f6nnen.<\/p>\n
Alt\u2011Text beschreibt ein Bild f\u00fcr den Leser und vermittelt dem Betrachter ein klareres Bild davon, welche Information dargestellt wird oder welche Aktion erwartet wird. In diesem Artikel erl\u00e4utern wir die Bedeutung von Alt\u2011Text und geben praktische Methoden zum Formulieren guter Alt\u2011Tag\u2011Beschreibungen.<\/p>\n
Alt\u2011Text, oder alternative Textbeschreibung, ist ein Begriff, den Screenreader verwenden und bezeichnet die textuelle Darstellung eines Bildes. Screenreader lesen den Alt\u2011Text vor, um den Inhalt von Bildern f\u00fcr sehbehinderte Personen zu beschreiben. Alt\u2011Text kann f\u00fcr Menschen mit eingeschr\u00e4nktem Sehverm\u00f6gen sehr hilfreich sein, da er zus\u00e4tzliche Informationen dar\u00fcber liefert, was auf dem Bildschirm zu sehen ist.<\/p>\n
Oft sind Webseiten nicht barrierefrei, weil viele Designer die alternative Textbeschreibung f\u00fcr ihre Bilder vernachl\u00e4ssigen. Wenn dies geschieht, bieten Screenreader keine Beschreibung oder Information zu einem Bild, sodass es f\u00fcr sehbehinderte Nutzer sehr schwierig wird, den Inhalt der Seite zu erfassen.<\/p>\n
Es gibt keinen einheitlichen Standard f\u00fcr das Verfassen guten Alt\u2011Texts. Die Beschreibung sollte kurz und klar sein und dennoch aussagekr\u00e4ftige Informationen \u00fcber das Bild liefern. Pr\u00e4gnante Alt\u2011Text\u2011Beschreibungen zu schreiben ist nicht schwierig, aber es ist unn\u00f6tig, jedes Detail in Ihrer alternativen Beschreibung aufzuf\u00fchren.<\/p>\n
Das Wichtigste bei der Beschreibung eines Bildes mit Alt\u2011Text ist die Rolle, die das Bild auf Ihrer Website spielt. Wenn ein Bild nicht notwendig ist, um Ihre Aussage zu vermitteln, sollte es gar nicht erst verwendet werden. Redundante Bilder, die keine zus\u00e4tzlichen Informationen liefern und leicht durch Text ersetzt werden k\u00f6nnten, lassen sich in der Regel entfernen, ohne Design oder Inhalt zu beeintr\u00e4chtigen.<\/p>\n
Falls Sie ein redundantes Bild nicht von Ihrer Seite l\u00f6schen k\u00f6nnen, sollten Sie eine andere M\u00f6glichkeit finden, es zu beschreiben. Nutzen Sie ein Bild beispielsweise als Header, k\u00f6nnten Sie stattdessen den Text der \u00dcberschrift als Alt\u2011Tag verwenden. Das beeinflusst Ihr Suchmaschinenranking nicht negativ, da diese Schl\u00fcsselw\u00f6rter ohnehin in der \u00dcberschrift erscheinen.<\/p>\n
Die Bedeutung von Alt\u2011Text liegt in seiner F\u00e4higkeit, Ihre Seite f\u00fcr Screenreader zug\u00e4nglich zu machen. Diese werden von Personen genutzt, die Bilder auf der Seite nicht sehen k\u00f6nnen, sei es aufgrund schlechter Sehkraft oder veralteter Monitore, die keine Bilder unterst\u00fctzen. Indem wir f\u00fcr alle Bilder Alt\u2011Text\u2011Beschreibungen bereitstellen, stellen wir sicher, dass auch diese Nutzer Ihre Website nutzen k\u00f6nnen. Die folgenden Punkte helfen dabei, seine zentrale Bedeutung schneller zu erfassen.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Da Alt\u2011Text eine alternative M\u00f6glichkeit ist, Inhalte f\u00fcr Nutzer mit deaktivierten Bildern zug\u00e4nglich zu machen, m\u00fcssen Sie ihn verwenden, um genaue Informationen bereitzustellen. Die verschiedenen Browser und Screenreader sollten dabei logisch und verst\u00e4ndlich formulierte Beschreibungen wiedergeben.<\/p>\n
Vor einigen Jahren glaubten viele Webdesigner, dass Suchmaschinen Alt\u2011Text nicht lesen k\u00f6nnten, und verwendeten deshalb lediglich die Formulierung \u201eimage (number)\u201c. Das hilft Ihrem Seitenranking nicht, denn Suchmaschinen erkennen heute Schl\u00fcsselw\u00f6rter in Bildbeschreibungen.<\/p>\n
Bildbeschreibungen sollten keine Begriffe f\u00fcr rein dekorative Bilder enthalten, sondern sich auf Inhalte konzentrieren, die f\u00fcr das Verst\u00e4ndnis Ihrer Website relevant sind. Das hilft, ein einheitliches Design auf allen Seiten Ihrer Seite beizubehalten.<\/p>\n
Stellen Sie sicher, dass Alt\u2011Tags klar formuliert sind und keine Abk\u00fcrzungen oder branchenspezifischen Fachbegriffe enthalten. Sie sollten das Bild konkret beschreiben und nicht die umgebenden Informationen. So stellen Sie sicher, dass alle Nutzer Ihre Seite problemlos nutzen k\u00f6nnen, was wiederum den Traffic erh\u00f6ht.<\/p>\n
Ohne Kenntnis des Zwecks eines Bildes ist es schwierig, den genauen Alt\u2011Text zu bestimmen. Fragen Sie sich: Vermittelt das Bild wichtige Informationen oder veranschaulicht es einen Punkt? Wenn ja, ist Alt\u2011Text notwendig und kann Ihrer Seite zus\u00e4tzliche Tiefe verleihen.<\/p>\n
Verwenden Sie Bilder rein zur Gestaltung, k\u00f6nnen Sie \u201eimage (number)\u201c als Alt\u2011Text verwenden. Das liefert jedoch keine Information \u00fcber das Bild und kann seine Wirkung auf Ihrer Seite mindern.<\/p>\n
Ber\u00fccksichtigen Sie, wie wichtig das Bild f\u00fcr das Thema Ihrer Website ist und welche Botschaft es vermitteln soll.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Dient ein Bild als Logo f\u00fcr Ihr Unternehmen, sollte es leicht zu erkennen und schnell erfassbar sein. Es sollte au\u00dferdem einen Text enthalten, der das Bild und die \u00c4sthetik Ihres Unternehmens vollst\u00e4ndig beschreibt, etwa \u201eCompany X \u2013 15 Jahre im Gesch\u00e4ft!\u201c<\/p>\n
Alt\u2011Text ist f\u00fcr die Bilder auf Ihrer Seite notwendig, weil er Suchmaschinen hilft zu verstehen, was ein Bild zeigt. So k\u00f6nnen sie die Relevanz der Seiteninhalte f\u00fcr die Suchanfragen der Nutzer besser bewerten. Sucht ein Nutzer beispielsweise nach Informationen \u00fcber Schildkr\u00f6ten, hilft ein Bild von Schildkr\u00f6ten dabei, diese Seite zu finden. Alt\u2011Text kann zudem wichtige Informationen \u00fcber das Bild liefern, wie beispielsweise den Urheber: \u201eAndy Warhols ber\u00fchmtes Campbell\u2019s\u2011Suppendosen\u2011Gem\u00e4lde.\u201c Alt\u2011Text verbessert au\u00dferdem die Lesbarkeit Ihrer Seite.<\/p>\n
Es gibt verschiedene Online\u2011Programme, die Ihnen dabei helfen k\u00f6nnen, Alt\u2011Text f\u00fcr Ihre Bilder zu generieren.<\/p>\n
Nachdem Sie die Bilder hochgeladen haben, nehmen Sie den Originaldateinamen jedes Bildes und f\u00fcgen ihn in das entsprechende Feld ein. Klicken Sie dann auf \u201eOk\u201c. Dadurch werden f\u00fcr jedes Bild ein Titel und ein Alt\u2011Tag erzeugt.<\/p>\n
Eine weitere M\u00f6glichkeit ist die Nutzung eines Online\u2011Tools, das beim Hochladen automatisch Alt\u2011Tags generiert. Diese Programme verkn\u00fcpfen das Bild automatisch mit seiner Beschreibung, was praktisch ist, falls Nutzer auf Ihrer Seite das Bild nicht sehen k\u00f6nnen.<\/p>\n
Das Alt\u2011Attribut wird verwendet, wenn das data\u2011attribute=“alt“ auf Elemente angewendet wird. Es zeigt ein kleines Informations\u2011Popup an, wenn Nutzer den Mauszeiger \u00fcber ein Element bewegen. Das kann n\u00fctzlich sein, wenn Ihre Website nicht viele Bilder enth\u00e4lt und Sie zus\u00e4tzliche Informationen bereitstellen m\u00f6chten, ohne dass Nutzer ein neues Browserfenster \u00f6ffnen m\u00fcssen.<\/p>\n
Standardm\u00e4\u00dfig ist diese Funktion in den meisten Browsern deaktiviert. Wenn Sie unsicher sind, wie Sie sie aktivieren, dr\u00fccken Sie gleichzeitig Strg + die Taste I. Wenn Ihr Browser diese Funktion unterst\u00fctzt, erscheint ein Informationsfenster in der N\u00e4he des oberen Bildschirmrands.<\/p>\n
Der Text sollte f\u00fcr jedes Bild einzigartig sein und es spezifisch sowie transparent beschreiben. So k\u00f6nnen Screenreader den Inhalt f\u00fcr Nutzer, die Ihre Bilder nicht sehen k\u00f6nnen, vorlesen.<\/p>\n
Achten Sie auf korrekte Interpunktion im Alt\u2011Text, da diese das Erscheinungsbild Ihrer Seite in verschiedenen Browsern beeinflussen kann.<\/p>\n
Verwenden Sie in Ihrem Alt\u2011Text keine HTML\u2011Tags, wie Links oder Kursivierungen, da dies Screenreadern Probleme bereiten kann.<\/p>\n
Ist das Motiv des Bildes eindeutig genug, um auch au\u00dferhalb des Kontexts Sinn zu ergeben, versuchen Sie, den Originaldateinamen in die Beschreibung aufzunehmen, damit Screenreader leichter darauf verweisen k\u00f6nnen.<\/p>\n
Was bedeutet Alt\u2011Text in HTML?<\/strong><\/p>\n Das HTML\u2011Tag <img> unterst\u00fctzt ein Attribut zur Definition alternativen Texts f\u00fcr die Anzeige des Bildes.<\/p>\n Sie m\u00fcssen die Alt\u2011Eigenschaft in VB oder \u201ealt\u201c in HTML verwenden, um Alt\u2011Text zu erstellen. Sie geben sie als String ein, ohne Leerzeichen darin.<\/p>\n<\/div>\n<\/div>\n<\/div>\n Das Alt\u2011Attribut auf einer Website listet die Schl\u00fcsselw\u00f6rter auf, die in einem Alt\u2011Tag optimiert werden sollten.<\/p>\n Alt\u2011Attribute auf einer Website werden verwendet, wenn ein Bild nicht geladen wird oder von Nutzern nicht gesehen werden kann. Sie k\u00f6nnen auch in Verbindung mit CSS\u2011Designs eingesetzt werden, um Bilder anzuzeigen, wenn sie nicht verf\u00fcgbar sind.<\/p>\n Wenn Sie m\u00f6chten, dass das Alt\u2011Attribut Ihrer Website f\u00fcr Suchmaschinen optimiert ist, sollte Ihr Text relevante Schl\u00fcsselw\u00f6rter enthalten, die sich auf das betreffende Bild beziehen. Diese Schl\u00fcsselw\u00f6rter sollten jedoch nicht mit dem Dateinamen oder der Bildunterschrift identisch sein.<\/p>\n Das Alt\u2011Attribut ist ein wesentlicher Bestandteil der SEO\u2011Strategie einer Website. Richtig umgesetzt hilft es sowohl Nutzern als auch Suchmaschinen\u2011Crawlern, sich auf Ihrer bildlastigen Seite besser zu orientieren. Wir hoffen, dass dieser Beitrag Ihnen hilfreiche Hinweise geliefert hat.<\/p>\n Seiten, auf die Suchergebnisse verlinken (ohne interne Links):<\/p>\n developers.google.com<\/strong><\/a><\/p>\n support.google.com<\/strong><\/a><\/p>\n en.wikipedia.org<\/strong><\/a><\/p>\n knowledge.hubspot.com<\/strong><\/a><\/p>\n support.siteimprove.com<\/strong><\/a><\/p>\nWas ist das Alt\u2011Attribut auf einer Website?<\/strong><\/h2>\n
Abschluss:<\/strong><\/h2>\n
Quellen & Externe Links<\/strong><\/h2>\n
\n
\n
\n
\n
\n