Teste automatizado Double Card
Boas Práticas de Acessibilidade
Tutorial
- O objetivo é a facilitação e a compreensão dos resultados do Validador de Práticas de Acessibilidade pela ferramenta "Acess Monitor."
Por determinação da Anatel, os Portais de Telecomunicação devem receber nota igual ou superior a 8 no resultado deste monitor de acessibilidade.A partir do passo 2 estão dicas de compreensão da ferramenta, determinações legais, e erros mais comuns. 1 - Na Home do se desejar verificar uma página que se encontra em produção por exemplo www.claro.com.br/internet:
2 - Clique na aba "inserir URL" e insira o caminho desejado, "www.claro.com.br/internet".
3 - Clique em "Validar"
Se deseja avaliar, por exemplo a página de internet em stg, a URL seria http://prd-stg.clarowcs.cloud/internet
basta incluir na frente a URL o prefixo "view-source:" (não esqueça os dois pontos). Portanto a nova URL ficará assim
view-source:prd-stg.clarowcs.cloud/internet
4 - Clique no Corpo da Página, copie todo o seu conteúdo.5 - Acesse o Access Monitor e clique na aba “Inserir código HTML“. Em seguida cole o código copiado anteriormente.
6 - Clique em "Validar"
- Após validarmos o Access Monitor, o mesmo irá exibir um relatório com os erros mencionados.
É esperada uma nota superior ou igual a 8.
Esta informação será encontrada no campo de Sumário na parte superior da página de resultados do Access Monitor.
O relatório ainda mostra os erros identificados em 3 cores distintas, são elas:
"Aceitáveis" (Verde")"Para ver manualmente" (amarelo)."Não aceitáveis" (vermelho).
É preciso dar atenção a todos os itens, porém convencionamos dar prioridade aos "Não aceitáveis", pois podem dificultar ou inviabilizar a experiência do usuário com deficiência, além de impactar consideravelmente na nota.
- Vamos tratar aqui exemplos de erros mais comuns, dando prioridade aos "Não Aceitáveis".
Vocabulário de erros mais comuns:
1 - Encontrei 1 imagem na página que não tem o necessário equivalente alternativo em texto.As imagens precisam de um texto detalhando o que existe nesta imagem. Esse texto será lido por vocalizadores e ajudarão os usuários cegos a entenderem o conteúdo desta imagem.
Resolução: Em cada componente “Mídia Imagem”, existe um campo chamadao "Texto Alternativo". Basta preenche-lo corretamente.
2 - Identifiquei 3 casos em que o atributo Title do elemento link se limita a repetir o texto existente no link.
Isto acontece quando repetimos a mesma informação no título do link, bem como o texto acessivel dificultando o entedimento da pessoa com deficiência.
Resolução: Necessário o preenchimento dos campos "Título" e "Texto Acessivel" (seja link Interno, Externo ou Modal).
3 - Links com o mesmo texto afixado no conteúdo e no atributo titleConceito: Quando o Título do link e o Texto Acessivel estão iguas (ex: “Saiba mais” no título do link e “Saiba mais“ no title do link).Resolução: Deixar o campo texto para acessibilidade com mais detalhes, a fim de orientar o usuário. - Se a imagem transmite uma informação importante que não está presente no texto ao redor, ela precisa de um texto alternativo. Se for puramente decorativa, ela deve ser marcada como ilustrativa.Imagens que Contêm Texto:Se uma imagem contém texto que é importante para o usuário, o texto alternativo deve conter esse mesmo texto.Quando DEVO cadastrar um Texto Alternativo?Sempre que a imagem tiver um propósito informativo ou funcional, imagens Informativas são imagens que transmitem informações relevantes para o entendimento do conteúdo.Quando NÃO DEVO cadastrar Texto Alternativo (e habilitar a flag "Ilustrativa")?Quando a imagem não adiciona nenhuma informação nova e serve apenas para estética. Marcar como "Ilustrativa" diz aos leitores de tela para ignorarem completamente a imagem, o que melhora a experiência de navegação desses usuários.O que a flag "Imagem Ilustrativa" faz?Tecnicamente, ela adiciona um atributo alt vazio no código da imagem (ex: alt="").Isso é um sinal para os leitores de tela de que a imagem pode ser ignorada com segurança.Importante: Deixar o texto alternativo em branco (marcando como ilustrativa) é diferente de não ter o atributo alt. Um alt vazio é a prática correta para imagens decorativas. A ausência total do atributo é um erro de acessibilidade.