Your SlideShare is downloading. ×
Acessibilidade web  - TcheLinux Caxias do Sul
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Acessibilidade web - TcheLinux Caxias do Sul

515
views

Published on

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

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

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
515
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 Santosmarcio.bortolini@bento.ifrs.edu.br Ricardo Moro ricardo.moro@bento.ifrs.edu.br