Das HTML-Element

: Visuelle Inhalte effektiv darstellen

Das HTML-Element <figure> ist ein semantisches Tag, das verwendet wird, um visuelle Inhalte wie Bilder, Diagramme oder Grafiken einzurahmen. Durch die Verwendung von <figure> kannst du diese Inhalte auf eine strukturierte und barrierefreie Weise darstellen.

Strukturierung visueller Inhalte

Mithilfe von <figure> kannst du visuelle Inhalte in logische Blöcke unterteilen. Das Element verfügt über die folgenden Tegelemente:

• <figcaption>: Bietet eine Bildunterschrift oder eine kurze Beschreibung des visuellen Inhalts.
• <figurecontent>: Enthält den eigentlichen visuellen Inhalt, z. B. ein Bild, ein Diagramm oder eine Grafik.

Vorteile der Strukturierung

Die Strukturierung visueller Inhalte bietet mehrere Vorteile:

• Verbesserte Zugänglichkeit: Bildunterschriften und Beschreibungen erleichtern Menschen mit Sehbehinderungen den Zugriff auf visuelle Inhalte.
• Suchmaschinenoptimierung: Bildunterschriften und alternativer Text helfen Suchmaschinen, visuelle Inhalte zu indizieren und zu verstehen.
• Verbesserte Nutzerfreundlichkeit: Gut strukturierte Inhalte sind für Benutzer einfacher zu scannen und zu verstehen.

Richtige Verwendung

Um das Element <figure> für visuelle Inhalte richtig zu verwenden, solltest du folgende Richtlinien beachten:

• Verwende <figure> für zusammengehörige visuelle Inhalte: Gruppiere verwandte Inhalte in einer einzigen <figure>-Struktur.
• Verwende <figcaption> für Bildunterschriften: Stelle zusätzliche Informationen oder Beschreibungen in der <figcaption>-Struktur bereit.
• Verwende alternativen Text für Bilder: Verwende das Attribut alt für Bilder, um einen alternativen Text für Benutzer bereitzustellen, die Bilder nicht sehen können.
• Gestalte deine Inhalte responsiv: Verwende CSS, um sicherzustellen, dass deine visuellen Inhalte auf verschiedenen Geräten korrekt angezeigt werden.

Vorteile des Elements

Das HTML-Element <figure> bietet mehrere Vorteile, die dir die Darstellung visueller Inhalte auf deiner Website erleichtern:

Zentralisierte Kapsel für visuelle Inhalte

<figure> definiert einen dedizierten Bereich auf deiner Seite, der für visuelle Inhalte wie Bilder, Diagramme oder Tabellen reserviert ist. Diese Kapselung erleichtert es dir, visuelle Elemente zu gruppieren und einen konsistenten visuellen Stil auf deiner gesamten Website aufrechtzuerhalten.

Verbesserte Semantik und Barrierefreiheit

<figure> verleiht visuellen Inhalten eine semantische Struktur, indem es sie als Figuren kennzeichnet. Dies verbessert die Barrierefreiheit deiner Website für Personen mit Sehbehinderungen und macht den Inhalt für Suchmaschinen verständlicher.

Flexibles Layout

Mit <figure> kannst du visuelle Inhalte flexibel auf deiner Seite anordnen. Du kannst CSS verwenden, um die Ausrichtung, Größe und Beschriftung anzupassen, wodurch du ein ansprechendes und benutzerfreundliches Design erstellen kannst.

Dokumentenfluss beibehalten

Im Gegensatz zu anderen Elementen wie <div> behält <figure> den Dokumentenfluss bei. Das bedeutet, dass Text und andere Elemente um die Figur herumfließen, sodass du visuelle Inhalte nahtlos in deinen Inhalt integrieren kannst.

Verbesserte Zugänglichkeit

<figure> verfügt über native Unterstützung für Barrierefreiheitsfunktionen wie Alternativtexte und Beschriftungen. Dies stellt sicher, dass visuelle Inhalte für alle Nutzer zugänglich sind, unabhängig von ihren Fähigkeiten.

Unterschiede zwischen <figure> und <img>

Das Element <img> dient ausschließlich zur Darstellung eines Bildes, während <figure> eine umfassendere semantische Bedeutung für visuelle Inhalte bietet. Die folgenden Unterschiede verdeutlichen den unterschiedlichen Zweck dieser Elemente:

Semantischer Unterschied

<figure>:

• Definiert einen eigenständigen Block von visuellem Inhalt, der eine Bildunterschrift, einen Titel oder andere relevante Informationen enthalten kann.
• Bietet eine semantische Struktur für Bildschirmlesegeräte und andere Hilfstechnologien, um den Inhalt präzise zu beschreiben.

<img>:

• Stellt lediglich ein Bild dar, ohne weitere semantische Bedeutung.

Inhalt

<figure>:

• Kann ein beliebiges visuelles Element enthalten, wie z. B. Bilder, Grafiken, Diagramme, Videos oder interaktive Inhalte.
• Ermöglicht die Verwendung einer Bildunterschrift oder eines Titels, um zusätzliche Informationen bereitzustellen.

<img>:

• Kann nur Bilder darstellen.

Gruppierung

<figure>:

• Gruppiert visuelle Inhalte zusammen, wodurch Querverweise und die Erstellung von Galerien erleichtert werden.
• Ermöglicht die Erstellung komplexerer visueller Layouts.

<img>:

• Ist ein eigenständiges Element und kann nicht mit anderen visuellen Elementen gruppiert werden.

Barrierefreiheit

<figure>:

• Bietet eine bessere Barrierefreiheit, da Bildschirmleser und andere Hilfstechnologien den Inhalt genau beschreiben können.
• Ermöglicht die Verwendung alternativer Textbeschreibungen für Bilder.

<img>:

• Kann für Benutzer mit eingeschränkten Sehfähigkeiten weniger zugänglich sein, da Bildschirmleser möglicherweise nur den Dateinamen des Bildes lesen können.

Insgesamt bietet das Element <figure> eine umfassendere und semantischere Darstellung visueller Inhalte als <img>. Es ermöglicht eine bessere Gruppierung, Flexibilität bei der Inhaltsdarstellung und eine verbesserte Barrierefreiheit.

Barrierefreiheit von

Als Webentwickler ist es entscheidend, dass deine Websites für alle Nutzer zugänglich sind, unabhängig von ihren Fähigkeiten. Das Element <figure> kann eine wertvolle Möglichkeit sein, die Barrierefreiheit visueller Inhalte zu verbessern.

Semantische Bedeutung

Das Element <figure> bietet eine semantische Bedeutung für visuelle Inhalte, die von assistierenden Technologien wie Bildschirmlesegeräten interpretiert werden kann. Dies ermöglicht es Nutzern, den Inhalt einer Abbildung ohne visuelle Hinweise zu verstehen.

Bildunterschriften

Bildunterschriften sind ein wesentlicher Bestandteil der Barrierefreiheit. Sie bieten eine textliche Beschreibung des Bildinhalts und können von Bildschirmlesegeräten vorgelesen werden. Mit dem Element <figure> kannst du eine Bildunterschrift mithilfe des Elements <caption> hinzufügen.

Alternativtexte

Alternativtexte sind eine weitere wichtige Methode, um die Barrierefreiheit zu gewährleisten. Sie liefern Nutzern eine textuelle Beschreibung des Bildinhalts, wenn dieses nicht angezeigt werden kann. Verwende das Attribut alt des Elements <img> innerhalb der Figur, um einen Alternativtext hinzuzufügen.

Tastaturnavigation

Stelle sicher, dass Nutzer mit Tastaturen auf alle Elemente innerhalb der Figur zugreifen können. Verwende Tab-Indexe oder ARIA-Rollen, um die Tastaturnavigation zu ermöglichen.

Kontrast

Stelle ausreichenden Kontrast zwischen dem Text der Bildunterschrift und dem Hintergrund sicher. Dies ist besonders wichtig für Nutzer mit Sehbehinderungen.

Best Practices für die Barrierefreiheit von

• Verwende semantisch korrekte Elemente wie <figure> und <caption>.
• Füge immer Bildunterschriften und Alternativtexte hinzu.
• Stelle ausreichenden Kontrast zwischen Text und Hintergrund sicher.
• Ermögliche die Tastaturnavigation für alle Elemente innerhalb der Figur.
• Teste deine Website mit Bildschirmlesegeräten, um sicherzustellen, dass sie für Nutzer mit Sehbehinderungen zugänglich ist.

Best Practices für die Verwendung von

Beim Einsatz des HTML-Elements

figure {
  display: block;
  margin: 1em;
  padding: 1em;
  border: 1px solid #ccc;
}

figure img {
  display: block;
  margin: 0 auto;
}

/* Fallback für Internet Explorer 8 und früher */
.ie8 figure {
  display: inline;
}