Palestra sobre acessibilidade na Web ministrada no TcheLinux Caxias do Sul em 24/08/2011.

1. Acessibilidade Web
Márcio Bortolini dos Santos
Ricardo Moro

2. O que é acessibilidade?

3. Conceitos
● Desenho Universal.
● Acessibilidade Física.
● Acessibilidade Virtual.
● Remover barreiras e obstáculos.
● Desempenhar atividades do cotidiano.
● Uso de serviços, produtos e informação.
● Inclusão.

4. E na Web?

5. Acessibilidade Virtual
● "Páginas disponíveis e acessíveis a qualquer
hora, local, ambiente, dispositivo de acesso e
por qualquer tipo de usuário."
● Foco no desenvolvimento.
● Uso de técnicas e padrões.
● Decreto 5.296 de 02 de dezembro de 2004,
artigo 47.
● Torna obrigatória a acessibilidade nos portais
da administração pública.

6. Por que
acessibilizar?

7. Motivação
● 14,5% da população brasileira possui algum
tipo de deficiência.
● Facilidade de uso.
● É indexado mais facilmente por mecanismos de
busca.
● Atinge mais visitantes.
● Padronização.
● Cumprimento de medidas legais: Lei 10.048/00
e 10.098/00.

8. Mitos da acessibilidade

9. Mitos
● Acessibilidade Web é só para deficientes.
● O número de usuários beneficiados com a
acessibilidade é relativamente muito pequeno.
● Fazer um site acessível demora e custa caro.
● Um site acessível a deficientes visuais não é
bonito.
● Primeiro fazemos o site, depois fazemos
acessibilidade.
● A gente sabe o que é bom para o usuário.

10. Diretrizes e Padrões

11. Diretrizes e Padrões
● HTML e CSS:
● W3C
● Acessibilidade:
● WCAG 1.0
● WCAG Samurai
● WCAG 2.0
● e-MAG 2.0
● e-MAG 3.0

12. Validação

13. Validação
● Validação Manual:
● Checklists.
● Testes com PNEs.
● Validação Automática:
● Validadores Online:
– Hera.
– Examinator.
– DaSilva.
● Validadores Desktop (All-in-one):
– ASES.

14. Técnicas de Desenvolvimento

15. Separação das camadas
● Camada de estrutura – HTML
● Camada de apresentação – CSS
● Camada de comportamento – JavaScript

16. Tableless e Estrutura
● Não usar tabelas para layout.
● Dividir partes da página usando <div>.
● Preferencialmente colocar a div do conteúdo
principal antes da div do menu.
● Manter uma estrutura uniforme em todas as
páginas.

17. Usar âncoras adequadamente
● Âncoras são links internos.
● Servem para pular para posições específicas
dentro da mesma página.
Topo:
<a href="#inicioMenu">Início do Menu</a>
Início do Menu:
<a href="#inicioMenu" id="inicioMenu"
class="oculto">Inicio do Menu</a>

18. Mapa do Site
● Contém a estrutura hierárquica de todas as
páginas que compõem o site.
● Normalmente em formato de lista de links.
● Pode ser comparado a um sumário ou índice.
● Facilita o entendimento da estrutura do site.

19. Breadcrumb
● É usado para localizar o usuário dentro da
estrutura do site.
● Normalmente é colocado antes do conteúdo
principal.
Exemplo:
Você está em: Página Inicial > Notícias
● Oferece segurança na navegação e a opção de
retorno a níveis anteriores.

20. Imagens
● Toda imagem relevante ao conteúdo deve
receber uma descição textual.
● Imagens decorativas devem ser inseridas por
CSS.
<img src="imagem.jpg" alt="Uma imagem legal." />
● A descrição deve ser clara e simples referente
ao conteúdo da imagem.

21. Listas
● Listas são muito utilizadas por terem um bom
nível de acessibilidade.
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
● Não necessitam de descrição ou tags
adicionais.

22. Links
● Devem ter descição pequena e objetiva.
<a href="#" id="voltar">Voltar</a>
● É obrigatório o uso do atributo href para que o
link seja acionável.
● Links de menu normalmente são inseridos em
listas.
<ul id="menu">
<li><a href="/inicial">Página Inicial</a></li>
...
</ul>

23. Links
● Caso a descrição do link deva ser mais
completa, usar o atributo title.
<a href="#" title="Adicionar os produtos
selecionados ao seu carrinho de
compras">Adicionar ao carrinho</a>
● Evitar usar descrições como: "Clique aqui",
"Veja mais", etc.

24. Títulos
● Uma página é como um livro:
● h1 é o título do livro;
● h2 são os capítulos;
● h3 subcapítulos e assim por diante.
● Cada página deverá ter apenas um título de
nível 1.
● Os níveis 2 a 6 podem ser utilizados mais de
uma vez.
● Não é necessário usar todos os níveis em uma
página.

25. Arquivos para download
● Para documentos, utilizar preferencialmente o
formato PDF:
● Não bloquear o arquivo.
● Sugere-se informar o formato e tamanho do
arquivo na descrição do link.
<a href="manual.pdf">Manual do
desenvolvedor em PDF (Tamanho: 200KB)</a>

26. Tabelas
● Utilizar tabelas para dados tabulares! :-)
● O atributo summary deve ser utilizado para
resumir a tabela:
<table summary="Tabela contendo notas de
todos os alunos da disciplina de Biologia.">
...
</table>

27. Tabelas
● O elemento caption deve ser utilizado para o
título da tabela.
<table summary="Tabela contendo notas de
todos os alunos da disciplina de Biologia.">
<caption> Notas dos Alunos </caption>
</table>
● Para tabelas simples, utilizar o elemento th
para os cabeçalhos.
<tr>
<th> Aluno </th>
<th> Nota </th>
</tr>

28. Tabelas
● Para tabelas complexas deve-se utilizar os elementos:
thead, tbody e tfoot.
<thead>
<tr>
<th> Aluno </th>
<th> Nota </th>
</tr>
</thead>
<tbody>
<tr>
<td>Aluno 1</td>
<td> 9 </td>
</tr>
</tbody>

29. Formulários
● O primeiro passo é organizá-lo de forma
compreensível.
● Sempre usar a tag form, mesmo que o
formulário seja pequeno.
● Elementos input, select e textarea devem ser
associados a um label:
<label for="nome">Nome:</label>
<input type="text" id="nome"
name="primeiro_nome" />

30. Formulários
● Botões e demais elementos não precisam de
label.
● Todos formulários devem ter um botão para
submissão, mesmo que contenham somente
um select.
● Para um melhor entendimento do formulário é
possível agrupar campos afins com o elemento
fieldset.
● Ao se utilizar fieldset deve-se utilizar o
elemento legend para descrever esse grupo.

31. Formulários
<form action="/action" method="post">
<fieldset>
<legend> Dados Pessoais </legend>
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" />
<label for="sobrenome">Sobrenome:</label>
<input type="text" id="sobrenome" name="sbrnome" />
</fieldset>
<fieldset>
<legend> Contato </legend>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</fieldset>
<input type="submit" name="submit" value="Enviar" />
<form>

32. Formulários
● Para agrupar opções de um select usa-se o
elemento optgroup.
<label for="lista">Escolha um item:</label>
<select id="lista" name="lista">
<optgroup label="Laticínios">
<option>Leite desnatado</option>
<option>Requeijão</option>
</optgroup>
<optgroup label="Vegetais">
<option>Alface</option>
<option>Pimentão</option>
</optgroup>
</select>

33. Scripts e Objetos
● A página deve funcionar sem a necessidade de
scripts.
● Preferencialmente devem ser diretamente
acessíveis.
● Não devem depender de dispositivos de
entrada.
● Devem conter uma descrição caso não sejam
suportados.

34. Scripts e Objetos
<noscript>
Seu navegador não suporta JavaScript
ou ele está desabilitado. Algumas
funções poderão não estar disponíveis.
</noscript>
<object data="hello.swf">
Vídeo de saudações.
</object>

35. Flash
● Não é possível garantir a acessibilidade.
● Somente aplicações simples, como alguns
players.
● Sem animações.
● Muito esforço para acessibilizar.

36. Obrigado pela atenção!
Márcio Bortolini dos Santos
marcio.bortolini@bento.ifrs.edu.br
Ricardo Moro
ricardo.moro@bento.ifrs.edu.br