Alt-Attribut für CSS-Hintergrundbild

Dies ist eine, die ich vorher nicht angehen musste. Ich muss Alt-Tags für alle Bilder auf einer Site verwenden, einschließlich derjenigen, die vom CSS-Hintergrundbildattribut verwendet werden.

Soweit ich weiß, gibt es keine solche CSS-Eigenschaft. Wie geht das bitte am besten?

Hintergrundbilder können sicher Daten präsentieren! Tatsächlich wird dies häufig empfohlen, wenn die Darstellung visueller Symbole kompakter und benutzerfreundlicher ist als eine entsprechende Liste von Textklappentexten. Jede Verwendung von Bild-Sprites kann von diesem Ansatz profitieren.

Es ist durchaus üblich, dass Symbole für Hotellisten Annehmlichkeiten anzeigen. Stellen Sie sich eine Seite vor, auf der 50 Hotels aufgelistet sind und jedes Hotel 10 Annehmlichkeiten hat. Ein CSS-Sprite wäre perfekt für solche Dinge - bessere Benutzererfahrung, weil es schneller ist. Aber wie implementieren Sie ALT-Tags für diese Bilder? Beispielseite .

Die Antwort ist, dass sie überhaupt keinen altText verwenden, sondern das titleAttribut auf dem enthaltenen div verwenden.

HTML

<div class="hotwire-fitness" title="Fitness Centre"></div>

CSS

.hotwire-fitness {
    float: left;
    margin-right: 5px;
    background: url(/prostyle/images/new_amenities.png) -71px 0;
    width: 21px;
    height: 21px;
}

Laut W3C (siehe Links oben) dient das title-Attribut weitgehend dem gleichen Zweck wie das alt-Attribut

Titel

Werte des title-Attributs können von Benutzeragenten auf verschiedene Arten gerendert werden. Beispielsweise zeigen visuelle Browser den Titel häufig als "Tooltip" an (eine kurze Meldung, die angezeigt wird, wenn das Zeigegerät über einem Objekt pausiert). Audio-Benutzeragenten können die Titelinformationen in einem ähnlichen Kontext sprechen. Wenn Sie beispielsweise das Attribut für einen Link festlegen, können Benutzeragenten (visuell und nicht visuell) Benutzer über die Art der verknüpften Ressource informieren:

alt

Das alt-Attribut wird in einer Reihe von Tags definiert (nämlich img, area und optional für Eingabe und Applet), damit Sie ein Textäquivalent für das Objekt bereitstellen können.

Ein Textäquivalent bietet Ihrer Website und ihren Besuchern in den folgenden häufigen Situationen die folgenden Vorteile:

• Heutzutage sind Webbrowser auf einer Vielzahl von Plattformen mit sehr unterschiedlichen Kapazitäten verfügbar. Einige können überhaupt keine oder nur eingeschränkte Bildtypen anzeigen. Einige können so konfiguriert werden, dass keine Bilder geladen werden. Wenn in Ihrem Code das alt-Attribut in den Bildern festgelegt ist, zeigen die meisten dieser Browser die von Ihnen angegebene Beschreibung anstelle der Bilder an
• Einige Ihrer Besucher können keine Bilder sehen, seien sie blind, farbenblind oder sehbehindert. Das alt-Attribut ist eine große Hilfe für diejenigen, die sich darauf verlassen können, um eine gute Vorstellung davon zu haben, was auf Ihrer Seite steht
• Suchmaschinen-Bots gehören zu den beiden oben genannten Kategorien: Wenn Sie möchten, dass Ihre Website so gut indiziert wird, wie es verdient, verwenden Sie das alt-Attribut, um sicherzustellen, dass wichtige Abschnitte Ihrer Seiten nicht übersehen werden.

In diesem Yahoo Developer Network ( Archiv - Link ) Artikel wird vorgeschlagen , dass , wenn Sie absolut muss ein Hintergrundbild statt img Element und alt - Attribut verwenden, Attribute Verwendung ARIA wie folgt:

<div role="img" aria-label="adorable puppy playing on the grass">
  ...
</div>

Der Anwendungsfall in diesem Artikel beschreibt, wie Flickr Hintergrundbilder verwendet hat, da die Leistung auf Mobilgeräten erheblich verbessert wurde.

Ich denke, Sie sollten diesen Beitrag von Christian Heilmann lesen . Er erklärt, dass Hintergrundbilder NUR der Ästhetik dienen und nicht zur Darstellung von Daten verwendet werden sollten und daher von der Regel ausgenommen sind, dass jedes Bild einen alternativen Text haben sollte.

Auszug (Schwerpunkt Mine):

CSS-Hintergrundbilder, die per Definition nur einen ästhetischen Wert haben - nicht den visuellen Inhalt des Dokuments selbst . Wenn Sie ein Bild in die Seite einfügen müssen, das eine Bedeutung hat, verwenden Sie ein IMG-Element und geben Sie ihm einen alternativen Text im alt-Attribut.

Ich stimme ihm zu.

Wie in anderen Antworten erwähnt, gibt es kein (unterstütztes) alt-Attribut für ein div-Tag nur für das img-Tag.

Die eigentliche Frage ist, warum Sie allen Hintergrundbildern das alt-Attribut hinzufügen müssen für die Site . Basierend auf dieser Antwort können Sie bestimmen, welchen Weg Sie in Ihrem Ansatz einschlagen müssen.

Visuell / Text: Wenn Sie lediglich versuchen, einen Text-Fallback für den Benutzer hinzuzufügen, wenn das Bild nicht geladen werden kann, verwenden Sie einfach das title-Attribut. Die meisten Browser bieten einen visuellen Tooltipp (Meldungsfeld), wenn ein Benutzer mit der Maus über das Bild fährt. Wenn das Bild aus irgendeinem Grund nicht geladen wird, verhält es sich wie ein alt-Attribut, das Text anzeigt, wenn das Bild fehlschlägt. Diese Technik ermöglicht es der Site weiterhin, die Ladezeiten zu beschleunigen, indem die Bilder auf Hintergründe gesetzt werden.

Bildschirmleser: Die Option "Mitte der Straße" ist unterschiedlich, da die technische Beibehaltung Ihrer Bilder als Hintergrund und die Verwendung des Titelattributansatzes wie oben angegeben funktionieren sollten: "Audio-Benutzeragenten sprechen möglicherweise die Titelinformationen in einem ähnlichen Kontext."Es ist jedoch nicht garantiert, dass dies in allen Fällen funktioniert, einschließlich einiger Leser, die möglicherweise alles zusammen ignorieren. Wenn Sie sich letztendlich für diesen Ansatz entscheiden, können Sie auch versuchen, Arien-Labels hinzuzufügen, um sicherzustellen, dass Screenreader diese aufgreifen.

SEO / Suchmaschinen: Hier ist die große, wenn Sie wie ich waren, haben Sie Ihre Hintergrundbilder hinzugefügt, alles war gut. Dann, Monate später, stellte der Kunde (oder vielleicht Sie selbst) fest, dass Sie erstklassiges SEO-Gold verpassen, weil Sie keine Alt-Werte für Ihre Bilder haben. Beachten Sie, dass das title-Attribut für Suchmaschinen aus meiner Forschung und wie in einem Artikel hier erwähnt, kein Gewicht hat: https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly /.. Wenn Sie also SEO anstreben, benötigen Sie ein img-Tag mit dem alt-Attribut. Ein möglicher Ansatz besteht darin, nur sehr kleine tatsächliche Bilder mit Alt-Attributen auf die Website zu laden. Auf diese Weise erhalten Sie die gesamte Suchmaschinenoptimierung und müssen das vorhandene CSS nicht neu anpassen. Dies kann jedoch je nach Größe zu einer zusätzlichen Ladezeit führen, und Google überprüft bei der Indizierung tatsächlich den Bildpfad. Kurz gesagt, wenn Sie diesen Weg gehen, akzeptieren Sie einfach, was zu tun ist, und fügen Sie die tatsächlichen Bilder hinzu, anstatt Hintergründe zu verwenden.

Die allgemeine Überzeugung ist, dass Sie keine Hintergrundbilder für Dinge mit aussagekräftigem semantischem Wert verwenden sollten, daher gibt es keine wirklich geeignete Möglichkeit, Alt-Daten mit diesen Bildern zu speichern. Die wichtige Frage ist, was machen Sie mit diesen Alt-Daten? Möchten Sie, dass es angezeigt wird, wenn die Bilder nicht geladen werden? Benötigen Sie es für eine programmatische Funktion auf der Seite? Sie können die Daten beliebig speichern, indem Sie zusammengesetzte CSS-Eigenschaften verwenden, die keine Bedeutung haben (möglicherweise Fehler verursachen?), ODER indem Sie versteckte Bilder mit dem Bild und dem Alt-Tag hinzufügen. Wenn Sie dann ein Hintergrundbild benötigen, können Sie das Bild vergleichen Pfade und behandeln Sie die Daten dann, wie Sie möchten, mit einem benutzerdefinierten Skript, um zu simulieren, was Sie benötigen. Ich weiß jedoch nicht, wie ich den Browser dazu bringen kann, automatisch eine Art Alt-Attribut für Hintergrundbilder zu verarbeiten.

Der klassische Weg, dies zu erreichen, besteht darin, den Text in das div einzufügen und eine Bildersatztechnik zu verwenden.

<div class"ir background-image">Your alt text</div>

Wenn das Hintergrundbild die Klasse ist, in der Sie das Hintergrundbild zuweisen, und ir die HTML5-Boilerplates-Bildersatzklasse sein könnte, siehe unten:

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

Dieser Artikel von W3C sagt Ihnen, was Sie tun sollten https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage

und hat Beispiele hier http://mars.dequecloud.com/demo/ImgRole.htm

unter denen

<a href="http://www.facebook.com">
 <span class="fb_logo" role="img" aria-label="Connect via Facebook">
 </span>
</a>

Wenn das Element mit dem Hintergrundbild wie im obigen Beispiel nur ein leerer Container ist, ziehe ich es persönlich vor, den Text dort einzufügen und ihn mit CSS auszublenden. genau dort, wo Sie stattdessen das Bild zeigen:

<a href="http://www.facebook.com"><span class="fb_logo">
  Connect via Facebook
</span></a>

.fb_logo {
  height: 37px; width: 37px;
  background-image: url('../gfx/logo-facebook.svg');
  color:transparent; overflow:hidden; /* hide the text */
}

Hier ist meine Lösung für diese Art von Problem:

Erstellen Sie eine neue Klasse in CSS und positionieren Sie sie außerhalb des Bildschirms. Fügen Sie dann Ihren Alternativtext in HTML direkt vor der Eigenschaft ein, die Ihr Hintergrundbild aufruft. Kann jeden Tag sein, H1, H2, petc.

CSS

<style type="text/css">
  .offleft {
    margin-left: -9000px;
    position: absolute;
  }
</style>

HTML

<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image>  </div>

Mir ist nicht klar, was du willst.

Wenn Sie möchten, dass eine CSS-Eigenschaft den alt-Attributwert rendert, suchen Sie möglicherweise nach der CSS-Attributfunktion, zum Beispiel:

IMG:before { content: attr(alt) }

Wenn Sie das alt-Attribut in ein Hintergrundbild einfügen möchten, ist dies seltsam, da das alt-Attribut ein HTML-Attribut ist, während das Hintergrundbild eine CSS-Eigenschaft ist. Wenn Sie das HTML-Alt-Attribut verwenden möchten, benötigen Sie wahrscheinlich ein entsprechendes HTML-Element, um es einzufügen.

Warum müssen Sie "Alt-Tags für Hintergrundbilder verwenden": Ist dies aus einem semantischen Grund oder aus einem Grund für visuelle Effekte (und wenn ja, welchen Effekt oder welchen Grund)?

Sie können dies erreichen, indem Sie das altTag in das Feld einfügen, in dem divIhr Bild angezeigt wird.

Beispiel:

<div id="yourImage" alt="nameOfImage"></div>