Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Help

Natan, tô tendo um problema. No projeto utilizo o Reset CSS e por padrão, ele já deixa o list-style com o valor none. Fui acrescentar os bullets nos itens da lista com o before e o leitor de tela os lê como "bolinha". Como lido com isso? Estou pesquisando, mas não encontrei nada ainda.

.li::before {
    content: '\2022';
    padding: 7px;
}
6 respostas

Olá Anderson, tudo certo?

Sem o before, o leitor de tela lê a lista como "bolinha"

Olá, Diego

Mas estou usando o before.

Então, queria saber se sem o before, sem o ".li::before", o leitor ainda lê a "bolinha"

Ah, sim!! Sem o before, ele não lê "bolinha".

Eu notei que ao trocar o "\2022" por um "url(caminho da imagem)", ele não lê "bolinha". Eu quero resolver isso sem recorrer ao url, mas não sei se é possível :/

Você poderia salvar a imagem da bolinha e colocar ela no before.

Já que você está nessa parte de acessibilidade, tem um episódio do podcast "hipster ponto tech" que fala sobre acessibilidade web, vale a pena conferir. É o episódio 21, dá pra escutar pelo spotify.

Eu acho que terei que fazer isso mesmo!

Vou conferir esse podcast. Muito obrigado, Diego

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software