No presente guia selecionámos 10 aspetos que se revelaram críticos em verificações efetuadas no passado. Eles são o reflexo dos aspetos mencionados pelos utilizadores com limitações funcionais de maior importância no acesso a uma página Web. Estes 10 aspetos críticos também podem ser vistos como um ponto de partida para a construção de um sítio Web percetível, operável, compreensível e robusto - princípios detalhadamente explicitados nas WCAG 2.0 da WAI do W3C.

O presente documento fundamenta-se, nomeadamente no documento Easy Checks - A First Review of Web Accessibility

1. Menu de navegação principal

O menu de navegação principal é como a porta de entrada de uma casa. Para entrar dentro de casa é preciso alcançar a porta e passar a porta. Se não o conseguirmos fazer, será impossível usufruir da casa. Num sítio Web, podemos muito bem usar a porta como metáfora para representar o menu principal. Se o utilizador não encontrar o menu principal ou não conseguir navegar pelas suas opções e subopções então nunca irá conseguir usufruir da informação ou dos serviços disponíveis nesse sítio.

Numa página Web, um menu é, em termos estruturais, uma lista de opções. Quando o número de elementos a disponibilizar é grande, por questões de facilidade de leitura e maquetização espacial, organizam-se esses mesmos elementos em opções e subopões. Através do sentido da visão, a perceção desta organização é, quase sempre, simples, lógica e evidente - os designers gráficos são, em 99% dos casos, muito bons a transmitir a organização de um menu a quem faz uso da visão. A dificuldade surge quando o menu tem de ser percecionado por outra via que não através da imagem - por exemplo, como representar um menu no caso de uma pessoa cega?

Quase sempre, em acessibilidade Web, a resposta a esta e outras perguntas de representar algo de uma outra forma, para ir ao encontro das capacidades de um utilizador com determinadas limitações funcionais, é dada pela conjugação de duas tecnologias: as tecnologias de acesso e as tecnologias de marcação do conteúdo digital. Por exemplo, no caso de uma pessoa cega, quando nos referimos a tecnologias de acesso estamos a falar do navegador Web e do leitor de ecrã.

Lista de verificação para menus de navegação
verifique se: sim não n.a
a) o menu de navegação está marcado como uma lista do tipo <ul>?
b) é possível navegar com rato e com teclado?
c) as imagens-link, caso existam no menu, estão corretamente legendadas?

2. Títulos e subtítulos

Lista de verificação para títulos e subtítulos
verifique se: sim não n.a
a) existe um título <h1> marcado na página?
b) existe uma marcação hierarquizada de títulos e subtítulos na página (<h1>...<h6>)?

3. Tabelas de dados

Lista de verificação para tabela de dados
verifique se: sim não n.a
a) as células que constituem os cabeçalhos da tabela estão marcadas com o elemento <th>?
b) o título da tabela está marcado com o elemento <caption>?

4. Formulários

Lista de verificação para formulários
verifique se: sim não n.a
a) ao clicar com o rato na etiqueta, o cursor aparece no campo de edição?
b) é possível identificar os campos de preenchimento obrigatório quando usa apenas um leitor de ecrã?
c) é possível ler facilmente as mensagens de erro usando apenas um leitor de ecrã?

5. Gráficos e imagens-hiperligação

     
Lista de verificação para gráficos e imagens-hiperligação
verifique se: sim não n.a
a) as imagens ou os gráficos dispõem de um texto alternativo curto (i.e. atributo alt)?
b) os gráficos dispõem de uma descrição longa (p.e. a tabela de dados que deu origem ao gráfico)?
c) as imagens-hiperligação dispõem de um texto alternativo capaz de cumprir a função de texto da hiperligação?

6. Contraste

Lista de verificação de contrastes
verifique se: sim não n.a
a) para texto com tamanho normal, o rácio de contraste entre a cor do texto e a cor de fundo é superior a 4,5:1?
b) para texto com tamanho grande, o rácio de contraste entre a cor do texto e a cor de fundo é superior a 3:1?

7. Leitores de vídeo ou áudio

Lista de verificação para leitores de vídeo ou áudio
verifique se: sim não n.a
a) é possível navegar com rato e com teclado através dos botões de controlo do leitor (player)?
b) o vídeo ou o áudio têm legendas sincronizadas e/ou está disponível uma transcrição textual?

8. Estrutura da página

Lista de verificação para estrutura da página
verifique se: sim não n.a
quando se retira a CSS, todos os elementos (x)HTML alinham à esquerda?
a) quando se retira a CSS, a informação aparece numa ordem lógica?
b) quando se retira a CSS, é possível reconhecer a semântica dos diversos elementos?
c) quando se retira a CSS, a informação relevante permanece visível?
d) a maquetização da página não é feita através do elemento <table>?

9. Gramática (x)HTML

Lista de verificação à sintaxe de (x)HTML
verifique se: sim não n.a
a) a página não tem erros de (x)HTML?

10. Ficheiros PDF - Portable Document Format

Lista de verificação para ficheiros PDF
verifique se: sim não n.a
a) sando a aplicação Adobe Reader, é possível efetuar uma cópia do documento PDF e passar o respetivo conteúdo para um processador de texto sem perda de informação?

Lista de verificação
(10 aspetos críticos a ter em conta)

10 aspetos críticos - Lista de verificação
Para menus de navegação verifique se: sim não n.a
o menu de navegação está marcado como uma lista do tipo <ul>?
é possível navegar com rato e com teclado?
as imagens-link, caso existam no menu, estão corretamente legendadas?
Para títulos e subtítulos verifique se: sim não n.a
existe um título <h1> marcado na página?
existe uma marcação hierarquizada de títulos e subtítulos na página (<h1>...<h6>)?
Para tabela de dados verifique se: sim não n.a
as células que constituem os cabeçalhos da tabela estão marcadas com o elemento <th>?
o título da tabela está marcado com o elemento <caption>?
Para formulários verifique se: sim não n.a
ao clicar com o rato na etiqueta, o cursor aparece no campo de edição?
é possível identificar os campos de preenchimento obrigatório quando usa apenas um leitor de ecrã?
é possível ler facilmente as mensagens de erro usando apenas um leitor de ecrã?
Para gráficos e imagens-link verifique se: sim não n.a
a imagem ou gráfico tem uma legenda curta (i.e. atributo alt)?
o gráfico é acompanhado de uma descrição longa (p.e. tabela de dados que deu origem ao gráfico)?
as imagens-link estão corretamente legendadas?
Para contrastes verifique se: sim não n.a
para texto com tamanho normal, o rácio de contraste entre a cor do texto e a cor de fundo é superior a 4,5:1?
para texto com tamanho grande, o rácio de contraste entre a cor do texto e a cor de fundo é superior a 3:1?
Para leitores de vídeo ou áudio verifique se: sim não n.a
é possível navegar com rato e com teclado através dos botões de controlo do leitor (player)?
o vídeo ou o áudio têm legendas sincronizadas e/ou está disponível uma transcrição textual?
Para estrutura da página verifique se: sim não n.a
quando se retira a CSS, todos os elementos (x)HTML alinham à esquerda?
quando se retira a CSS, a informação aparece numa ordem lógica?
quando se retira a CSS, é possível reconhecer a semântica dos diversos elementos?
quando se retira a CSS, a informação relevante permanece visível?
a maquetização da página não é feita através do elemento <table>?
Para sintaxe de (x)HTML verifique se: sim não n.a
a página não tem erros de (x)HTML?
Para ficheiros PDF verifique se: sim não n.a
usando a aplicação Adobe Reader, é possível efetuar uma cópia do documento PDF e passar o respetivo conteúdo para um processador de texto sem perda de informação?