Série Review - brunopulis.com

Posted by Bruno Pulis on 17-08-2017

Descrição do site avaliado

Nada mais justo do que fazer Review’s de sites começando com o meu. Este site foi criado com o intuito de dar meu resumo profissional, mostrando projetos open source que participei e escrever post’s sobre assuntos envolvendo desenvolvimento web. Você pode ver o ante e o depois

Review Técnico

Quero deixar que nenhum site é 100% acessível e que os validadores não são seus salvadores definitivos, mas, eles são facilitadores para exibição de erros e corrigí-los. A melhor forma de avaliar é testando com usuários.

O site apresenta alguns erros corriqueiros como irá ser descrito abaixo:

Verificação no AccessMonitor

Usei o AccessMonitor para avaliar o site, optei por ele por ser de fácil entendimento.

Ele exibe uma pontuação de 0 a 10, sendo zero a pior nota e 10 a nota máxima, quando utilizei ele pontuou o site com 4.9 (uma nota muito baixa) o que eu recomendo é a nota ser de 7 para cima.

Gráfico demonstrativo exibindo a pontuação de acessibilidade 4.9 numa escala de 10

Texto Alternativo em imagens

Foram encontradas 8 imagens sem descrição textual, descumprindo a regra que todas as imagens devem possuir uma descrição alternativa. A existência de textos alternativos para as imagens permite que a informação possa ser apresentada de várias formas a uma variedade de agentes de utilizador ou mais conhecidos como User Agents. Caso não exista o atributo alt, as tecnologias de apoio serão incapazes de identificar a imagem e de passar o seu significado ao usuário.
Para a correção descrevi as imagens corretamente e em alguns casos, deixei o atributo alt="" em branco pela imagem ser somente decorativa.

Uso correto da aplicação do atributo alt em imagens

Dica de Ouro

Muitos desenvolvedores não sabem, mas existe um caso que o atributo alt pode ficar sem nenhuma descrição. É o caso de imagens decorativas no layout que servem somente para composição e não possuem nenhum tipo de significado. O recomendável é colocá-las no CSS.

Marcação de cabeçalhos

No site em alguns lugares ele não respeitou a hierarquia de cabeçalhos por isso exibiu um erro, Os cabeçalhos em um documento HTML devem seguir sua ordem lógica ou hierarquia, pular de um nível de cabeçalho 1 para o 3 é errado. Saiba como Organizar uma página utilizando cabeçalhos. Abaixo um exemplo da forma correta de utilização.

Eu aproveitei neste item e criei Links para salto de conteúdo ou, “Skip Links” é uma das técnicas para fornecer atalhos para facilitar a navegação.

Uso correto dos cabeçalhos

Marcação de Links, menus e textos dos links

Esse erro acontece em sua grande maioria devido aos famosos links “clique aqui”, “saiba mais”, “leia mais” e derivados. Eles precisam da informação que os rodeia para contextualizar a sua finalidade. Só pelo contexto é possível aos usuários distinguir os links e determinar o seu propósito.

Para facilitar eu retirei esses links e coloquei nos títulos de cada projeto.

Links para contorno de bloco de informação

Esse item foi corrigido com a atualizaçao do item de Marcação de Link, menus e texto dos links

Marcação de formulários e Standards W3C

Neste item existia a tag <label> dentro de um <h3> retirei ela pois era algo decorativo e não semântico. O validador estava reclamando de algumas coisas, quando eu resolvi o problema dos alt’s nas imagens ele ficou como um documento HTML válido, sem precisar de alterar mais nada.

Agradecimentos

Gostaria de agradecer o Diego Soares que me ajudou a revisar o texto.

Conclusão

Gráfico demonstrativo exibindo a pontuação de acessibilidade 10 numa escala de 10

Perceberam que a maioria dos obstáculos que encontramos eram de simples solução? Bastou eu adequar meu HTML da forma correta para ele ficar bem melhor do estado que encontramos. Com isso, concluímos que neste caso nada mais do que alguns ajustes no próprio HTML iriam oferecer melhor navegabilidade e usabilidade para os usuários de modo geral.

Gostou? Deixe seu comentário, dúvida ou reclamação e espere semana que vem que teremos um novo site para avaliar.

Abraços,
@brunopulis