Hierarchie der Überschriften

Das Layout eines Formulars besteht aus verschiedenen ineinander verschachtelten Containern. Diese Container können jeweils eigene Überschriften mitbringen. Beim Rendern des Formulares wird für jedes Element ein Hierarchie-Level ermittelt und am Element selber hinterlegt. Dieser Level bestimmt die Wertigkeit der Überschrift.

Hinweis: Das ist bisher nur in den per ReactiveForm generierten Formularen umgesetzt (z.B. BergPass)

Jede Überschrift wird im Html-Dokument über folgende Attribute gekennzeichnet:

  • aria-level: konkrete Zahl, welche die Hierarchiestufe der konkreten Überschrift angibt
  • role: "heading"

Durch die Verwendung dieser Html-Attribute sind die Html-Elemente bereits korrekt für Barrierefreiheits-Tools auswertbar.

Anzeige der Hierachie-Level für Entwicklung

In einigen Umgebungen kann man sich über den URL-Parameter #debug die Hierarchei-Level an den verschachtelten Elementen anzeigen lassen.

Styling der Überschriften

Variante 1: statisch

Jeder Container bekommt je nach Containertyp (Reiter, Feldgruppe, komplexe Subclass, Mehrfachfeld) einen Style für seine Überschrift. Damit kann zwischen den Typen optisch differenziert werden, es ist aber nicht möglich, unterschiedliche Styles (z.B. Größen) nach Hierarchie-Stufe zu vergeben.

Beispiel: Eine Feldgruppe hat immer den gleichen Überschriftenstyle egal, ob Sie direkt im Formular oder als Teil einer Unterklasse / eines Mehrfachfeldes verwendet wird.

Variante 2: dynamisch

Der Style einer Überschrift richtet sich NICHT nach dem Typ des Containers sondern nur nach dem Hierarchie-Level. Entsprechend müsste es entweder eine feste Zuordnung Level - Style geben oder eine 'Formel', die aus dem Hierarchie-Level den Style (z.B. die Font-Größe) berechnet. Damit wäre auch optisch eine beliebige Hierarchietiefe abbildbar.

Beispiel: Eine Feldgruppe auf Root-Ebene bekommt Level 2. Eine Feldgruppe als Teil einer komplexen Klasse auf Root-Ebene (Level 2) bekäme dann Level 3. Hat diese Unterklasse eine weitere Unterklasse (Level 3) mit einer Feldgruppe, hätte diese dann Level 4.


Zuletzt geändert: 22.04.2024 18:19:51 (erstmals erstellt 30.11.2022)