"

Für Web-Editor:innen

Titel

Regel

Jede visuell hervorgehobene Überschrift, sprich jeder Titel, ist als Heading <hx> definiert (und nicht nur fett). Die Abfolge der Titel (Headingstruktur) stimmt. Es werden keine Überschriften-Ebenen übersprungen. Nach Überschrift 2 darf nicht Überschrift 4 folgen. Fettung <strong> wird nur im Fliesstext zur Hervorhebung verwendet.

Hintergrund

Wichtig zu beachten bei der Behandlung von Textinhalten ist, dass die semantischen Strukturen innerhalb von Textinhalten in HTML explizit ausgezeichnet werden. Überschriften als Überschriften <hx>, Absätze als Paragraphen <p>, etc. Speziell blinde Menschen, allgemein aber für die Verwendung jeglicher maschineller Assistenztechnologien oder Suchmaschinen, sind darauf angewiesen, dass jegliche visuell sichtbare semantische Struktur aus dem HTML-Code ersichtlich ist. Visuelle Hervorhebung umfasst Schriftgrössen, Schriftarten, Unterstreichungen, Nummerierungen, Einfärbungen, vergrösserte Abstände aber auch spezielle Positionierungen von Inhalten, z. B.: durch Info-Kästen.

Dieses Bookmarklet, das die Heading-Struktur in der Browseransicht zeigt, ist unglaublich hilfreich.

Anleitungen

Code

Im Texteditor bzw. Quellcode sind die verschiedenen Überschriften mit <hx> … </hx> zu erkennen. Also z.B. Überschrift 1 ist <h1> … </h1>.

Drupal: hfh.ch

Im Editierungs-Modus von Drupal-Webseiten kann Überschrift 1 ausgewählt werden, diese sollte jedoch nur für Kapiteltitel verwendet werden. Für Titel von Abschnitten muss mit Überschrift 2 gestartet werden.

Im Bearbeitungsmodus klickst du den gewünschten Abschnitt an (1).

Visualisierung des Textes oberhalb des Bildes.

Dann öffnest du das Dropdown-Menu oberhalb des Textfeldes und wählst die gewünschte Überschrift (2).

Visualisierung des Textes oberhalb des Bildes.

Der Text sollte nun in der gewünschten Überschrift sein (3). Unter Quellcode (4) kannst du den HTML-Code ansehen.

Visualisierung des Textes oberhalb des Bildes.

In diesem Beispiel siehst du für Überschrift 2 den Code <h2> und </h2> vor bzw. nach dem Text. <p> und </p> kennzeichnen einen Abschnitt in der Form «Normal».

Visualisierung des Textes oberhalb des Bildes.

zuugs.hfh.ch / digital.hfh.ch

Die Kaptieltitel werden automatisch der Überschrift 1 zugeteilt. Deshalb kann innerhalb vom Kapitel nur Überschrift 2 (im Text-Editor als <h2> und </h2> ersichtlich) als höchste Hierarchiestufe gewählt werden. Sollen dem Abschnitt weitere Subabschnitte hinzugefügt werden, ist es wichtig, sich an die Reihenfolge zu halten (Überschrift 3 (Text-Editor: <h3> und </h3>), gefolgt von Überschrift 4 (Text-Editor: <h4> und </h4> etc.)). Kommt ein neues Thema, kann wieder Überschrift 2 gewählt werden.

Um eine neue Überschrift zu wählen, muss du in den gewünschten Abschnitt klicken (1) und dann das Dropdown-Menu oberhalb des Textfeldes öffnen (2). Dort kannst du die richtige Überschrift auswählen (3).

Visualisierung des Textes oberhalb des Bildes.

Danach solltest du die Änderung der Überschriftenart in der visuellen Ansicht sehen (4). Im Text-Editor (5) sind die HTML-Codes zu sehen (6).

Visualisierung des Textes oberhalb des Bildes.

Visualisierung des Textes oberhalb des Bildes.

Lizenz

Icon für Creative Commons Namensnennung-Nicht kommerziell-Weitergabe unter gleichen Bedinungen 4.0 International

E-Accessibility an der HfH Copyright © 2022 by Interkantonale Hochschule für Heilpädagogik is licensed under a Creative Commons Namensnennung-Nicht kommerziell-Weitergabe unter gleichen Bedinungen 4.0 International, except where otherwise noted.