Camping_RIDER: Buttons mit CSS gestalten

Beitrag lesen

problematische Seite

Aloha ;)

Was haltet ihr von:

Benutzer können Buttons anklicken und mit der Tastatur ansteuern. Die Browser kennzeichnen dieses [[Standardverhalten]] in ihren [[Browser-Stylesheet]]s, dass, wenn sie mit der Maus angesteuert werden, z.B. im Firefox, Opera und IE11 der Hintergrund blau, wird bei einer Fokussierung erhalten sie im Chrome, Firefox  und Opera eine blaue Umrandung.

Def Satz ist so kompliziert, dass ich nicht einmal durchsteige, ob er grammatikalisch korrekt ist.

Du hast Recht, aber irgendwie vermisse ich deinen Vorschlag für eine Umformulierung.

Meiner wäre:

Buttons können entweder angeklickt oder mit der Tastatur angesteuert werden. [[Standardverhalten|Standardmäßig]] machen die Browser jede mögliche Interaktion visuell deutlich (Beispiel: blauer Hintergrund beim Darüberbewegen der Maus, blaue Umrandung bei einer Fokussierung). Bei einigen Browser erhalten auch angeklickte Buttons den Fokus.<ref>MDN: [https://developer.mozilla.org/de/docs/Web/HTML/Element/button#Clicking_and_focus Clicking and focus]</ref> 

Diese visuelle Verdeutlichung ist notwendig, damit der entsprechende Button für '''alle''' Benutzer ohne Einschränkungen zugänglich (→ [[accessibility]]) ist. Sie sollten bei selbstgestalteten Buttons darauf achten, auch eine entsprechende visuelle Markierung für jede mögliche Interaktion anzubieten, damit die selbstgestalteten Buttons mindestens so zugänglich sind wie ihre [[Browser-Stylesheet|Standarddarstellung]].  

{{Empfehlung|Achten Sie beim Stylen von Buttons darauf, alle Pseudoklassen des Buttons mit einer visuellen Verdeutlichung für die entsprechende Benutzer-Interaktion zu versehen:

{{Beispiel|Pseudoklassen hover, active, focus als CSS-Selektoren|
{{BeispielCode|<source lang="css">
  /* Normale Gestaltung */
button {
  ...
}
  /* Gestaltung, wenn Button mit Maus oder Tastatur ausgewählt ist */
button:hover,
button:focus {
  ...
}
  /* Gestaltung, wenn Button gedrückt ist */
button:active {
  ...
}
</source>}}
{{BeispielText|Legen Sie klar erkennbare Formatierungen für Buttons fest, die dann über die Pseudoklassen [[CSS/Selektoren/Pseudoklasse/hover, active, focus|hover, active, focus]] selektiert werden. }}}}

}}

Grüße,

RIDER

--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
# Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[