Gunnar Bittersmann: Grafik zerstört meinen "Read-more" Code

Beitrag lesen

@@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