Skærmlæsere ignorerer display:none (nogle gange)

Det er kendt at skærmlæsere så som kan vælge at ingorere den CSS kode der vil skjule indhold fra browseren. Nogle gange er det udemærket at læse det skjulte indhold og andre gange er det knap så godt.

Gaz Lemon har forklaret detaljerne i artiklen “Screen Readers and display:none“.

I bund og grund er der en nem løsning på problemet. Normalt vil man bruge en CSS kode der ligner denne:

1. .hidden {
2. display:none;
3. }

For at løse problemt skal der blot indsættes både display:none; og visibility:hidden; så koden ender således:

1. .hidden {
2. display:none;
3. visibility:hidden;
4. }

^{Kilde: 456 Berea Street og Jucy Studio}