← Alle Beispiele

Alt-Text der Bilder anzeigen

Umrandet Bilder und hebt fehlenden Alt-Text hervor, um Barrierefreiheitsprüfungen zu erleichtern.

Code zum Kopieren

/* Outline images and surface their alt text as a tooltip-style label. */
img {
  outline: 1px dashed rgba(0, 120, 215, 0.7);
}
img:not([alt]),
img[alt=""] {
  outline: 2px solid #d33;
}
img[alt]:not([alt=""])::after {
  content: attr(alt);
}

So verwendest du dieses Beispiel

1. Kopiere den Code mit der Schaltfläche oben.
2. Installiere JustZix (2 Minuten) und öffne die Erweiterung auf der Zielseite.
3. Füge eine neue Regel hinzu, die zu dieser Seite passt.
4. Füge den Code in das CSS-Panel der Regel ein und speichere — der Effekt erscheint sofort.