Hallo Bendroid,
und das Problem ist jetzt was genau?
Dass der rote Streifen sichtbar ist, liegt an height:16em
des Banner-Containers.
Im Übrigen ist dein Layout ein erbitterter Krieg zwischen verschiedenen Layoutsystemen (Flexbox vs absolute Positionierung), das kann nie gut gehen. Hinzu kommt eine Überdosis position:fixed - das genügt eigentlich für den Banner-Container, der Rest braucht das nicht. Meine ich.
Dass deine Vorgehensweise aus Sicht der Zugänglichkeit inkorrekt ist, hat Gunnar ja schon gesagt. Zugängliches Webdesign ist schwierig, das merkt man sofort, wenn man den von Gunnar verlinkten Artikel von Heydon Pickering liest. Schwierig deshalb, weil man einen Haufen Werkzeuge vom Browser bekommt, und jedes davon irgendwelche Macken hat oder nicht zu den Werkzeugen des Users passt.
Ohne JavaScript kommst Du bei einem solchen Popup-Menü nicht weiter, wenn ich Pickering richtig verstehe. Wobei dieses Verstehen ebenfalls schwierig ist. Entweder kann der Mann nicht erklären, oder er packt viel zu viel in den Artikel, oder ich bin zu doof. Ich habe diesen Artikel schon mehrfach zu verstehen versucht, und ich verstehe definitiv NICHT, was aus seiner Sicht jetzt die korrekte Implementierung ist. Es sind Textmassen über "hm, dies ist doof und jenes ist blöd und das da geht nicht" - und was ist jetzt die Empfehlung? Auf Popupmenüs zu verzichten, scheint mir. Grund: Eine zugängliche Webseite verzichtet auf jegliches fancy Layout und bietet möglichst nur flache Informationen. Also, optisch flach. Inhaltlich nicht. Was natürlich für diejenigen, die sehen können und visuelle Effekte wünschen, eine Schock ist.
Zugängliche Seiten sind im Grunde genommen zwei Seiten in einer. Die eine Seite sieht schick aus und bietet visuellen Schnickschnack, die andere Seite sieht man überhaupt nicht, sie wird nämlich vorgelesen, und muss so gestaltet sein, dass man sie durch Vorlesen erfassen kann. Und eine solche Seite muss mit mehreren Eingabetechniken klarkommen: Maus, Touch, Tastatur, und Sprachsteuerung. Letzteres ist dem PC Normalbenutzer unvertraut und scheint völlig unwichtig. Und deswegen ist eine große Anzahl von Webseiten eine Diskriminierung von Menschen, die auf Assistenztechniken angewiesen sind. Unser Wiki leider auch, aber unsere Wikisoftware kann es nicht besser.
Ich habe mich gestern mal damit beschäftigt, die neuen popovers als Popup-Menü zu verwenden, in der Hoffnung, dass die Browser hier die Zugänglichkeit automatisch mitbringen. Geht grundsätzlich, aber schick ist anders. Man kann Popovers zwar stylen, aber sie liegen im sogenannten Top-Layer und verlieren deshalb den Positionsbezug zu ihrem Elternelement. Eine Focus-Trap bekommt man auch nicht geschenkt. Mist 😟
Rolf
sumpsi - posui - obstruxi