Skip to content

[A11y] List: ripristino semantica liste su Safari/VoiceOver #1692

@deodorhunter

Description

@deodorhunter

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

  • Ho verificato e non esiste

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

Image

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

Metadata

Metadata

Assignees

Labels

a11yIssue e PR riguardanti accessibilità e dintorni

Type

Projects

Status

👀 In review

Relationships

None yet

Development

No branches or pull requests

Issue actions