Schalter. Umschalter. Wie auch immer Sie sie nennen wollen, sie sind schon seit einiger Zeit bei uns und ein dominantes Grundnahrungsmittel für viele Formularschnittstellen. Sie sind sogar direkt in viele CSS-Frameworks integriert, darunter Bootstrap und Foundation.
Es ist einfach, sie binär zu betrachten: an und aus. Aus und an. Klicken, um den Zustand zu ändern, und fertig, oder? Ich meine, es ist doch nur eine Checkbox mit einer gestylten visuellen Darstellung.
Nun, Adrian Roselli zeigt uns, dass es viel mehr zu bedenken gibt. Und nicht nur das, sondern er zeigt auch, wie wir sie *unter*konstruieren können.
Ich werde nur Stile bereitstellen, um eine Standard-Checkbox visuell in einen visuellen Kippschalter umzuwandeln. Kein ARIA, kein Skript, keine besonderen Funktionen. Eine progressiv verbesserte Checkbox, die weiterhin funktioniert, wenn die CSS-Datei nicht geladen wird.
Hier gibt es viel zu verdauen. Seine Ansätze zur Barrierefreiheit decken alles ab, von Hover-, Aktiv-, Fokus- und Deaktivierungszuständen bis hin zum Kontrast in hellen und dunklen Modi und vielem mehr dazwischen. Besonders wichtig ist die progressive Verbesserung, die er in dem obigen Zitat erwähnt.
Ich denke, das Interessanteste an Adriáns Beitrag ist, wie flexibel sein Ansatz ist, um jede Situation zu bewältigen, einschließlich Farbschemata und Schreibmodi. Er nimmt auch die unbestimmte Checkbox zur Kenntnis, diesen Zustand, der weder an noch aus ist, sondern vielleicht etwas dazwischen. Dafür gibt es einen CSS-Pseudo-Selektor und das könnte einen eigenen Beitrag wert sein, da es sich um einen rein visuellen Zustand handelt, der nicht im HTML gesetzt werden kann und über JavaScript registriert werden muss. Es ist interessant, über einen "Zwischen"-Zustand für einen Schalter nachzudenken, und Adriáns Anwendungsfall für den Standardzustand Flugmodus ist ziemlich überzeugend.
Es ist eine Menge Arbeit, die wir leisten müssen, um sicherzustellen, dass das Frontend gut gestaltet ist, und ich denke, dieser Beitrag ist das beste Beispiel, das ich seit langem gesehen habe, warum unsere Arbeit kein zu lösendes Problem ist, sondern eher eine Herausforderung, die Werkzeuge unseres Handwerks besser zu verstehen.