Registerbutton Farbe ändern

[haiflosse]

Hallo! Ich habe auf meiner Seite https://agoshop.at/schimmelentferner.html Registerbutton eingebaut wo ich den Code von https://www.w3schools.com/w3css/w3css_tabulators.asp habe.

Ich möchte nun wenn ich die Seite öffne, dass nur der erste Button blau markiert wird und die anderen grau sind und wenn ich einen anderen Button anklicke dass dieser Blau markiert ist und die anderen grau sind.

Hoffe es kann mir jemand weiterhelfen. Vielen Dank für jede Antwort

[Der Martin]

Hallo,

Ich habe auf meiner Seite https://agoshop.at/schimmelentferner.html Registerbutton eingebaut wo ich den Code von https://www.w3schools.com/w3css/w3css_tabulators.asp habe.

Ich möchte nun wenn ich die Seite öffne, dass nur der erste Button blau markiert wird und die anderen grau sind und wenn ich einen anderen Button anklicke dass dieser Blau markiert ist und die anderen grau sind.

dann müsste also grau (anstatt blau) die Grundfarbe der Buttons sein, und blau sollten sie nur über die Pseudoklasse :focus werden.
Kleines Manko dabei: Beim Laden der Seite ist zunächst mal kein Button focussiert, sie werden also alle grau erscheinen. Das kann man aber hinbiegen, wenn man direkt nach dem Fertigladen der Seite den ersten Button mit focus() vor-auswählt.
Oh, und sobald der Besucher irgendein anderes Element anklickt, ist die Markierung natürlich auch wieder weg.

Ob diese Art der Inhaltsauswahl (Navigation) überhaupt günstig ist, steht auf einem ganz anderen Blatt. Eventuell wäre eine Lösung mit details und summary eine Alternative.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[haiflosse]

Vielen Dank für die Antwort. Ist o.k. Die Farben mit Blau und grau können bleiben. Wie muss ich noch den focus() richtig setzen, damit das erste Register "Produktbeschreibung" grau angezeigt wird?

Danke nochmals

[Gunnar Bittersmann]

@@haiflosse

Ich habe auf meiner Seite https://agoshop.at/schimmelentferner.html Registerbutton eingebaut

Damit meinst du die Links in der Navigation?

Welche übrigens nicht bedienbar ist: Wenn man mit der Tab-Taste durch die Seite navigiert, hat man keinerlei visuelle Rückmeldung, wo man sich gerade befindet.

Da haben wir die Übertäter:

:focus {
    outline: none;
    text-decoration: none;
}

und

._keyfocus :focus,
input:not([disabled]):focus,
textarea:not([disabled]):focus,
select:not([disabled]):focus {
    box-shadow: none;
}

Nie machen! Niemals den browesereigenen Fokuseffekt entfernen ohne einen anderen anzugeben!

Was du evtl. machen könntest: den Fokuseffekt bei Mausbedienung entfernen, bei Tastaturbedienung aber lassen:

:focus:not(:focus-visible) {
    outline: none;
    text-decoration: none;
}

und

._keyfocus :focus:not(:focus-visible),
input:not([disabled]):focus:not(:focus-visible),
textarea:not([disabled]):focus:not(:focus-visible),
select:not([disabled]):focus:not(:focus-visible) {
    box-shadow: none;
}

Dein Unternemü bei „Produkte“ funktioniert auch nicht bei Tastaturbedienung.

Die Farben sind wohl dein geringstes Problem.

😷 LLAP

[haiflosse]

Vielen Dank für die Antwort. Leider habe ich dies nicht verstanden.

Es geht nur darum, dass zu Beginn der Produktbeschreibung Button Grau markiert ist. Ich übergebe in der Url eine andere Bezeichnung und habe in einer Variable wert dann die anderen Bezeichnungen. Je nachdem welche Bezeichnung übergeben wird sollte dann dieser Button entsprechend grau markiert sein.

Vielleicht hat dazu jemand noch eine Idee. Vielen Dank

[Gunnar Bittersmann]

@@haiflosse

Vielen Dank für die Antwort. Leider habe ich dies nicht verstanden.

Eine Webseite muss mit verschiedenen Ein- und Ausgabegeräten funktionieren.

Nicht alle Nutzer können (oder wollen) eine Maus verwenden; sie verwenden die Tastatur. Mit der Tab-Taste springt man von einem interaktiven Element (Link, Button, Formular-Eingabefeld etc.) zum nächsten, mit Return- bzw. Leertaste wird eine Aktion ausgelöst.

Dazu muss man natürlich erkennen können, welches Element gerade das fokussierte ist. Ebendas hast du mit CSS kaputtgemacht. Wie das wieder zu reparieren ist, hatte ich dir genannt.

😷 LLAP

[Rolf B]

Hallo haiflosse,

Leider habe ich dies nicht verstanden.

Das ist sehr ärgerlich. Man sagt Dir: Deine Seite ist nicht bedienbar, das sollte Alarm auslösen und kein Schulterzucken.

Es geht nur darum, dass zu Beginn der Produktbeschreibung Button Grau markiert ist.

Nein, es geht Gunnar eben nicht darum. Sondern um die übrigen gravierenden Mängel der Seite.

Erstellst Du die Seite von Hand? Oder verwendest Du ein Authoring-Tool? Davon kann es abhängen, wie man den Button fokussiert.

Eine einfache Lösung könnte sein, auf dem ersten Button das autofocus-Attribut zu setzen.

Rolf

[haiflosse]

Vielen Dank für die Antwort und nochmaligen Hinweis. Sorry, dass habe ich nicht gleich verstanden. Die Seite wurde von einer Webdesignfirma mit Magento erstellt und ich möchte sie nun so gut wie möglich für SEO anpassen.

Wäre für jeden Hinweis und Antwort dankbar, welche Probleme ich da wie beheben sollte.

Welche Elemente habe ich mit css kaputt gemacht?

Vielen Dank nochmals

[Der Martin]

Hallo nochmal,

Die Seite wurde von einer Webdesignfirma mit Magento erstellt

die Information ist gut, das hilft uns eventuell weiter. Das heißt, nicht mir, aber vielleicht liest ja hier jemand mit, der diese Shop-Software kennt und dir deshalb gezielt sagen kann, an welcher Stelle du was drehen musst.

und ich möchte sie nun so gut wie möglich für SEO anpassen.

Das halte ich für keine so gute Idee. Zumindest nicht als oberstes Ziel. Zuerst muss eine Website mal für Menschen gut benutzbar sein. Erst in zweiter Hinsicht kann man sich dann auch um das Ranking in Suchmaschinen kümmern. Das sollte aber nie zu Lasten der Usability gehen.

Welche Elemente habe ich mit css kaputt gemacht?

Alle, die eigentlich mit dem Besucher interagieren sollen. Also Buttons und input-Elemente (und möglicherweise auch Links). Und zwar indem du die sichtbare Markierung des momentan focussierten Elements deaktiviert hast.

@Gunnar Bittersmann: Wieso machst du hier Unterschiede zwischen Focussierung per Tastatur und per Maus? Auch Mausschubser möchten sehen, welches Element focussiert ist (z.B. ob das Gerät den letzten Klick registriert hat, damit man nicht reflexartig ein zweites Mal klickt).

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Rolf B]

Hallo Martin,

ja, hilft mir auch nicht. Ich weiß, dass es Magento gibt, aber in wieweit man da Seiten direkt auf HTML Ebene erstellt oder in einem Designer zusammenklickt - keine Ahnung.

Die Frage ist auch, welches Eigen-Knowhow der TO in HTML und CSS mitbringt. Einem fremderstellten, Magentobasierenden Webshop Bedienbarkeit und neues Verhalten beibringen zu wollen ist nichts für Leute mit Anfängerkenntnissen, und eigentlich auch nichts für Ehrenamtler in einem Forum. Da muss man vor allem durchblicken, was Shopsoftware und Fremdautoren gebaut haben und wie das zusammenspielt, d.h. man muss schon Einblick auf Quellcodeebene haben.

Auf Anhieb hat mich die Seite abgeschreckt, sie ist schlecht optimiert und lädt sehr langsam. Die Ladescreens sind etwas, das einer modernen Webseite maximal einmal passieren sollte, danach sollte das meiste aus dem Cache kommen. Dass ein Klick auf die Startseite über 300 Requests abfeuert, davon 216 .js Files, ist ein Zeichen für Unfähigkeit der Entwicklerfirma (entweder der Webdesigner oder Magento) - solche Dinge gehören gebündelt und in einer Datei ausgeliefert. Modularisierung betreibt man auf Sourcecode-Ebene, nicht beim Ausliefern an den Nutzer. Der Shop liefert aber schön komponentenweise die Magento-Module, alle mit eigenen .js Dateien, schön modularisiert. Server und Browser ächzen darunter. Die Startseite lädt in 3,5 Sekunden, und das bei einer TTFB (Time To First Byte) von fast einer Sekunde. Ein solches Ergebnis sollte man einer Webdesignfirma um die Ohren hauen - es ist peinlich. Vermutlich ist die Serverseite ebenso mikrofragmentiert und braucht ewig, um ihre Bausteinchen zusammenzuklauben. Dass der Server wegen eines Besucherüberschusses ächzt, könnte natürlich auch sein, aber dann wäre die TTFB nicht so konstant - selbst auf der Kontaktseite sind es über 600ms.

Ich will nicht behaupten, dass ich es mit Magento besser könnte. Ich kenne es nicht. Aber wenn Magento nichts besseres zulässt, ist es das falsche Tool für einen Shop.

Zum Thema selbst fällt mir außer meinem Hinweis auf autofocus leider nichts ein...

Rolf

[Gunnar Bittersmann]

@@Rolf B

Auf Anhieb hat mich die Seite abgeschreckt, sie ist schlecht optimiert und lädt sehr langsam. Die Ladescreens sind etwas, das einer modernen Webseite maximal einmal passieren sollte

Ja!

Das sieht aus, als wäre jede Seite eine eigene SPA (single page application), die das komplette Framework jeweils neu lädt.

Da sollte man von der Webdesignfirma, die das verbrochen hat, Nachbesserung verlangen. Und für den Fall, dass die das nicht liefern können, schonmal die Schadensersatzklage vorbereiten. Es sei denn, man hat sich schon bei Formulierung der Anforderungengen von denen übern Tisch ziehen lassen.

😷 LLAP

[Gunnar Bittersmann]

@@Der Martin

@Gunnar Bittersmann: Wieso machst du hier Unterschiede zwischen Focussierung per Tastatur und per Maus?

Weil’s verschiedene Eingabemodalitäten sind.

Auch Mausschubser möchten sehen, welches Element focussiert ist

Dazu hat man ja den Mauscursor.^[1]

Und dazu hat man evtl. auch den Hovereffekt, der anders gestaltet sein kann als die Kennzeichnung des Tastaturfokus.

Den blauen bzw. gepunkteten^[2] Rahmen kreiden Designer nicht zu Unrecht als unschön an. Bei Tasturbedienung ist er natürlich gut, weil auffällig; bei Mausbedienung ist er nicht erforderlich, sondern eher störend.

(z.B. ob das Gerät den letzten Klick registriert hat, damit man nicht reflexartig ein zweites Mal klickt).

Das sollte man daran erkennen, dass das System sofort auf die Interaktion reagiert: einem Link folgt; die durch einen Buttonclick ausgelöste Aktion sofort Inhalte auf der Seite ändert bzw. eine Rückmeldung gibt etc.

😷 LLAP

---

1. Wenn man den nicht wie Manuel Matuzović in diesem unterhaltsamen Vortrag mit cursor: none versteckt 😆 – was für Mausschubser das Gegenstück zu :focus { outline: none } ist. ↩︎

2. Der ziemlich unscheinbare dünne gepunktete Rahmen im Firefox ist ein guter Grund, den Browserdefault durch was Besseres zu ersetzen. ↩︎

[Der Martin]

Moin,

Wieso machst du hier Unterschiede zwischen Focussierung per Tastatur und per Maus?

Weil’s verschiedene Eingabemodalitäten sind.

das sind sie zweifellos, aber doch mit demselben Ziel.

Auch Mausschubser möchten sehen, welches Element focussiert ist

Dazu hat man ja den Mauscursor.

Der hat damit nicht viel zu tun. Der kann ganz woanders stehen - zum Beispiel, wenn ich die Maus nach dem Anklicken eines Elements wieder bewegt habe. Oder wenn ich seit dem letzten Mausklick par Tastatur (Tab-Taste) weiternavigiert habe, was ich durchaus häufig mache.

Nein, der Mauszeiger kann kein Focus-Indikator sein. Es geht ja nicht nur um den Zeitpunkt des Klicks (soweit eingeschränkt würde ich dir noch zustimmen), sondern vor allem um den unbestimmten Zeitraum danach.

Und dazu hat man evtl. auch den Hovereffekt, der anders gestaltet sein kann als die Kennzeichnung des Tastaturfokus.

Und auch der hat nichts mit dem aktuell focussierten Element zu tun. Dass du den hier ins Feld führst, ist ein weiterer Hinweis dafür, dass du nur den Moment des Klickens betrachtest, nicht aber die 30 Sekunden (oder 3 Minuten) danach.

Den blauen bzw. gepunkteten Rahmen kreiden Designer nicht zu Unrecht als unschön an. Bei Tasturbedienung ist er natürlich gut, weil auffällig; bei Mausbedienung ist er nicht erforderlich, sondern eher störend.

Dem letzten Halbsatz widerspreche ich. Er ist, wie weiter oben erläutert, sehr wohl erford nützlich. Störend oder hässlich finde ich ihn auch nicht, aber das ist Ansichtssache.

(z.B. ob das Gerät den letzten Klick registriert hat, damit man nicht reflexartig ein zweites Mal klickt).

Das sollte man daran erkennen, dass das System sofort auf die Interaktion reagiert

Ist aber bei einem gut beschäftigten PC nicht immer der Fall. Hier muss ich ausnahmsweise mal Windows loben: Da ändert sich der Mauszeiger auch bei einem ausgelasteten System innerhalb kurzer Zeit (meist <1s) in eine Eieruhr, man erkennt also eine Reaktion. Bei diversen Linux-Desktops, die leider nicht so auf Responsivität getrimmt sind, ist das nicht selbstvertsändlich. Da kann es schon mal sein, dass für mehrere Sekunden keine Reaktion sichtbar ist, bis z.B. Office im Hintergrund mit dem Speichern fertig ist und sich das OS erinnert: Ach so, du wolltest was? - Moooment, komme sofort!

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Gunnar Bittersmann]

@@Der Martin

Nein, der Mauszeiger kann kein Focus-Indikator sein.

Natürlich nicht.

Es geht ja nicht nur um den Zeitpunkt des Klicks (soweit eingeschränkt würde ich dir noch zustimmen), sondern vor allem um den unbestimmten Zeitraum danach.

Du willst, dass dir das Element hinterherruft „Hey, du hast mich vor kurz oder lang angeclickt. – Willst du das nicht nochmal tun?“?

Den blauen bzw. gepunkteten Rahmen kreiden Designer nicht zu Unrecht als unschön an. Bei Tasturbedienung ist er natürlich gut, weil auffällig; bei Mausbedienung ist er nicht erforderlich, sondern eher störend.

Dem letzten Halbsatz widerspreche ich. Er ist, wie weiter oben erläutert, sehr wohl erford nützlich.

Die Browserhersteller sind da anderer Ansicht. Jetzt, wo sie :focus-visible implementiert haben, haben sie wohl auch den Default geändert. Weder Buttons noch Links zeigen nach dem Anclicken per Maus den Fokusring. Guckst du.

Das heißt für @haiflosse: Es muss nicht wie gezeigt :focus in :focus:not(:focus-visible) geändert werden, sondern die betreffenden Regeln können komplett entfernt werden.

Das sollte man daran erkennen, dass das System sofort auf die Interaktion reagiert

Ist aber bei einem gut beschäftigten PC nicht immer der Fall.

Da kann man ja auch anders Rückmeldung geben: eine Eieruhr in die Beschriftung des Elements einbauen. Verständlicher als einen Rahmen drumrum machen.

😷 LLAP

[Der Martin]

Hallo,

Nein, der Mauszeiger kann kein Focus-Indikator sein.

Natürlich nicht.

das hat sich bei deinen Ausführungen aber so angehört.

Es geht ja nicht nur um den Zeitpunkt des Klicks (soweit eingeschränkt würde ich dir noch zustimmen), sondern vor allem um den unbestimmten Zeitraum danach.

Du willst, dass dir das Element hinterherruft „Hey, du hast mich vor kurz oder lang angeclickt. – Willst du das nicht nochmal tun?“?

Nein, ich will, dass das Element leise murmelt: "Hey, der letzte Aktive bin oder war ich."
Es geht mir nicht ums Finden eines Elements für die nächste Interaktion, sondern um das Erkennen des aktuell noch von der letzten Interaktion focussierten Elements. Bedenke, dass vor allem Desktop-Nutzer gerne mal zwischen mehreren Browser-Tabs oder gar mehreren Anwendungen hin- und herschalten, und dann nach zwei Minuten wieder zur zuvor betrachteten Webseite zurückkehren. Dann wollen sie gern schnell erkennen: Wo war ich stehengeblieben? Hab ich den Download-Button schon geklickt oder wollte ich das erst noch?

Das sollte man daran erkennen, dass das System sofort auf die Interaktion reagiert

Ist aber bei einem gut beschäftigten PC nicht immer der Fall.

Da kann man ja auch anders Rückmeldung geben: eine Eieruhr in die Beschriftung des Elements einbauen. Verständlicher als einen Rahmen drumrum machen.

Ja, kann man. Es muss ja auch nicht immer der übliche Focus-Rahmen sein. Eine gut erkennbare farbliche Hervorhebung ist mindestens ebensogut, wie du auch im verlinkten Beispiel gezeigt hast. Aber warum du diese gut erkennbare Hervorhebung dem Mausschubser vorenthalten willst, verstehe ich nicht. Denn der hat davon den gleichen Nutzen.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Der Martin]

Hallo Gunnar,

Ich habe auf meiner Seite https://agoshop.at/schimmelentferner.html Registerbutton eingebaut

Damit meinst du die Links in der Navigation?

nein, soweit ich intwischen eingestiegen bin, meint der TO tatsächlich die Buttons mit den Beschriftungen Produktbeschreibung, Anwendungsgebiete, Dosierung und FAQ.

Zu deinen restlichen Ausführungen: Full ACK.

Was du evtl. machen könntest: den Fokuseffekt bei Mausbedienung entfernen

Mit welcher Rechtfertigung?

Immer eine Handbreit Wasser unterm Kiel
 Martin