Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Componente Steppers: migliorare accessibilità icone svg #1210

Open
1 task done
Fupete opened this issue Sep 5, 2024 · 0 comments
Open
1 task done

Componente Steppers: migliorare accessibilità icone svg #1210

Fupete opened this issue Sep 5, 2024 · 0 comments
Assignees
Labels
a11y Issue e PR riguardanti accessibilità e dintorni

Comments

@Fupete
Copy link
Contributor

Fupete commented Sep 5, 2024

Esiste già una discussione sul tema che ti interessa, o su un tema simile?

  • Ho verificato e non esiste

Versione della libreria

2.9.0

Cosa

Icone svg negli esempi di varianti di questo componente veicolano significato.
Quindi dovrebbero essere annunciate dai lettori di schermo.

È un po' strano navigarle e sentire annunciare solo "Immagine" e magari il messaggio è veicolato subito dopo da uno span nascosto subito dopo (es. tick "Confermato"). In altre icone non c'è proprio annuncio invece e non hanno alternative testuali.

Andare verso una soluzione uniforme Es. con role=img e poi tag <title> dentro prima di <use>?
Oppure con proprietà aria-labelledBy e puntare allo con classevisually-hidden`?
Oppure?

Da verificare la soluzione migliore, si veda anche: #749 (comment). E renderla coerente in tutti i componenti laddove dove serve 'annunciare' significato di una svg. Ci sono diverse issue già aperte di dettaglio per altri componenti, magari è utile documentare la cosa centralmente nella pagina icone principalmente? Pensiamoci.

Perché

Amichevole con i lettori di schermo.

Contesto

Verifiche di accessibilità sui componenti.

⚠️ Sarà da aggiornare lo status delle verifiche nella board census alla risoluzione.

Altro

Uniformare anche in React kit e Angular kit. Da notare che in React kit il problema svg potrebbe essere diversa perché implementate in modo diverso (da verificare).

@Fupete Fupete added the a11y Issue e PR riguardanti accessibilità e dintorni label Sep 5, 2024
@zetareticoli zetareticoli moved this from 🆕 New to 📋 Backlog in Design system .italia 🇮‍🇹 Sep 9, 2024
@zetareticoli zetareticoli moved this from 📋 Backlog to 🆕 New in Design system .italia 🇮‍🇹 Sep 9, 2024
@zetareticoli zetareticoli moved this from 🆕 New to 📋 Backlog in Design system .italia 🇮‍🇹 Sep 20, 2024
@Fupete Fupete added this to the Prossimi Fix Accessibilità milestone Oct 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Issue e PR riguardanti accessibilità e dintorni
Projects
Status: 📋 Backlog
Development

No branches or pull requests

2 participants