Hej Henry,
:target{outline:2px solid orange;}
Guter Tipp. Habe selbst kaum mal was damit gemacht und deshalb mal ein wenig nachgeschaut. Dieses Beispiel inspiriert mich sehr zu neuen Ideen, doch bevor ich nun meiner Experimentierlaune folge, mal die Frage, wie sieht's mit der Barrierefreiheit für diese Pseudoklasse bzw. ähnlichen Beispielen aus?
Das ist meiner Meinung nach eher ein Hack, als eine Empfehlung. Man muss das ja Tastaturbedienbar halten. Bei Popups darf der Fokus das Popup nicht verlassen, sonst ist man womöglich mit dem Fokus unter dem Popup, also in einem nciht mehr sichtbaren Bereich. Für Blinde mit Screenreader kein Problem, aber für Sehende.
Außerdem muss der Fokus sichtbar sein, wenn er sich auf dem schließen-Button befindet.
aria-Attribute sind vermutlich cniht nötig, weil ja nichts auf display none gesetzt wrd und somit alles jederzeit erreichbar bleibt für Screenreader.
Ohne JavaScript kommt man hier nicht weit…
Ich nutze :target
wirklich nur um anzuzeigen, wo ein Link hinführt. Besonders wenn es sich um Boxen am Rand des Bildschirmes handelt, ist sonst für Sehende oft nicht klar, was man angesprungen hat. Auch hier sind Blinde wieder im Vorteil, weil sie sich das Linkziel vorlesen lassen können.
Für so was nehme ich am liebsten animierte Skalierungen, ich lasse also beispielsweise ein Fragezeichen-Symbol in einer Box wie ein Herz drei mal deutlich "pumpen" o.ä.
Marc