Acessibilidade Web

Márcio Bortolini dos SantosRicardo Moro

O que é acessibilidade?

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.

E na Web?

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.

Por queacessibilizar?

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.

Mitos da acessibilidade

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.

Diretrizes e Padrões

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

Validação

Validação● Validação Manual:

● Checklists.● Testes com PNEs.

● Validação Automática:● Validadores Online:

– Hera.– Examinator.– DaSilva.

● Validadores Desktop (All-in-one):– ASES.

Técnicas de Desenvolvimento

Separação das camadas

● Camada de estrutura – HTML

● Camada de apresentação – CSS

● Camada de comportamento – JavaScript

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.

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>

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.

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.

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.

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.

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>

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.

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.

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>

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>

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>

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>

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" />

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.

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>

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>

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.

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>

Flash● Não é possível garantir a acessibilidade.

● Somente aplicações simples, como alguns players.

● Sem animações.

● Muito esforço para acessibilizar.

Obrigado pela atenção!

Márcio Bortolini dos Santosmarcio.bortolini@bento.ifrs.edu.br

Ricardo Mororicardo.moro@bento.ifrs.edu.br