Testując ostatnio jeden z elementów strony, trafiłem na dość dziwny problem. Pojawia się na komputerach Apple przy połączeniu przeglądarki Safari i czytnika ekranu VoiceOver (problem nie pojawia się gdy używamy przeglądarki Chrome). W momencie gdy dla elementów list zastosujemy deklarację CSS list-style-type: none; Safari usuwa z semantykę elementu i czytnik przestaje traktować element jako listę.
VoiceOver przestaje więc komunikować, że: dany element jest listą, ile elementów ona zawiera i na którym elemencie aktualnie się znajdujemy. Dotyczy to zarówno listy uporządkowanej ol, jak i nieuporządkowanej ul. Pojawia się także przy przypisaniu wspomnianej deklaracji także do elementów li.
Usuwając więc domyślne wypunktowani czy numerowanie jak się często dzieje w przypadku elementów strony takich jak menu i breadcrumbs, lub próbując zastąpić wypunktowanie za pomocą tła w CSS pozbawiamy niektórych użytkowników wszystkich informacji o listach.
Rozwiązaniem problemu będzie w takim przypadku dodanie atrybutów role="list". Który przywróci semantykę elementu. Ewentualnie dodanie pseudoelementu ::before o nie pustej wartości np. przez zastosowanie spacji o zerowej szerokości content: "\200B";.
Uwaga: Dodanie tła przy pomocy pseudoelementu ::before z wartością content=""; bądź content=" "; nie przywraca listom semantyki.