Miglioramenti accessibilità componenti Stepper, Navscroll e select
Problemi riscontrati
-
Il Navscroll ha come riferimento di etichetta un elemento con ID accordion-title-oneche non è presente nel DOM. Un elemento padre dell'accordion dovebbe avere questo id, esempio:<span class="accordion-header" id="accordion-title-one">...</span>Riferimento https://italia.github.io/design-comuni-pagine-statiche/sito/novita-dettaglio.html -
Nello Stepper sono assenti le etichette per screen reader che identificano lo stato dello step (Attivo, Confermato) https://italia.github.io/bootstrap-italia/docs/componenti/steppers/ esempio: <li>Secondo contenuto <span class="visually-hidden">Attivo</span></li> -
Nello stepper l'elemento con classe stepper-indexdeve avere l'attributoaria-hidden="true" -
La select non ha un focus visibile come gli altri input, ed in caso di errore rimane di colore di sfondo chiaro invece che rosso.
Test
-
Aprire la pagina https://segnalazioni.cittametropolitanadigenova.opencityitalia.it/segnala-disservizio/ -> selezionare un territorio -> altre tipologie di servizio -> autenticarsi o proseguire senza login -
Nello Stepper lo stato step corrente e step confermato sono letti dallo screen reader -
Nello Stepper il testo 1/2 o simile non viene letto dallo screen reader -
La select ha un focus visibile quando selezionata da tastiera -
La select ha lo sfondo rosso come gli altri input quando è in errore -
Con l'estensione del browser axe non viene segnalato un riferimento rotto dall'attributo aria-labelledby (errore WCAG)
Edited by Marco Zampetti