Barrierefreiheit
Identische H1 mehrfach sichtbar
Woran du es erkennst
Die Seite enthält zwei oder mehr sichtbare <h1>-Elemente mit identischem Text — typischerweise eine Desktop- und eine Mobil-Variante desselben Hero-Blocks, die beide gerendert werden.
Warum es zählt
Screenreader lesen die Hauptüberschrift doppelt vor, die Überschriftenliste zeigt zwei gleiche Einstiege, und die Seite verliert ihren einen eindeutigen Anker. Sehende Besucher sehen das Duplikat oft ebenfalls, wenn die Variante nur verschoben oder ausgeblendet statt entfernt wird.
So behebst du es
- Liefere nur eine Hero-Variante aus oder verberge die andere mit display:none bzw. dem hidden-Attribut (nicht nur per Opacity oder Verschieben aus dem Bild).
- Müssen beide Varianten im DOM bleiben, stufe die zweite zu <p> oder <div> mit gleicher Gestaltung herab.
- Prüfe auch das Mobil-Layout: Ein Breakpoint, der die Desktop-Variante nicht ausblendet, ist die übliche Ursache.
- Teste mit Screenreader oder der Überschriften-Gliederung des Browsers: Es darf genau eine H1 übrig bleiben.