por que os filtros da minha loja online não funcionam com um leitor de tela

Os filtros frequentemente não têm nome, função ou notificação de estado

Os filtros de produtos geralmente não funcionam com um leitor de ecrã porque não é suficientemente claro o que é um filtro, qual é o seu estado atual ou o que acontece quando o utilizador faz uma escolha. Os filtros em muitas lojas online consistem em caixas de verificação ou botões que funcionam visualmente bem, mas estão programaticamente incompletos: uma caixa de verificação sem rótulo associado, um botão que apenas mostra através de uma alteração de cor que um filtro está ativo, ou um painel de filtros que se abre sem que um leitor de ecrã o comunique. Para um visitante vidente, isto não é um problema, porque vê a alteração. Para um leitor de ecrã, essa alteração visual não existe — precisa de um anúncio técnico.

Outro problema recorrente é que a lista de resultados muda, mas um leitor de ecrã não é informado disso. Por exemplo, "24 resultados" pode ser apresentado sob o filtro, mas sem ser comunicado como uma notificação de estado, pelo que o utilizador tem de procurar por si próprio o que mudou. Isto está intimamente relacionado com a forma como os cabeçalhos e a estrutura da página estão organizados, porque um leitor de ecrã navega frequentemente através dessa estrutura para determinar onde os resultados começam — mais informações sobre isto em por que um leitor de tela não lê corretamente os títulos da minha páginaA forma como o foco se comporta após aplicar um filtro também desempenha um papel: se o foco se mover involuntariamente para outra parte da página, o utilizador de leitor de ecrã perde a orientação, conforme descrito em por que o cursor ou foco salta ao redor do meu site.

O que a WCAG estabelece sobre isto

Que os filtros devem poder comunicar um nome, função e estado à tecnologia de apoio como um leitor de ecrã, e que as alterações de estado, como um número de resultados alterado, sejam comunicadas, resulta dos critérios sobre nome, função e valor e sobre mensagens de estado em WCAG 2.1 (W3C) — o nível que na prática é esperado através de EN 301 549. Uma análise automática identifica parte destes problemas, como uma caixa de verificação sem rótulo, mas se uma notificação de estado é realmente compreensível para um utilizador é uma avaliação que uma análise não consegue fazer — consulte um teste de acessibilidade automático pode encontrar tudo.