sprungmarker testet

Da ich mich aktuell in das Open-Source-Framework Flutter von Google einarbeite, arbeite ich von Anfang an mit dem Fokus auf Barrierefreiheit. Wir schauen uns daher an, wie man Überschriften einbinden kann, damit in der mobilen App auf iOS und Android Überschriften vom Screenreader ausgegeben werden.

Wie ist die aktuelle Ausgabe von Überschriften auf mobilen Geräten?

Sowohl in iOS, iPadOS und Android können Überschriften ausgegeben werden. In iOS und iPadOS mit .isHeader und in Android etwa mit accessibilityHeading="true“. Aktuell ist es in Android nicht möglich, auch eine Überschriften-Ebene (h1–h6) anzugeben. In iOS und iPadOS kann man jedoch eine Überschriften-Ebene angeben etwa mit .accessibilityHeading(.h2). Auf allen Plattformen ist es möglich, mit dem Screenreader die Überschriften durch zusätzliche Navigationsmechanismen einzeln anzusteuern, etwa auf iOS durch den Rotor.

Wie lassen sich Überschriften in Flutter einbinden?

Aktuell gibt es einen „breaking change“ in der Einbindung von Überschriften in Flutter. Die bisherige Einbindung (GitHub channel stable – aktuell 3.44.2) wird in einem der nächsten Release (voraussichtlich August 2026) abgelöst werden.

Aktuelle Einbindung von Überschriften

Die aktuelle Einbindung von Überschriften beinhaltet nur, dass Text als Überschrift integriert werden kann, jedoch nicht auch eine Überschriften-Ebene.

Um ein Text-Widget — in Flutter ist alles ein Widget — als Überschrift einzubinden, führt man zwei Schritte aus:

1. Das Text-Widget muss in Dart mit einer Semantic-Klasse umgeben werden: Semantics(). Dadurch wird dem Text Semantik hinzugefügt.
2. Dieser Klasse kann man dann Eigenschaften mitgeben.
3. Für die Auszeichnung als Überschrift ist das die Eigenschaft header: true.

Semantics( // Klasse, die Semantik hinzufügt
  header: true, // Eigenschaft: Überschrift
  child: Text('Überschrift'),
)

Diese Einbindung von Überschriften wird vom Screenreader auf iOS, iPadOS und Android als Überschrift korrekt ausgegeben. Mit zusätzlichen Navigationsmechanismen wie dem iOS-Rotor können die Überschriften einzeln angesteuert werden.

Zukünftige Einbindung von Überschriften

Die zukünftige Realisierung von Überschriften beinhaltet, dass Text sowohl als Überschrift integriert als auch mit einer Überschriften-Ebene versehen werden kann.

Um ein Text-Widget — in Flutter ist alles ein Widget — als Überschrift einzubinden, führt man zwei Schritte aus:

1. Das Text-Widget muss in Dart mit einer Semantic-Klasse umgeben werden: Semantics(). Dadurch wird dem Text Semantik hinzugefügt.
2. Dieser Klasse kann man dann Eigenschaften mitgeben.
3. Für die Auszeichnung als Überschrift ist das die Eigenschaft headingLevel: headingLevel: 1 für eine H1-Überschrift (Überschrift erster Ebene).

Semantics( // Klasse, die Semantik hinzufügt
  headingLevel: 1, // Eigenschaft: Überschrift Ebene 1
  child: Text('Überschrift Ebene 1'),
)

Semantics( // Klasse, die Semantik hinzufügt
  headingLevel: 2, // Eigenschaft: Überschrift Ebene 2
  child: Text('Überschrift Ebene 2'),
)

Diese Einbindung von Überschriften wird vom Screenreader auf iOS, iPadOS und Android korrekt als Überschrift ausgegeben. Überschriften-Ebenen auf iOS und iPadOS sollen dann auch korrekt ausgegeben werden – aktuell jedoch noch nicht. Mit zusätzlichen Navigationsmechanismen wie dem iOS-Rotor lassen sich die Überschriften einzeln ansteuern.

Ich werde das Update, sobald es da ist, testen und den Artikel entsprechend aktualisieren. Im Flutter Github Channel main sind die Änderungen für die Überschriften-Ebenen zwar bereits enthalten, sie führen jedoch noch zu keiner Ausgabe der Überschriften-Ebenen auf iOS und iPadOS. Nur im Widget-Tree des Flutter Plugins Dart Code (VS Code) ist bereits die Ausgabe der Überschriften-Ebenen vorhanden.