search

italia / bootstrap-italia

Bootstrap Italia è un tema basato su Bootstrap 5 conforme alle "Linee guida di design per i siti internet e i servizi digitali della Pubblica Amministrazione"
https://italia.github.io/bootstrap-italia
BSD 3-Clause "New" or "Revised" License
309 stars 163 forks source link

[a11y] Errore validazione su SVG #1097

Closed AlessandroVecchi closed 2 months ago

AlessandroVecchi commented 6 months ago

Versione di Bootstrap Italia

2.7.x

Comportamento atteso

Validazione dell'accessibilità.

Comportamento attuale

Il validatore Mauve++ segnala su tutte le SVG usate da BI questo errore

SC 1.1.1 - Tech ARIA6 [WCAG 2.1 (A)]Using aria-label to provide labels for objectsopen_in_new es.

<svg class="icon">
<use href="/it-it/bootstrap-italia/svg/sprites.svg#it-expand"></use>
</svg>

A prescindere dal fatto che la label legata all'elemento (che sia un button, un anchor o un dropdown) sia precisata in un altro tag (a, span, ecc.)

Possibili soluzioni

È da considerarsi un errore reale oppure è un limite del validatore che non è in grado di riconosce il ruolo dell'SVG all'interno del contesto? Può essere utile definire un aria-hidden="true" su tutte le SVG?

Fupete commented 5 months ago

Ciao, rendere tutte le icone di Bootstrap Italia decorative non credo sia una soluzione, dipende in effetti dal contesto d'uso dell'icona specifica se è decorativa o meno.

FYI c'è un thread aperto sullo stesso argomento sullo Slack Developers (canale #chat). Come ho già scritto lì: IMHO da una parte non è facilissimo risponderti nello specifico, senza conoscere lo scopo ad esempio di quell'immagine SVG nel suo contesto, dall'altra MAUVE++ testa le tecniche, cosa che sì può avere dei limiti, perché i criteri (che sono quelli richiesti dalla norma) si possono rispettare anche in altri modi.

Lascio a @cfabry e @astagi altre considerazioni.

AlessandroVecchi commented 5 months ago

Ciao @Fupete Nell'esempio in questione l'SVG serve a creare la freccia del componente dropdown: https://italia.github.io/bootstrap-italia/docs/componenti/dropdown/ In generale, in tutti i casi in cui l'SVG sia usata all'interno del contesto di un pulsante (a o button) che ha già una sua azione dichiarata sotto forma testuale sarebbe supefluo descrivere l'svg anche perché il suo scopo è puramente visivo (c'è aria-expanded che serve già a determinare lo stato del dropdown per gli screen readers).

mariantanase commented 4 months ago

È da considerarsi un errore reale oppure è un limite del validatore che non è in grado di riconosce il ruolo dell'SVG all'interno del contesto? Può essere utile definire un aria-hidden="true" su tutte le SVG?

In effetti, per le frecce (tipo 'Torna su') io l'ho avevo aggiunto per non avere errore sul validatore mauve.

<svg aria-hidden="true" class="icon icon-light">
    <use href="#it-arrow-up"></use>
</svg>