Stili del Toggle e delle Checkbox con screen reader attivo

[giuliaghisini]

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

• Ho verificato e non esiste

Versione della libreria

3.x PR #1716

Cosa

Gli stili del toggle con

• osx+chrome+voiceover
• osx+firefox+voiceover
• windows + jaws + chrome
• windows + jaws + firefox
• windows + jaws + edge

non sono bellissimi.

Con windows+nvda e osx+safari+voiceover invece funziona bene.

Da quello che capisco, sembra sia uno stile proveniente dal lettore di schermo.

Qui https://www.w3.org/WAI/ARIA/apg/patterns/switch/examples/switch/ invece li vedo funzionare bene (se può essere d'aiuto come spunto per la soluzione)

Da controllare anche la resa su toggle multipli disposti verticalmente

Perché

stili con lettori di schermo

Contesto

No response

Altro

No response

[giuliaghisini]

Aggiungo anche (non so se è voluto) che la dimensione del font della label è molto più piccola rispetto a quella delle checkbox

[giuliaghisini]

ho visto che lo stesso problema del focus con lettore di schermo attivo c'è anche con le checkbox

[zetareticoli]

@Fupete dobbiamo recepire questa indicazione?

To make understanding the state of the switch easier for users with visual or cognitive disabilities, a text equivalent of the state (on or off) is displayed adjacent to the graphical state indicator. CSS attribute selectors ensure the label displayed is synchronized with the value of the aria-checked attribute.

[zetareticoli]

@giuliaghisini in pratica si vede un doppio focus, anche sulla input checkbox invisibile. In 8c67506 ho modificato dimensione, fammi sapere con nuovo test come si vede

[giuliaghisini]

@giuliaghisini in pratica si vede un doppio focus, anche sulla input checkbox invisibile. In 8c67506 ho modificato dimensione, fammi sapere con nuovo test come si vede

esatto, tra poco lo provo.
Ho visto che nella pagina di prova del form c'è un errore di stile, non so se forse va aggiornato il markup o è proprio un problema di stili css https://bootstrap-italia-git-feat-to-c782f2-dip-trasformazione-digitale.vercel.app/docs/esempi/form/

@zetareticoli

[giuliaghisini]

@zetareticoli , l'ho provato. Meglio ma ancora un po' confuso a mio parere, si vede sempre il doppio focus:

con position="relative" sulla label si risolve.

E forse, per uniformità con gli input, si potrebbe aggiungere iun border-radius della label uguale a quello dell'input.