Das HTML-Element <figure>: Visuelle Inhalte effektiv darstellen
Lukas Fuchs
vor 8 Monaten
in
HTML
3 Minuten Lesedauer
Was ist das HTML-Element <figure>?
Das HTML-Element <figure> ist ein semantisches Element, das dazu dient, visuelle Inhalte wie Bilder, Diagramme, Grafiken oder andere eingebettete Medien in einem Dokument zu gruppieren. Es bietet dir eine Möglichkeit, visuelle Inhalte vom Haupttext abzugrenzen und ihnen Kontext und Bedeutung zu verleihen.
Zwecke des <figure>-Elements
Das <figure>-Element hat mehrere wichtige Zwecke:
Gruppierung visueller Inhalte: Es fasst visuelle Elemente zu einer semantisch zusammenhängenden Einheit zusammen, die dann leichter als Ganzes bearbeitet und gestaltet werden kann.
Bereitstellung von Bildunterschriften: Durch die Verwendung des figcaption-Elements kannst du Bildunterschriften, Erklärungen oder andere ergänzende Informationen unterhalb deiner visuellen Inhalte hinzufügen.
Verbesserung der Barrierefreiheit: Das <figure>-Element bietet zusätzliche Informationen für Bildschirmlesegeräte, die es sehbehinderten Nutzern ermöglichen, deine visuellen Inhalte leichter zu verstehen.
Unterstützung responsiver Layouts: Durch die Gruppierung visueller Inhalte können sie leichter in responsiven Layouts auf unterschiedlichen Bildschirmgrößen angezeigt werden.
Verwendung des Elements für visuelle Inhalte
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.
<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:
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.
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 solltest du folgende Best Practices beachten:
Inhalte beschreibende Titel verwenden
Verwende die <caption>-Unterzeile, um den Inhalt der Abbildung kurz und prägnant zu beschreiben. Dies verbessert die Barrierefreiheit, indem es Screenreadern und anderen Hilfsmitteln hilft, die Bedeutung der visuellen Inhalte zu vermitteln.
Alternativtext angeben
Stelle sicher, dass du einen aussagekräftigen Alternativtext für die Abbildung angibst, indem du das alt-Attribut verwendest. Dies ist unerlässlich, um die Zugänglichkeit für Benutzer zu gewährleisten, die die Abbildung nicht anzeigen können, z. B. aufgrund von Sehbehinderungen oder langsamen Internetverbindungen.
Bildunterschriften einfügen
Falls erforderlich, füge Bildunterschriften zur Abbildung hinzu, indem du das figcaption-Element verwendest. Dies bietet zusätzlichen Kontext oder Informationen zur Abbildung, die nicht unbedingt aus dem Titel oder dem Alternativtext hervorgehen.
Verwende hochwertige Bilder, die klar und für das jeweilige Gerät oder die Bildschirmgröße optimiert sind. Dies verbessert die Benutzererfahrung und sorgt für eine bessere Darstellung deiner visuellen Inhalte.
Responsive Bilder verwenden
Verwende responsive Bilder, um sicherzustellen, dass deine Abbildungen auf allen Geräten und Bildschirmgrößen angemessen dargestellt werden. Du kannst moderne Techniken wie srcset und sizes verwenden, um Bilder für unterschiedliche Auflösungen bereitzustellen.
Barrierefreiheit beachten
Stelle sicher, dass deine Verwendung des -Elements den Web Accessibility Guidelines entspricht. Dies umfasst die Bereitstellung von Alternativtext, die Verwendung von <caption> und figcaption für die Beschreibung von Inhalten und die Sicherstellung, dass die Abbildungen über einen angemessenen Kontrast zum Hintergrund verfügen.
Unterstützung und Kompatibilität von
Das HTML-Element wird von fast allen modernen Browsern unterstützt, darunter:
Google Chrome
Mozilla Firefox
Microsoft Edge
Safari
Opera
Kompatibilität mit älteren Browsern
Ältere Browser wie Internet Explorer 8 und früher unterstützen das Element nicht. Wenn du sicherstellen möchtest, dass dein Inhalt in diesen Browsern korrekt dargestellt wird, kannst du CSS-Fallbacks verwenden.
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;
}
Browsererweiterungen
Zusätzlich zur nativen Unterstützung durch Browser existieren Browsererweiterungen, die die Funktionalität des Elements verbessern können. Beispielsweise bietet die Erweiterung "Figure Plus" für Firefox zusätzliche Optionen zur Anpassung des Erscheinungsbilds von Bildern und Bildunterschriften.
Barrierefreiheit
Das Element ist von Natur aus barrierefrei und unterstützt assistive Technologien wie Bildschirmlesegeräte, die den Inhalt für Benutzer mit Sehbehinderungen vorlesen können. Dies ist wichtig, um die Zugänglichkeit deiner Website zu gewährleisten.
Das HTML-Element wird von allen modernen Browsern unterstützt, und es gibt Fallbacks für ältere Browser. Außerdem gibt es Browsererweiterungen, die die Funktionalität von erweitern können. Das Element ist außerdem barrierefrei, was die Zugänglichkeit deiner Website verbessert.
