Meta issue per i feedback raccolti durante il workshop del 16 giugno 2025 agli A11y days

[Fupete]

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

• Ho verificato e non esiste

Versione della libreria

2.14

Cosa

Durante il workshop "Accessibilità by design" del 16 giugno 2025 agli Accessibility Days, oltre 40 partecipanti (esperti e non) hanno validato i nuovi componenti di Bootstrap Italia attraverso test sul minisito dedicato tinyurl.com/accessibilitydays.

Questa meta-issue raccoglie di seguito in calce una lista con tutti i feedback emersi durante il workshop, suddivisi per componente e usata a titolo di "checklist" delle lavorazioni.

Aggiornamento 14 ottobre 2025: pubblicato su Web Accessibile un dettagliato articolo di approfondimento sui risultati del workshop: 40 persone, due ore, un obiettivo: migliorare .italia insieme alla community.

Aggiornamento 10 ottobre 2025: molte cose sono state integrate e risolte in Bootstrap Italia v2.16.0 e successivi rilasci. Altre sono ancora in discussione o sono diventate nuove segnalazioni. La presente meta-issue rimarrà aperta fino alla conclusione di tutti i punti ancora in lavorazione a titolo di memoria storica dei risultati del workshop.

Perché

Validazione con utenti ed esperti di accessibilità. Dal vivo.

Contesto

Workshop di validazione con +40 partecipandi tenuto agli Accessibility Days 2025.

---

Sul minisito stesso oggetto del test:

Rispetto alla PR #1456 dedicata al minisito.

•  L'header ha una scritta non comprimibile oltre un certo livello che inficia/rompe in orizzontale i layout mobile a forte
• Creare un template/generatore per mini ambienti di test (basato sul minisito a11y days 2025) #1560

Nuovo componente card:

Rispetto alla PR #1429 dedicata (da rilasciare in Bootstrap Italia 2.16.0).

Feat:

• Implementare menu di condivisione nelle Card di Bootstrap Italia #1561
• Finire card varianti Presentazione:
  • Aggiungere variante Banner
  • Riprogettare varianti Dati: Completare progettazione varianti Card "Dati" (criticità accessibilità) design-ui-kit#201
    • Implementare varianti Dati in sviluppo
  • Migliorare Focus da tastiera su titoli e link multiriga (bug aggiunto post workshop da @Fupete)

Bug:

• Tag date, attributo datetime nel minisito in alcune varianti ed esempi il formato è sbagliato
• Card inline mini quella senza immagine ha un minibug: la data non è allineata a dx… da verificare anche spazio per il titolo… si estende?
• Chips: layout rotto con zoom solo testo del browser #1563
• Parole lunghe rompono larghezza delle card di tipo profilo/luogo

Da valutare:

• Troppo padding interno nelle nuove card su mobile? Da verificare [da valutare se aprire una issue dedicata su UI Kit Italia]
• Troppo padding esterno nel gruppo se con griglia colonne Bootstrap dentro container con salti breakpoints? Documentare uso container-xl e container-xxl nella documentazione dei layout e gruppi
• Pulsanti secondari dovrebbero poter essere 100% su mobile? Specie se uno solo? E se fossero due? Documentare markup usando d-grid nel capitolo personalizzazione (vedi Buttons fluidi)
• Card contenuti affini verificare presenza role="list" nell'ul. Rimuovere se non necessario.
• Liste nelle card (contenuti affini e liste descrittive): una lista deve essero anche visivamente? Valutare se è sufficiente l'impaginazione a capire che si tratta di liste.
• Stiamo sbagliando da anni a fare i gruppi di card? Dovrebbero essere una lista in se le griglie specie quando sono lunghi elenchi? Se sì documentare il caso nella zona layout e gruppi e aggiungere eventuale SCSS specifico per impaginare griglie Bootstrap righe e colonne usando ul e li al posto di div.
• Ambiguità Chips argomento e link Categoria. Si può fare qualcosa non solo per i lettori di schermo per chiarirla? [Nota tecnica: dovrebbe essere chiaro l'uso dal contesto d'uso, nel minisito di test sono troppo mescolati gli esempi per far vedere tutte le possibilità].
• Icone, verificare posizione, gerarchia e corretta semantica. Renderla parte del link cliccabile almeno nel caso di documenti e media [ndr: si è scelto di renderla sempre parte del link laddove presente per evitare ambiguità].
• C'è un rischio dai link secondari "grigi" che sembrino disattivati? [Decisione: si valuta ininfluente rispetto ai casi d'uso. Oltre ad essere un'opzione, nessuno vieta di farli colore primary laddove necessario].
• Potrebbe essere percepita una data doppia sulle card di tipo evento rispetto all'eventuale data di pubblicazione? Aggiungere una nota nella documentazione.
• Chrome TTC su Android non funziona il menu e alcune card. [Nota tecnica: la funzionalità Leggi la pagina, diversa dall'uso di un vero e proprio screen reader, non è possibile supportarla 100/100 per il menu di navigazione che è una funzionalità interattiva avanzata, non contenuto vero e proprio. I contenuti delle card dai test sono tutti leggibili.]

Megamenu:

• Megamenu: rivedere struttura semantica delle liste multiple (ul per ogni colonna) #1562

Navbar mobile/o a forte ingrandimento (quando presente il Burger):

•  Icone non significative dovrebbero sempre avere aria-hidden=true anche quando all'interno di altri elementi che hanno già aria-label complessiva. Perché un utente di lettore di schermo potrebbe navigare per immagini. [valutare di aprire issue dedicata alle Icone]
• (Chrome + VoiceOver) forse un comportamento strano annunciando "gruppo". È un compromesso? [Nota tecnica: dai test non risulta influente]

In generale Bootstrap Italia:

•  In Bootstrap Italia ci sono ancora svg senza role="img"... se hanno aria-hidden="true" ok, sennò dovrebbero avere il ruolo e il title interno, oppure essere nascoste con aria-hidden e, se serve, avere uno span sr-only o visually-hidden di qualche tipo. [valutare di aprire issue dedicata alle Icone]

[Fupete]

FYI Molto di quanto marcato come "fatto" sarà rilasciato nella prossima v2.16.0 di Bootstrap Italia. Il resto diventerà nelle settimane successive issue dedicate e/o nuove PR.

[Fupete]

Ho appena aperto le issue relative alle cose da implementare nelle prossime release.
Rimangono due o tre punti aperti da discutere (svg, chips, ...)

FYI @astagi @zetareticoli