Gunnar Bittersmann: SVGs in MVC-Framework organisieren

Beitrag lesen

@@borisbaer

Den Code würde ich dir beim Review nicht durchgehen lassen.

Ich bin kein Profi in Sachen SVG, aber ich vermute, du wunderst dich, warum die Grafik so „zerstückelt“ ist.

Nein, ich meinte nicht den SVG-Code, sondern den PHP-Code.

Hier siehst du die Checkbox im Einsatz.

Leider nicht wirklich. Wenn ich da mit der Tastatur durchtabbe, muss ich mich sehr anstrengen, um zu erkennen, wo der Fokus gerade ist. Anderen mag das nicht gelingen. Es ist zwar ein Fokuseffekt da, der hat aber viel zu wenig Kontrast. Als Hovereffekt völlig ausreichend (Hovereffekte sind eher Spielerei als erforderlich), für den Fokus ungenügend. Mach einen weißen Rahmen drum. Es muss nicht schön sein, sondern auffallen. Mittlerweile unterstützen Browser ja :focus-visible, d.h. Fokusmarkierung wird nur dann angezeigt, wenn man wirklich per Tastaur navigiert.

Das Formular ist visuell zugemüllt. Ein Label an jedem Eingabefeld[1] und dieselbe Beschriftung nochmal im Eingabefeld? Wozu? Weg mit allen placeholder-Attributen!

[placeholder] {
  outline: thick red solid !important;
  ERROR: placeholder attribute set;
}

ins Stylesheet. Die Verwendung von placeholder ist so gut wie immer ein Fehler.

🖖 Живіть довго і процвітайте

--
„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“
— @Grantscheam auf Twitter

  1. Korrektur: nein, keine zugänglichen Labels für die Eingabefelder vorhanden ↩︎

0 38

SVGs in MVC-Framework organisieren

borisbaer
  • php
  • svg
  1. 0
    Gunnar Bittersmann
    1. 0
      Der Martin
      1. 0
        Gunnar Bittersmann
        1. 0
          Gunnar Bittersmann
          • performance
          • php
        2. 0
          Rolf B
          1. 0
            Gunnar Bittersmann
            • php
            • programmierstil
            1. 0
              Rolf B
          2. 0
            borisbaer
    2. 0
      borisbaer
      1. 0
        Gunnar Bittersmann
        • barrierefreiheit
        • css
        • ux
        1. 0
          Gunnar Bittersmann
          • barrierefreiheit
          • html
        2. 0
          Gunnar Bittersmann
          • design
          • formulare
          • ux
        3. 0
          Gunnar Bittersmann
          • css
          • design
          • ux
        4. 0
          borisbaer
          1. 0
            Gunnar Bittersmann
            • ux
          2. 0
            Der Martin
            1. 1
              Tabellenkalk
              1. 0
                Gunnar Bittersmann
                1. 0
                  Tabellenkalk
                  1. 0
                    Gunnar Bittersmann
                    • menschelei
        5. 0
          borisbaer
          1. 1
            Gunnar Bittersmann
            • design
            • ux
            • zitat
            1. 0
              Gunnar Bittersmann
              1. 0
                Robert B.
                1. 0
                  Der Martin
                  1. 0
                    Gunnar Bittersmann
                  2. 0
                    Robert B.
                    • design
                    • offtopic
                    • ux
  2. 0
    Gunnar Bittersmann
    • svg
    • tools
    1. 0
      borisbaer
  3. 1
    Rolf B
    1. 0
      Matthias Scharwies
      1. 0
        Rolf B
        1. 0
          Matthias Scharwies
          1. 0
            Rolf B
            1. 0
              Matthias Scharwies
              1. 0
                Rolf B
      2. 0

        SVG: use-element + css-animation

        Matthias Scharwies