Ausgewählten Bereich farbig beibehalten

[Rolf B]

Hallo AndyLee,

inwieweit deine interaktiv gemachten divs die Gnade eines Accessibility-Experten finden können, mögen andere beurteilen. Ich bin dafür kein Experte; ich weiß nur, dass man normalerweise davon Abstand nehmen sollte, nicht-interaktive Elemente interaktiv zu machen. Aber Maus und Tastatur funktionieren; ganz falsch kann es nicht sein. Wie es sich für einen Screenreader darstellt, weiß ich nicht.

Du setzt eine Klasse auf das Häkchen-SVG, um es einzublenden. Aber du setzt auf dem Elternelement auch aria-checked="true", und das kannst Du ausnutzen.

Versuche, die Klasse imgRBChecked wegzulassen und verwende statt

.imgRBChecked {
   transform:scale(1); 
   ...
}

das Konstrukt

[role=checkbox][aria-checked=true] .imgRBToggle {
   transform:scale(1); 
   ...
}

Damit suchst Du ein .imgRBToggle Element, das in einem Element mit Rolle Checkbox und aria-checked=true steht, d.h. Du verwendest den Checked-Status der Pseudocheckbox um das Häkchen einzublenden.

Genauso kannst Du mit

[role=checkbox][aria-checked=true] {
   background-color: pink;
}

die Hintergrundfarbe der Schaltfläche setzen.

Ob es eine gute Lösung ist, den Klick auf die Schaltfläche als "Menge=1" zu interpretieren, und dann auch noch wegzuscrollen, wage ich aber zu bezweifeln. Der User wird davon verwirrt, dass nach dem Klick (vielleicht sogar irrtümlich, weil er eigentlich "mehr" treffen wollte) etwas ganz anderes auf dem Bildschirm steht. Bleib bei den - und + Schaltflächen, und scrolle nicht. Ich glaube nicht, dass das Marketing von Stöcken und T-Shirt so wichtig ist. Als ich deine Seite das erste Mal sah, fragte ich mich, ob das eine echte Kampfschule ist oder ein Fake, der nur Merchandising-Artikel verhökern will. Diesen Eindruck möchtest Du sicherlich vermeiden. D.h. Du solltest unbedingt mit mehreren Leuten UI-Tests machen, und schauen, wie sie mit der Seite klarkommen.

Ein paar Hinweise noch (ein paar, nicht ein Paar):

• Es ist ein Paar Rattanstöcke (2 Stück) und nicht "ein paar Rattanstöcke" (einige, unbestimmte Anzahl).
• Deine Infotexte sind zu klein. 12px ist sehr wenig, und px-Angaben in der font-size sind eine Gemeinheit für den User. Der sieht schlecht, stellt im Browser die Defaultschriftgröße hoch und dann trickst Du ihn mit 12px aus. Mach es entweder prozentual (z.B. 85%) oder in em (d.h. relativ zum aktuell geltenden Font. font-size: 0.85em würde font-size: 85% entsprechen.
• Impressum: Du hast eine Kampfsystemschule, keine Kampsystemschule.
• Impressum: Wenn Du schon eine Streitbeilegungsstelle nennst, dann sei auch so nett und mach einen richtigen Link draus (mit rel="nofollow" damit Google keine Pagerank-Verknüpfung herstellt).

Rolf