aber genau diese Hervorhebung nur durch Farben ist vor allem für Menschen mit einer Rot-Grün-Schwäche problematisch.
Ich weiß, wovon ich hier schreibe:
Also, das geht wohl. Aber hellgrün oder zartrot auf Grau oder "ähnlichbunt" ist zu vermeiden. Ebenso Kombinationen aus Rottönen für die Schrift auf Grüntönen und andersherum, denn diese erzeugen bei vielen (auch mir) merkwürdige optische 3-D-Effekte.
Ebenso "verschwinden" kleine Flächen und dünne Linien/Schriften.
Meine Ideen wären:
Mit CSS diejenigen labels adressieren und den Stern mit etwas wie
[adresse]::bevore { content: " *" }
setzen oder optionale und Pflichtfelder von Anfang an gruppieren und mit <fieldset>
nebst <legend>
markieren wäre eine äußerst bequeme Möglichkeit.
Was zum Testen: (Einer der UX-Experten kann das woöglich besser)
<!doctype html>
<html>
<style>
label[x-required]::bevore {
content: " *";
}
</style>
<form>
<fieldset><legend>Pflichtfelder</legend>
<label x-required=1>Gib was ein:
<input required>
</label>
</fieldset>
</form>
</html>
Noch ein Tipp:
Was Gunnar zeigte geht prima mit flexbox
.