Miglioramenti accessibilità componenti Stepper, Navscroll e select

Problemi riscontrati

  • Il Navscroll ha come riferimento di etichetta un elemento con ID accordion-title-one che 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-index deve avere l'attributo aria-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 Feb 10, 2025 by Marco Zampetti
Assignee Loading
Time tracking Loading