Componente <it-icon> - Errore di accessibilità WCAG 2.1 1.1.1: Contenuti non testuali

[mattiamichini-design]

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

• Ho verificato e non esiste

Versione della libreria

1.0.3

Cosa

Utilizzando il validatore di accessibilità Mauve++ all'interno del componente , viene rilevato l'errore WCAG 2.1 1.1.1 SC 1.1.1 - Tech ARIA6 [WCAG 2.1 (A)]Utilizzare aria-label per fornire etichette per gli oggetti(https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6)

Perché

La segnalazione è rilevante perché il validatore non considera la pagina accessibile se non viene risolto questo problema.

Contesto

No response

Altro

No response

[Fupete]

Ciao @mattiamichini-design immagino tu ti riferisca alla pagina con tutte le icone a disposizione?

La tecnica segnalata da Mauve è solo una delle tecniche con cui si può rendere accessibile a uno strumento assitivo una icona. Tra l'altro non utile in tutti i contesti: potrebbero essere nascoste con aria-hidden=true se già il significato è veicolato da testo che precede, o segue, potrebbero avere role="img" e dentro un tag <title> che ne veicoli il significato, etc. etc.

È responsabilità di chi sviluppa scegliere la tecnica più adatta a farlo a seconda del contesto in cui sta usando l'icona. Per referenza: italia/bootstrap-italia#749 (comment)

È vero che nella documentazione di tutti e tre i framework dovremmo rendere esplicita questa cosa magari con un callout Accessibilità @astagi che evidenzi le possibilità, come ci siamo già detti più volte. Prima cosa anno nuovo direi. Lascio aperta la issue per tracciarlo.

ps. nei diversi componenti del design system in cui è usata un'icona e ha bisogno di esserne veicolato il messagio dovremmo già aver corretto e implemeto la tecnica più utile (nascosta, role, title, aria-label etc.). Se ne trovi alcuni senza facci sapere, che sarebbe un bug.

cc @zetareticoli