Wygenerowane treści z ułatwieniami dostępu

  • NIE używaj content do przekazywania istotnego tekstu (etykiet, stanu, instrukcji) – zachowaj go w DOM (WCAG F87). Argument dotyczący tekstu alternatywnego ma na celu ograniczenie szkód w przypadkach, gdy element dekoracyjny przypadkowo niesie ze sobą znaczenie, a nie licencję.
  • Użyj argumentu tekstu alternatywnego content, aby podać tekst alternatywny dla czytników ekranu. Na przykład: content: url(cloud.svg) / "Save";
  • Użyj content: "text" / "";, aby zapobiec odczytywaniu przez czytniki ekranu tekstu, który pełni wyłącznie funkcję dekoracyjną.
  • NIE używaj pustego argumentu tekstu alternatywnego w przypadku obrazów – domyślnie są one już prezentacyjne. Na przykład to jest nieprawidłowe: content: url(cloud.svg) / "";.
  • NIE używaj argumentu tekstu alternatywnego do opisywania emotikonów, chyba że opis różni się od oficjalnej nazwy emotikonu. Na przykład nie używaj content: "🎉" / "celebration";, ale content: "🎉" / "Yay!"; jest w porządku.

Argumentu tekst alternatywny używaj TYLKO wtedy, gdy tekst różni się od wartości podstawowej i nie występuje jeszcze w DOM. To jest nieprawidłowe:

HTML:

<button class="save">Save</button>

CSS:

button.save::before {
  content: url(cloud.svg) / "Save";
}

Czytnik ekranu odczyta go jako „Zapisz zapisz”.