← Wszystkie przykłady

Pokaż tekst alternatywny obrazów

Obrysowuje obrazy i wyróżnia te bez tekstu alternatywnego, ułatwiając kontrolę dostępności.

Kod do skopiowania

/* 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);
}

Jak użyć tego przykładu

1. Skopiuj kod przyciskiem powyżej.
2. Zainstaluj JustZix (2 minuty) i otwórz wtyczkę na docelowej stronie.
3. Dodaj nową regułę dopasowaną do tej strony.
4. Wklej kod w panelu CSS reguły i zapisz — efekt pojawi się od razu.