Gunnar Bittersmann: X auf Bild bei Hover

Beitrag lesen

@@Sophie

Wie würdet ihr das mit dem X machen?

Da bei dem X (was wohl eher ein Kreuz ×, ✖︎, ❌ sein sollte) eine Aktion ausgelöst werden soll, wäre das ein Button. Die Beschriftung (das was assitive Technologien wie Screenreader als Buttontitel ansehen) sollte sowas wie „Bild löschen“ sein. Das kann visuell versteckt werden und durch visuell durch ein Icon repräsentiert werden (wenn der Zielgruppe die Bedeutung des Icons klar ist).

Diese Buttons müssen mit Tastatur erreichbar sein; bei display: none ist das nicht gegeben. Man kann die Buttons auch nicht per :focus eines Vorfahrenelements (welches per tabindex="0" fokussierbar gemacht werden müsste) wieder einblenden, da man zum Auslösen des Buttons diesen fokussieren müsste, wodurch die Fokussierung des Vorfahrenelements verloren ginge und der Button wieder verschwindet, bevor er den Fokus erhält.

Also die Buttons nur visuell verstecken. Ich habe da die Buttons werder gestylt noch platziert; das Funktionsprinzip sollte aber deutlich werden: Die Buttons werden angezeigt, wenn sie den Fokus haben oder wenn über das Vorfahrenelement gehovert wird.

LLAP 🖖

--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
0 75

X auf Bild bei Hover

Sophie
  • css
  • html
  1. 0
    TS
    • css
    • html
    • https
    1. 0
      Sophie
      1. 0
        TS
      2. 1
        Rolf b
        1. 0
          Sophie
          • css
          • html
          • php
          1. 1
            Rolf b
            1. 0
              Sophie
              1. 1
                Rolf b
                1. 1
                  Gunnar Bittersmann
                2. 0
                  Gunnar Bittersmann
              2. 0
                TS
                • html
                • php
                • sicherheit
              3. 0
                TS
              4. 2
                Robert B.
                • html
                • php
                • sicherheit
  2. -1
    Matthias Apsel
    1. 0
      Gunnar Bittersmann
  3. 0
    Henry
    • css
    • html
    • php
    1. 0
      Sophie
      1. 0
        Henry
        1. 0
          Henry
          1. 0
            TS
          2. 3
            Robert B.
      2. 0
        Gunnar Bittersmann
    2. 0
      TS
    3. 0
      Gunnar Bittersmann
      1. 0

        Warum redest du immer alles schlecht?

        Sophie
        • meinung
        1. 1
          Gunnar Bittersmann
          1. 0
            Sophie
      2. 0
        Henry
        1. 0
          Sophie
        2. 0
          Gunnar Bittersmann
          1. 1
            Tabellenkalk
            • ergonomie
            • ergonomie
        3. 1
          TS
          1. 0
            Henry
          2. 0
            Gunnar Bittersmann
            1. 1
              dedlfix
              1. 0
                Gunnar Bittersmann
                1. 0
                  dedlfix
                  1. 0
                    Gunnar Bittersmann
              2. 0
                Tabellenkalk
                1. 0
                  TS
            2. 1
              TS
              1. 0
                Gunnar Bittersmann
                1. 0
                  TS
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      TS
                      • projekt
              2. 0
                Henry
                • menschelei
                • sonstiges
                • zu diesem forum
                • zu diesem forum
                1. 0
                  TS
                  • menschelei
                  • zu diesem forum
                  • zu diesem forum
                2. 1
                  Gunnar Bittersmann
                  • zu diesem forum
                  1. 0
                    Henry
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        Henry
                        • menschelei
                        • zu diesem forum
                        1. 1
                          Gunnar Bittersmann
                          1. 0
                            Henry
                            1. 0
                              Henry
                            2. 0
                              Rolf b
                            3. 1
                              Gunnar Bittersmann
      3. 0
        TS
        • barrierefreiheit
        • menschelei
        • projekt
        1. 0
          Gunnar Bittersmann
          1. 0
            TS
            1. 0
              Gunnar Bittersmann
              1. 0
                TS
                • menschelei
    4. 2
      Martl
      1. 0
        TS
      2. 0
        Gunnar Bittersmann
        1. 0
          Martl
          1. 0
            Gunnar Bittersmann
            1. 2
              Martl
    5. 1
      Gunnar Bittersmann
      • html
    6. 0
      Gunnar Bittersmann
      • css
      • html
  4. 2
    Gunnar Bittersmann
  5. 0
    pl
    • css
    • design
    • html
  6. 0
    Malcolm Beck`s
    1. 0
      Sophie
      1. 1
        Rolf b