Tipp: Usability und Barrierefreiheit mittels CSS prüfen und verbessern

Über die Stylesheet-Sprache "Cascading Style Sheets" (CSS) lassen sich nicht nur Websites optisch gestalten, sondern auch deren Usability und Barrierefreiheit prüfen und so während der Entwicklung verbessern.

/* Beispiel 1: Bilder ohne alt-Attribut kennzeichnen */
img:not([alt]) {
	border: 5px solid red;
}
 
/* Beispiel 2: Bilder mit leerem alt-Attribut kennzeichnen */
img[alt=""] {
	border: 5px solid red;
}

Die ersten beiden Beispiele zeigen, wie man Bilder, deren alt-Attribut fehlt bzw. leer ist, mit einem dicken roten Rahmen kennzeichnen kann. Bilder, die nicht rein dekorativ sind, sollten im alt-Attribut eine Beschreibung des Bildes z.B. für Screenreader bieten. Nur solche Bilder, die rein dekorativ sind, sollten ein leeres alt-Attribut besitzen.

/* Beispiel 3: Bei http-Links ohne Linktext die URL als solchen verwenden */
a[href^="http"]:empty::before {
  content: attr(href);
}

Das dritte Beispiel ermöglicht es, bei Links ohne Linktext bzw. Inhalt wie z.B. <a href="https://www.servaholics.de/"></a> automatisch die URL als Linktext anzuzeigen.

/*
 * Beispiel 4: Beim Ausdrucken der Website hinter
 * tel-Links die verlinkte Rufnummer schreiben
 */
@media print {
	a[href^="tel:"]::after {
		content: " (" attr(href) ")";
 	}
}

Das letzte Beispiel fügt beim Ausdrucken der aktuellen Website bei Links mit tel-URLs die verlinkte Rufnummer als Text hinter die URL ein. Auf diese Weise kann die auf dem Ausdruck sonst nicht sichtbare Rufnummer mit ausgedruckt werden.

Weitere Tipps, wie man die Usability und Batteriefreiheit der eigenen Website mittels CSS prüfen kann, findet man z.B. unter ffoodd.github.io/a11y.css. Weitere Infos zu den Attribut-Selektoren, der content-Eigenschaft und der attr()-Funktion gibt es unter w3schools.com, w3schools.com bzw. w3schools.com.