@@MJCool81
der Button funktioniert trotzdem.
Nein, das tut er nicht. Es ist ein Label für ein Eingabe-Element (Checkbox), das es überhaupt nicht gibt (wegen display: none
). Das kann gar nicht funktionieren (im Sinne von: funktionieren – für alle, nicht nur für einen ausgewählten Nutzerkreis). Eingabe-Elemente, die bedienbar sein sollen, dürfen allerhöchstens visuell versteckt werden.
Überhaupt ist der Checkbox-Hack keine vernünftige Lösung. Verwende einen button
und JavaScript zum Ein-/Ausblenden. (Wobei erst mit JavaScript ausgeblendet werden sollte, damit ohne JavaScript alles sichtbar ist.) S.a. Inclusive Components: Collapsible sections.
Oder verwende reines HTML: detail
/summary
.
Übrigens: Bei Tastaturnavigation ist auf deiner Seite sehr schwer zu erkennen, welches Element gerade den Fokus hat. Statt a:focus { outline: dotted thin }
sollte es etwas besser Sichtbares sein.
LLAP 🖖
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory