ArcelorMittal

Explore

Mobile

Acessibilidade
Acessibilidade

Em nossa análise verificamos se as cores estão adequadas para todos os tipos de percepção da cor ou para a ausência dela, como a discromatopsia hereditária, também conhecida por daltonismo; se o tipo de fonte (serifada ou sem serifa) e texto (justificado, por ex) estão adequados; se o peso da fonte está possibilitando uma boa leitura para todos os tipos de pessoas, como jovens e idosos, bem como àqueles com algum tipo de deficiência visual (miopia, astigmatismo ou da idade mesmo).

⁠

Página Inicial / Header

Pontos observados:

A fonte de itens no carrinho está em tamanho 11px, menor do que 12px, o ideal para a legibilidade em mobile.

Paleta de cores utilizada no botão de “entrar”, dependendo da tela de mobile não legível para o usuário, pois falta contraste.

Botão menu hambúrguer, segundo o recurso recurso de acessibilidade para cegos retornou como: botão/banner ponto de referência.

Botão de carrinho vazio, segundo o recurso recurso de acessibilidade para cegos retornou como: zero/botão/visitado/link.

⁠

Sugestões de melhoria:

Aumentar a fonte da quantidade de itens no carrinho.

Aumentar o contraste do botão de “entrar”, deixando mais acessível e legível a todos os tipos de tela de mobile.

Ideal, para facilitar a navegação das pessoas cegas, é pensar em uma forma de deixar o retorno como: "menu/botão” e, “carrinho/zero item/botão”.

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 4ª, dando consistência e padronização ao design.

Impacto: Baixo

⁠

Alto

⁠

Página Inicial / Barra de Busca

Ponto observado:

Falta contraste no placeholder da barra de pesquisa, e dependendo da tela de mobile fica ilegível.

⁠

Sugestão de melhoria:

Melhorar o contraste do placeholder, deixando mais legível para todas as telas de mobile.

Heurísticas de Nielsen atendidas: 4ª, dando consistência e padronização ao design; 8ª, com estética e design minimalista que ajuda o usuário.

Impacto: Baixo

⁠

Alto

Referência:

⁠

Página Inicial / Card de Produtos

Ponto observado:

O efeito gradiente usado no aviso de 5% de desconto e no botão de “Comprar” possui um contraste baixo de cores, que atrapalha a legibilidade e deixa esses textos menos acessíveis.

⁠

Sugestão de melhoria:

Aumentar o contraste dos textos dentro do botão “Comprar” e do aviso de desconto (que precisa ser visualmente diferente do botão).

Heurísticas de Nielsen atendidas: 4ª, dando consistência e padronização ao design; 8ª, com estética e design minimalista que ajuda o usuário.

Impacto: Baixo

⁠

Alto

⁠

Página Inicial / Newsletter / Footer

Pontos observados:

A fonte laranja no fundo preto da seção Newsletter tem uma baixa nota de contraste, prejudicando a legibilidade da informação.

O efeito gradiente usado no botão “Cadastrar” possui um contraste baixo de cores, que atrapalha a legibilidade e deixa o botão menos acessível.

⁠

Sugestões de melhoria:

Aumentar o contraste do texto da seção Newsletter para deixar a informação mais acessível.

Aumentar o contraste do texto dentro do botão “Cadastrar”.

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 4ª, dando consistência e padronização ao design.

Impacto: Baixo

⁠

Alto

⁠

Página de Categoria

Ponto observado:

Botão de “Limpar” o filtro está com baixa nota de contraste para fontes pequenas.

⁠

Sugestão de melhoria:

Aumentar o contraste do texto do botão de “Limpar” o filtro.

Heurísticas de Nielsen atendidas: 1ª, dando visibilidade do status do sistema ao usuário; 3ª, dando controle e liberdade para o usuário; 4ª, dando consistência e padronização ao design; 8ª, com estética e design minimalista que ajuda o usuário.

Impacto: Baixo

⁠

Alto

⁠