AMA, I.P / Jorge Fernandes Março de 2025
O presente documento encontra-se online no Repositório da Comunidade AP - Acessibilidade e Usabilidade Digital: https://amagovpt.github.io/a11y/jornadas25/jf/
Pode visitar a Comunidades AP - Acessibilidade e Usabilidade Digital e deixar a sua questão no Fórum de Discussão ou deixar um Issue, se for mais fácil.
índice
O Accessible Name é o nome pelo qual um elemento da interface é identificado pelas tecnologias de apoio, como leitores de ecrã. Ele pode ser definido por atributos como aria-label, aria-labelledby, alt (para imagens) ou pelo próprio texto visível do elemento.
Página demonstrativa do conceito: https://amagovpt.github.io/a11y/jornadas25/jf/nome-acessivel.html
Um menu é uma lista de opções. Não é um monte de opções.
Como distinguir uma lista de opções que faz parte de um texto, de uma lista de opções que constitui um menu de opções da página?
3 observações:
Modelo para testar: https://amagovpt.github.io/a11y/jornadas25/jf/menu00.html (menu sem estrutura)
Modelo para testar: https://amagovpt.github.io/a11y/jornadas25/jf/menu01.html (menu com estrutura e navegação nas opções e subopções através de TAB)
Modelo para testar: https://amagovpt.github.io/a11y/jornadas25/jf/menu02.html (menu que faz uso de imagens-link nas opções)
ANDI > structure > 0 list significa que o menu não tem estrutura
ANDI > structure > lists, fornece inclusivamente o nº de itens da lista
Disponibilizar por página uma espécie de índice. Há várias tecnologias que usam este índice para permitir aos utilizadores saltarem por entre os diversos blocos de informação da página. No fundo, permite ao utilizador uma leitura não-linear da informação.
É uma estrutura que não nos é estranha. É desta forma que os processadores de texto constroem índices - eles recorrem à estrutura de cabeçalhos para construir automaticamente índices dos documentos. Os próprios índices dos livros são construídos com base nos cabeçalhos.
2 observações:
<h1> marcado na página<h1>...<h6>)Modelo para teste: https://amagovpt.github.io/a11y/jornadas25/jf/landmarks.html
ANDI > strucutes > headings > view headings list
Usar <table> apenas para criar tabelas de dados. Não usar o elemento <table> para layout de páginas ou componentes.
2 obervações:
<th><caption>Modelo para teste: https://amagovpt.github.io/a11y/jornadas25/jf/tabelas.html
ANDI > tables > view table list, permite analisar o caption das tabelas
ANDI > tables > Table Alerts, permite analisar a inexistência de th
Página com múltiplas tabelas de dados corretamente marcadas: https://www.acessibilidade.gov.pt/reports/monitor2/2report-pt.html
Eis alguns problemas com que qualquer um de nós se confronta quando precisa de preencher um formulário: (1) O que preencher em cada campo ou pergunta, (2) quais são os campos facultativos e quais são os obrigatórios, (3) o que fazer para evitar erros e quando ocorrem, como os corrigir.
3 observações:
Modelo para teste: https://amagovpt.github.io/a11y/jornadas25/jf/formulario01.html
Modelo corrigido: https://amagovpt.github.io/a11y/jornadas25/jf/formulario02.html
(1) Para inspecionar o nome acessível dos campos de edição:
ANDI > focusable elements > consultar lista de ocorrências fornecida pelo ANDI.
(2) Para procurar conteúdo injetado com CSS (invisível a quem usa interfaces não-visuais como é o caso dos utilizadores de leitores de ecrã):
ANDI > hidden content > "content ::before ::after"
(3) Mensagens de erro escondidas do leitor de ecrã mesmo quando visíveis no ecrã. Não vem da CSS, mas estão escondidas com aria-hidden.
ANDI > hidden content > "aria-hidden scan"
Duas categorias de imagens que são consideradas críticas:
3+1 observações:
5.1 (...) As imagens não decorativas deverão ter uma descrição breve associada, nomeadamente através do uso do atributo alt.
Modelo para teste: https://amagovpt.github.io/a11y/jornadas25/jf/grafico.html
Modelo corrigido (ícones com aria-label): https://amagovpt.github.io/a11y/jornadas25/jf/grafico02.html
Modelo corrigido (ícones com aria-hidden + texto na vizinhança): https://amagovpt.github.io/a11y/jornadas25/jf/grafico03.html
ANDI > focusable name, permite analisar os elementos focáveis. Atenção aos que não têm nome acessível.
ANDI > graphics/images, permite analisar as imagens e gráficos e inspecionar os respetivos nomes acessíveis.
O contraste do texto com a cor de fundo interfere na legibilidade da informação. Há um limiar mínimo que deve ser respeitado. Isto não significa abdicar do uso da gradação da cor para hierarquizar informação ou abdicar da "famosa" cor da insignia. A insignia pode ter a cor que quiser. As regras de acessibilidade até isentam os logótipos de respeitarem os contrastes.
2 observações:
Modelo para teste: https://amagovpt.github.io/a11y/jornadas25/jf/contraste.html .
ANDI > color contrast
Para testes manuais recomendamos o uso do validador Contrast Checker: https://contrastchecker.com .
2+1 observaçoes:
(1) Navegar pelos botões de controlo. Detetar se botões são focáveis e se o nome acessível disponível cumpre o propósito.
Um exemplo de um vídeo com legendagem (+transcrição), LGP. O Player é Youtube: https://www.youtube.com/watch?v=pm64gBg9ecU&list=PLh41dWEAcBMjV3oNFpLx-8p8Bg8PFHjxM&index=3&t=1270s
ANDI > focusable elements
(2) Investigue no Player a possibilidade de sincronizar legendas fechadas (+Transcrição).
(3) Avalie a necessidade do vídeo também ter Língua Gestual Portuguesa (LGP). Faça o mesmo para a audiodescrição.
Estilo e Estrutura são duas peças que devem funcionar o mais separadas possível.
5 observações:
<table> (tabelas-layout)Infelizmente no ANDI é difícil observar com algum rigor esta separação.
Recomendamos o uso da Barra de Ferramntas de Acessibilidade de Chris Pederick.
Para facilitar a leitura da linearização obtida acrescente:
Limitador de tamanhos das imagens SVG:
svg {
border:3px solid green;
max-width: 100px;
}
Limitador do tamanho das imagens img:
img {
border:3px solid red;
max-width: 100px;
}
Para verificar a ordem de leitura:
ANDI > focusable elements > tab order
Na atualidade o uso de janelas modais é crescente e são um dos elementos mais difíceis de interagir com tecnologias de apoio. Para utilizadores de leitores de ecrã são elementos que, não raras as vezes, os mesmos nem se apercebem da sua existência na interface.
4 observaçoes:
Ver modelo em (W3C). Modal Dialog Example. ARIA Authoring Practices Guide: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/#sc1_label
No link acima ativar o botão "Add Delivery Address" para ativar a caixa de diálogo que serve de exemplo.
Um aspeto crítico num documento passa por, no mínimo, aceder ao seu texto.
1 observação:
Entre no ficheiro PDF usando um leitor de PDF como Acrobat Reader, Pré-visualização (macOS), ... e faça um copy paste para o Notepad (Windows) ou Editor de Texto (macOS). Verifique se o texto que foi copiado corresponde ao que é visível no documento original em PDF.