Ihr Bild ist wahrscheinlich nicht dekorativ

Veröffentlicht: 2022-03-10
Kurze Zusammenfassung ↬ Die Bildplatzierung im modernen Web ist sehr beabsichtigt und trägt dazu bei, den Gesamtzweck einer Seite oder Ansicht zu kommunizieren. Das bedeutet, dass fast jedes deklarierte Bild eine alternative Beschreibung haben muss.

Das alt -Attribut des img -Elements kann „genullt“ werden, was bedeutet, dass es auf eine leere Zeichenfolge anstelle einer Textbeschreibung gesetzt wird. Das Nullen einer Alt-Beschreibung bedeutet, dass es keine Informationen zwischen den öffnenden und schließenden Anführungszeichen gibt. Wenn ein Leerzeichen vorhanden ist, wird es nicht als auf Null gesetzt betrachtet:

  
<img alt="" src="/images/cat.jpg" />
Dieses Bild wurde auf Null gesetzt.
  
<img alt=" " src="/images/dog.jpg" />
Dieses Bild wurde nicht genullt.

Was bedeutet „dekorativ“?

Das Nullen eines Bildes zeigt an, dass es nur zu dekorativen Zwecken dient.

In diesem Zusammenhang bedeutet dekorativ, dass das Bild keine Informationen visuell vermittelt , die wichtig sind, um den Zweck der Seite oder Ansicht zu verstehen und warum das Bild als Teil davon enthalten ist.

Dekorativ bedeutet nicht, dass das Bild Inhalte enthält, die als Dekoration betrachtet werden.

„

Beispielsweise möchte eine Website, die Tapeten verkauft, alternative Beschreibungen für Tapetenmuster haben:

 <a href="/products/umbrella?variant=73849024783051"> <img alt="Small red and white illustrated umbrellas on a teal background." src="/images/73849024783051.png" /> </a>

Ein weiteres Beispiel könnte eine Museumswebsite sein, auf der die Präsentation eines Stücks aus ihrer Sammlung sowohl von einer alternativen Beschreibung als auch von einer Bildunterschrift profitieren könnte:

 <figure role="figure" aria-label="View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds."> <img alt="A tile painting, composed of 33 Delft tiles forming a view of the port of Rotterdam. Set in a modern mahogany frame, with gilded inscription on bottom border." src="/collection/w0895/2005-1057.png" /> <figcaption> View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds. </figcaption> </figure>

Stellen Sie sicher, dass Ihre alternative Beschreibung auch Satzzeichen enthält!

Warum möchten Sie ein Bild dekorativ machen?

Assistive Technologie überspringt genullte Bilder und kündigt ihre Anwesenheit nicht an. Die Gründe dafür sind meist historischer Natur.

Alte Layouttechniken

Frühe Webentwicklungstechniken stützten sich auf Bilder, um ein konsistentes Layout über verschiedene Betriebssysteme, Browser und Browserversionen hinweg zu gewährleisten. Das häufigste Beispiel dafür war ein spacer.gif , ein transparentes 1×1-Pixel, das auf verschiedene Größen gestreckt wurde, um den Inhalt an seinen Platz zu bringen.

Drei gestreckte spacer.gifs, die verwendet wurden, um einen äußeren Rand für den Text „Willkommen auf meiner Homepage“ zu erstellen.
Drei gestreckte spacer.gifs, die verwendet wurden, um einen äußeren Rand für den Text „Willkommen auf meiner Homepage“ zu erstellen. (Große Vorschau)

Diese Technik würde typischerweise viele Abstandsbilder verwenden , um ein visuelles Design zu erstellen. Ohne eine Möglichkeit, ihre Anwesenheit zum Schweigen zu bringen, würden diese Bilder die Ankündigungen der Hilfstechnologie verwirren und es verwirrend und zeitaufwändig machen, auf Webinhalten zu navigieren und Maßnahmen zu ergreifen.

Alte Designtechniken

Bevor es CSS-Eigenschaften wie box-shadow gab, mussten Entwickler Techniken verwenden, die das dekorative Styling zerstückelten, damit es mit Inhalten unbestimmter Höhe oder Breite funktionierte. Diese Technik wurde als 9-Slice-Skalierung bezeichnet, ein Begriff, der sich auf die 9 Inhaltsabschnitte bezieht, die Sie erstellen müssten.

Der Text „Die 9-Slice-Skalierungstechnik verwendete sich wiederholende Hintergrundbilder für Inhalte mit flexibler Breite oder Höhe.“ umgeben von Spalten und Zeilen für jede seiner vier Seiten. In jeder der vier Ecken befindet sich eine quadratische Fläche. In den quadratischen Bereichen und Spalten und Zeilen befinden sich generische Bildsymbole. Das Bildsymbol wiederholt sich in den Spalten und Zeilen und zeigt, wie eine Textur gekachelt werden kann.
Die 9-Slice-Skalierungstechnik (große Vorschau)

Ähnlich wie bei Abstandsbildern wurden bei der 9-Slice-Skalierung mehrere Bilder verwendet, um den gewünschten visuellen Effekt zu erzielen. Und ähnlich wie bei Abstandhalterbildern bestand die einzige Möglichkeit , die durch diese Bilder verursachte Unordnung zu beseitigen , darin, sie als dekorativ zu kennzeichnen.

Mehr nach dem Sprung! Lesen Sie unten weiter ↓

Redundante Ankündigungen

Es gibt das seltene Szenario, in dem ein Bild auf einer Seite oder Ansicht wiederholt wird und seine wiederholten Platzierungen keinen zusätzlichen Kontext liefern. Sie sollten in dieser Situation vorsichtig sein, ein Bild als dekorativ zu markieren, da das Fehlen einer Ankündigung für ein sichtbares Bild für jemanden mit Sehbehinderung, der einen Bildschirmleser verwendet, verwirrend sein kann.

Ergänzende Symbole

Links und Schaltflächen, die Symbole verwenden, sollten immer einen zugänglichen Namen haben, der die Funktionalität kommuniziert. Wenn das Design auch ein Icon enthält, muss das Design des Icons nicht kommuniziert werden.

 <button type="button"> <img src="icon-print.svg" alt="" /> Print </button>

Wenn die Komponente nur ein Symbol verwendet, sollte das Bild selbst verwendet werden, um den barrierefreien Namen zu erstellen:

 <button type="button"> <img src="icon-print.svg" alt="Print." /> </button>

Beachten Sie, dass eine sichtbare Textbeschriftung die bevorzugte Technik ist. Ein sichtbares Textlabel kann übersetzt werden und kommuniziert den Zweck direkter.

Ich habe keine Ahnung, was dieser Knopf macht.

Zeitgenössische Verwendung

Moderne CSS-Layout- und Styling-Techniken bedeuten, dass die Bildplatzierung jetzt sehr beabsichtigt ist. Das bedeutet, dass wenn ein Bild verwendet wird, höchstwahrscheinlich eine alternative Beschreibung benötigt wird.

Alternative Beschreibungen sollten den Zweck des Bildes vermitteln . Dazu gehört der Inhalt des Bildes, aber möglicherweise auch der Grund, warum es im Kontext der Seite oder der Ansicht enthalten ist, in die es eingefügt wurde. Dies ist einer der Gründe, warum alternative Bildbeschreibungen niemals vollständig automatisiert werden können.

Andere Möglichkeiten, Bilder anzuzeigen

Es gibt noch einige andere Möglichkeiten, ein Bild auf einer Seite oder Ansicht anzuzeigen. Es ist wichtig sicherzustellen, dass eine alternative Beschreibung bereitgestellt wird, wenn das Bild aussagekräftige Inhalte enthält – unabhängig von der verwendeten Technik.

Das picture

Das picture spielt keine implizite Rolle, was bedeutet, dass seine Anwesenheit der Hilfstechnologie keinen Zweck mitteilt. Dies bedeutet, dass es nicht verwendet werden kann, um das Vorhandensein eines „Bildes“ semantisch zu beschreiben.

Das picture Element ist ein Container für source und img -Elemente. Verwenden Sie das alt -Attribut des img -Elements, um eine alternative Beschreibung für das übergeordnete picture bereitzustellen.

 <a href="/product/9091866/color/3"> <picture> <source type="image/avif" /> <img alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue." src="9091866-3.png" /> </picture> </a>

Hintergrundbilder

Wir können CSS verwenden, um ein Bild als Hintergrund für ein HTML-Element zu deklarieren. Dies wird am häufigsten verwendet, um einem Design ein Gefühl von Textur zu verleihen.

Eine andere beliebte Technik besteht jedoch darin, ein background-image zu verwenden, um ein Bild so zu platzieren, dass der Entwickler keine Kontrolle über die Größe des Bildes hat, das jemand hochlädt. background-image stellt in Kombination mit anderen Eigenschaften wie background-size sicher, dass Inhalte unbekannter Größe angezeigt werden, ohne das Design zu beeinträchtigen.

Siehe Pen [Beispiel für Hintergrundbild als Vordergrundbild] (https://codepen.io/smashingmag/pen/OJprPwK) von Eric Bailey.

Siehe das Beispiel Stift-Hintergrundbild als Vordergrundbild von Eric Bailey.

In einem solchen Szenario könnte unser alter Freund spacer.gif wieder hilfreich sein!

Inline-SVG

SVG kann angezeigt werden, indem entweder über das src -Attribut in einem img -Element darauf verlinkt wird oder indem der SVG-Code inline in der Seite oder Ansicht platziert wird.

Wenn Sie Inline-SVG verwenden, müssen Sie anstelle eines alt -Attributs das title (und möglicherweise desc ) von SVG verwenden.

 <svg role="img" aria-labelledby="icon-bookmark-desc" xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <title>Bookmark.</title> <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/> </svg>

Gleichwertige Erfahrung

Im modernen Webdesign und in der Entwicklung ist das Anzeigen eines Bildes eine höchst beabsichtigte Handlung. Alternative Beschreibungen ermöglichen es uns, den Inhalt des Bildes zu erklären und dabei zu kommunizieren, warum es sich lohnt, .

Nur weil ein Bild etwas Fantasievolles zeigt, heißt das nicht, dass es nicht der Beschreibung wert ist. Die Ankündigung seiner Anwesenheit stellt sicher, dass jeder, unabhängig von Fähigkeiten oder Umständen, Ihre digitale Erfahrung vollständig verstehen kann.

Weiterführende Literatur zu SmashingMag:

  • Barrierefreiheit in Chrome DevTools
  • Ein vollständiger Leitfaden für Barrierefreiheitswerkzeuge
  • Zugängliche Bilder, wenn sie am wichtigsten sind
  • Zugängliche SVGs: Perfekte Muster für Screenreader-Benutzer
  • Entwerfen mit reduzierter Bewegung für Bewegungsempfindlichkeiten
  • Lesen Sie weitere Artikel zu Barrierefreiheit, Benutzerfreundlichkeit und UX.