Esiste già una discussione sul tema che ti interessa, o su un tema simile?
Versione della libreria
main e 3.x
Cosa
L'attuale implementazione CSS di Bootstrap Italia causa la perdita della semantica di lista su sistemi Apple Safari + VoiceOver (macOS/iOS).
A causa di un comportamento noto di WebKit (introdotto nel 2020), l'applicazione di list-style-type: none; rimuove la natura di "lista" per le tecnologie assistive. Di conseguenza, su Safari + VoiceOver (macOS/iOS), le liste non vengono annunciate come tali e gli item vengono letti in sequenza senza indicare il conteggio o la posizione.
Segue il CSS attualmente presente in BSI che forza la rimozione dei bullet:
.it-list-wrapper .it-list {
list-style-type: none; /* Rimuove la semantica su Safari */
margin: 0;
padding: 0;
}
Perché
Garantire l'accessibilità su tutte le possibili combinazioni di browser e strumenti assistivi.
Documentazione tecnica sul problema: VoiceOver and Lists
Issue collegata su dev-kit-italia
Contesto
Safari e VoiceOver (macOS + iOS)
Altro
Per correggere questo problema in modo cross-browser e conforme ad ARIA senza dover aggiungere role duplicati, si potrebbe rimuovere il CSS indicato e invece agire sullo pseudo-element ::marker per mantenere la semantica attiva pur nascondendo visivamente il punto elenco:
ul li::marker {
font-size: 0px;
}
https://caniuse.com/?search=%3A%3Amarker
https://bugs.webkit.org/show_bug.cgi?id=204163
Test preliminari effettuati su Safari + VoiceOver confermano che questa modifica permette al lettore di schermo di annunciare correttamente: "You are currently on a list..." e il numero di elementi presenti.
Sono da verificare i comportamenti di tutte le altre combinazioni browser/OS/screen reader
Esiste già una discussione sul tema che ti interessa, o su un tema simile?
Versione della libreria
main e 3.x
Cosa
L'attuale implementazione CSS di Bootstrap Italia causa la perdita della semantica di lista su sistemi Apple Safari + VoiceOver (macOS/iOS).
A causa di un comportamento noto di WebKit (introdotto nel 2020), l'applicazione di list-style-type: none; rimuove la natura di "lista" per le tecnologie assistive. Di conseguenza, su Safari + VoiceOver (macOS/iOS), le liste non vengono annunciate come tali e gli item vengono letti in sequenza senza indicare il conteggio o la posizione.
Segue il CSS attualmente presente in BSI che forza la rimozione dei bullet:
Perché
Garantire l'accessibilità su tutte le possibili combinazioni di browser e strumenti assistivi.
Documentazione tecnica sul problema: VoiceOver and Lists
Issue collegata su dev-kit-italia
Contesto
Safari e VoiceOver (macOS + iOS)
Altro
Per correggere questo problema in modo cross-browser e conforme ad ARIA senza dover aggiungere role duplicati, si potrebbe rimuovere il CSS indicato e invece agire sullo pseudo-element
::markerper mantenere la semantica attiva pur nascondendo visivamente il punto elenco:https://caniuse.com/?search=%3A%3Amarker
https://bugs.webkit.org/show_bug.cgi?id=204163
Test preliminari effettuati su Safari + VoiceOver confermano che questa modifica permette al lettore di schermo di annunciare correttamente: "You are currently on a list..." e il numero di elementi presenti.
Sono da verificare i comportamenti di tutte le altre combinazioni browser/OS/screen reader