Mitgliederversammlung 2017


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 7.10.2017 um 10:00 Uhr in Berlin statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite Mitgliederversammlung 2017.

Interessierte Gäste sind gern gesehen.

Anmeldung: https://forum.selfhtml.org/events/2

HTML/Textstrukturierung/figure

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Grafiken werden oft durch eine Beschriftung ergänzt.

figure[Bearbeiten]

Das HTML5-Element figure dient als semantisches Elternelement für eine zum Seiteninhalt gehörende Abbildung und das optionale Element figcaption, das den Untertitel umschließt. Falls das figure-Element ein figcaption-Element enthält, sollte es zur Unterstützung assistiver Technologien die ARIA-Rolle `group` bekommen.

Dabei kann das figure-Element neben Grafiken wie Bilder und Diagrammen auch andere mediale Inhalte wie Videos, Programmcode oder Textstellen wie Zitate oder tabellarische Übersichten enthalten.

  • IE 9
  • Opera
  • Firefox
  • Chrome
  • Safari
  • HTML5
Beispiel
<h1>Unser Logo</h1> <figure role="group"> <img src="Selfhtml-Logo-Neu.png" alt="SelfHTML-Logo"> <figcaption> Das neue SelfHTML-Logo von 2012 (<a href="#">weitere Informationen</a>) </figcaption> </figure>


Das <figure>-Element kann auch geschachtelt werden, um mehrere Abbildungen zu präsentieren. Auch in diesem Fall sollten alle figure-Elemente die ARIA-Rolle `group` bekommen und die Beschreibung der Gruppe als erstes Element verwendet werden.[1]

Beispiel
<h1>unser Logo</h1> <figure role="group"> <figcaption> Die Entwicklung des SelfHTML-Logos </figcaption> <figure role="group"> <img src="Selfhtml-logo.gif" alt="SelfHTML-Logo"> <figcaption> Das erste SelfHTML-Logo von 1999 (<a href="#">weitere Informationen</a>) </figcaption> </figure> <figure role="group"> <img src="Selfhtml-Logo-Neu.png" alt="SelfHTML-Logo"> <figcaption> Das neue SelfHTML-Logo von 2012 (<a href="#">weitere Informationen</a>) </figcaption> </figure> </figure>

figcaption[Bearbeiten]

Das optionale figcaption dient der Beschriftung des Inhaltes oder stellt eine Legende dar. Es kann sowohl vor als auch nach der Abbildung positioniert werden, es darf allerdings in einem figure-Element nur ein figcaption-Element geben.

Falls es sich um Bilder (img-Elemente) handelt, dürfen Sie dennoch nicht auf das alt-Attribut verzichten, denn das alt-Attribut ist als Ersatz gedacht, wenn die Grafik nicht geladen oder gesehen werden kann oder soll. Die Bildunterschrift figcaption kann auch ergänzende Informationen, etwa Links auf weiterführende Seiten enthalten.

Abbildungen mit CSS formatieren[Bearbeiten]

Wie eine Abbildung und ihre Beschriftung vom Browser genau dargestellt wird, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen, um Abbildungen darzustellen. Mit Stylesheets (CSS) können Sie die Abbildungen jedoch nach Wunsch formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:

Anwendungsbeispiele[Bearbeiten]

Unter CSS/Anwendung und Praxis/Bilder präsentieren werden mehrere typische Anwendungsfälle vorgestellt.

Quellen[Bearbeiten]

  1. html5accessibility.com: figures-nested

siehe auch[Bearbeiten]

Weblinks[Bearbeiten]