marcossanhudo
commented
5 months ago Como @HbLuca já citou, temos alguns problemas semânticos com a página.
Estranhamente, nos meus testes com o narrador nativo do Windows, os headings são corretamente narrados. Porém, temos algumas falhas críticas, detalhadas a seguir. Em caso de qualquer dúvida ou contestação, entre em contato!
Tags incorretas
Na página de um abrigo, algumas informações chave usam a tag h1 para que tenham um texto em negrito. É ideal que use-se, ao invés, uma tag puramente formatativa, como b, strong, span, ou div. A tag h1 não é a melhor, porque ela tem uso semântico: identifica títulos de alto nível, como o da página ou de grandes seções da página. O uso indevido de tags prejudica a navegação com narradores de tela.
Itens afetados: cidade, pessoas abrigadas, capacidade do abrigo, contato, chave Pix.
Tags faltantes
É ideal que usemos a tags de landmarks para identificar as partes das páginas. Especificamente, podemos usar:
- a tag
nav, para identificar a barra de navegação do site; - a tag
main, para identificar a parte principal de cada página (como a lista de abrigos, na home; e as informações dos abrigos, nas páginas de abrigos).
Um exemplo visual do uso das tags pode ser encontrado aqui: exemplo do W3C.
O uso destas tags também facilita a navegação com narradores de tela, permitindo que os usuários dos narradores pulem entre diferentes partes da página.
Botões ícone sem descrição textual
Existem botões que contêm apenas ícones, sem texto acompanhando. Isso impossibilita que narradores de tela narrem o sentido desses botões, e tem duas soluções, que podem ser discutidas com a equipe de design:
- incluir um texto no próprio botão;
- manter o botão sem texto, e atribuir a ele algum
aria-label.
Itens afetados:
- Na home, os botões do menu hambúrguer, e o de atualizar a página;
- Nas páginas de abrigo, o botão de voltar à home.
Observação: é otimo que estejamos usando SVG's como ícones, ao invés de fontes de ícone; muitas pessoas com dislexia usam extensões de navegadores para alterar a tipografia dos sites que visitam, e nem sempre as fontes mais acessíveis incluem ícones.
risaddex
Descrição
Realizar o teste de acessibilidade para verificação do que está sendo apresentado na tela de modo falado. Está correlacionado ao https://github.com/SOS-RS/frontend/issues/181
Problema encontrado
Ao realizar o teste de acessibilidade para verificação do que está sendo apresentado na tela, existem algumas coisas que não estão corretas. Ex: Logo no Inicio escutasse "Notifications F8", não aparece a parte do botão atualizar, não aparece os "três traços" para que seja realizada a leitura, o Buscar por abrigo ou endereço não é identificado, Rua que escuta como "ÉRRE" ou seja fonética da letra ao invés de ser identificado como RUA, os nros de CEP, podem ter a parte escrita com CEP a frente.
Após conversa com Marcos Sanhudo pelo Discord, temos um pouco mais de detalhamento sobre... A primeira preocupação é que parece que a semântica dos componentes não é narrada (Não é mesmo) Por exemplo, o leitor não diz que o "SOS Rio Grande do Sul" é um título, ou que o "Filtros" é um botão, com isso a pessoa pode ficar bem desorientada, era ideal que a lista dos abrigos fosse narrada como uma lista, e cada abrigo como um elemento também outra preocupação é testar com múltiplos leitores de tela. (Farei logo menos).
Prioridade
Solução proposta
Verificar a parte de front referente a acessibilidade para que da mesma forma que os abrigos e a quantidade de abrigos seja também audível
Ambiente
Mobile - Xiaomi Redmi Note 9S Google Chrome https://stg.sos-rs.com/ com opções do desenvolvedor - selecionar para ouvir e atalho ativo.
Evidência
https://www.loom.com/share/ed7fe03d6d224e5b9070fcbb2a079629?sid=37308bec-3cab-4abf-9ffc-979019888901