Revenge.css

[Gunnar Bittersmann]

@@Matthias Apsel

Ich habe einen Wiki-Artikel gebastelt.

Was gibts zu kritisieren?

Ja. Schon den Anfang: „… können sich leicht Fehler einschleichen, die zu einem invaliden Markup führen. Ein Validierungs-Stylesheet hilft, diese Fehler sichtbar zu machen.“

Das ist nicht das alleinige Ziel, schon gar nicht das Hauptziel.

„Ein solches Validierungs-Stylesheet erspart in der Entwicklungszeit die ständige Konsultation eines Validators“

Formale Fehler aufzudecken kann ein Validator besser. So ein Test-Stylesheet ist vor allem dazu da, Fehler aufzudecken, die ein Validator nicht findet.

Eine Tabelle mit einer Zeile und einer Spalte bspw. ist kein formaler Fehler, aber unsinniges Markup. Das kann man sichtbar machen.

Das Hauptaugenmerk liegt eher auf Accessibility-Sünden. Wie bspw. Click-Events für nicht fokussierbare Elemente.

img:not([alt]) ist da ein Anfang, aber ausbaufähig. Jemand könnte auf die Idee kommen, im Markup alt="" zu ergänzen, womit der Fehler natürlich nicht behoben ist. Also auch img[alt=""] kennzeichnen?

Nö, das liefert false positives. Es gibt ja durchaus Fälle wie diesen, wo alt="" angebracht ist. In dem Fall sollte das aria-labelledby-Attribut angeben, wo die Beschriftung des Bildes zu finden ist. Ein anderer Fall wäre ein Schmuckbild (das aus irgendeinem Grund nicht als Hintergrundbild realisiert ist), als solches markiert mit role="none" oder/und "presentation". Eine passende Gruppe von Selektoren wäre also img:not([alt]), img[alt=""]:not([role="none"]):not([role="presentation"]):not([aria-labelledby]).

---

Es ist auch problematisch, die Farbe der Umrandung hartcodiert auf rot zu setzen. Was, wenn man das Farbschema ändert und nun Rot als Akzentfarbe auf den Seiten auftritt? Dann muss man die Fehlerfarbe schnell ändern können, z.B. auf orange. Dateiweites Suchen und Ersetzen kann das zwar, es geht aber besser, wenn man sich die Fehlerfarbe in eine Variable packt. Die Rahmendicke dann auch gleich:

:root
{
	--error-color: red;
	--error-outline: 0.5rem solid var(--error-color);
}

img:not([alt]),
img[alt=""]:not([role="none"]):not([role="presentation"]):not([aria-labelledby])
{
	ERROR: 'Alternativtext fürs Bild fehlt';
	outline: var(--error-outline) !important;
}

Das funktioniert noch nicht im Edge; aber benutzt den wer als Browser zum Entwickeln?

LLAP 🖖

PS: Kaputte Syntax-Highlighter sind kaputt.