@@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