Contenuti generati accessibili

Funzionalità web: Contenuti Testo alternativo per i contenuti generati
  • NON utilizzare content per trasmettere testo significativo (etichette, stato, istruzioni): mantienilo nel DOM (WCAG F87). L'argomento del testo alternativo è una riduzione del danno per i casi in cui la decorazione ha accidentalmente un significato, non una licenza.
  • Utilizza l'argomento del testo alternativo di content per fornire un testo alternativo per gli screen reader. Ad esempio content: url(cloud.svg) / "Save";
  • Utilizza content: "text" / ""; per impedire che il testo puramente decorativo venga annunciato agli screen reader.
  • NON utilizzare un argomento di testo alternativo vuoto per le immagini, che sono già di presentazione per impostazione predefinita. Ad esempio, questo è sbagliato: content: url(cloud.svg) / "";.
  • NON utilizzare l'argomento del testo alternativo per descrivere le emoji, a meno che la descrizione non sia diversa dal nome ufficiale dell'emoji. Ad esempio, non utilizzare content: "🎉" / "celebration";, ma content: "🎉" / "Yay!"; va bene.

Utilizza l'argomento del testo alternativo SOLO quando il testo è diverso dal valore principale e non è già presente nel DOM. Ad esempio, questo è sbagliato:

HTML:

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

CSS:

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

Uno screen reader lo leggerebbe come "Salva salva".