Ü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.

Werbung

Werbeblocker aktiv?

Vermutlich aufgrund eines Werbeblockers kann an dieser Stelle leider keine Werbung angezeigt werden. Als Blog ist diese Website jedoch darauf angewiesen, um diverse Kosten abdecken zu können. Vielleicht möchtest du Servaholics ja in deinem Werbeblocker als Ausnahme hinzufügen und so unterstützen? 🙂

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.

Deine Meinung zu diesem Artikel?