Probleme mit flexbox

[Gunnar Bittersmann]

@@avm75

Äh, wow! Darf ich das mal kopieren und damit weiter experimentieren?

Klar. Einfach auf „Fork“ clicken …

Wobei ich von Deinem Code quasi noch weniger verstehe, als zuvor ;-)

Nach ein paar Runden Flexbox Froggy sollte es besser gehen. ;-)

Da das sicherlich Schaltflächen werden sollen, hab ich gleich mal button-Elemente verwendet.

Richtig. Zumindest teilweise. Der dunkelgrüne ganz unten soll z.B. nur zustandsabhängig die Farbe ändern oder zusätzliche Symbole zeigen.

Dann nimmst du dafür kein button-Element.

Und da die Buttons aktuelle Messwerte anzeigen, output-Elemente.

Wieder richtig. Allerdings auch nicht alle. Temperatur, Gas, Wasser, Batterie. Dort werden Meßwerte angezeigt. Beim Rest nicht.

Dann nimmst du dafür kein output-Element.

Außer der Ein/Aus-Button, der ist per aria-label beschriftet.

Sagt mir zwar jetzt gar nichts, aber so habe ich wieder was zu lernen.

Der Button hat ja keinen Text als Beschriftung. (Selbst das -Symbol ist ja Teil des Hintergrundbildes.)

Damit bspw. Screenreader dem Nutzer trotzdem die Funktion des Buttons mitteilen, wird dieser durch dieses ARIA-Attribut beschriftet.

LLAP 🖖