Acessibilidade web - TcheLinux Caxias do Sul
-
Upload
marcio-bortolini-dos-santos -
Category
Technology
-
view
532 -
download
0
description
Transcript of Acessibilidade web - TcheLinux Caxias do Sul
![Page 1: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/1.jpg)
Acessibilidade Web
Márcio Bortolini dos SantosRicardo Moro
![Page 2: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/2.jpg)
O que é acessibilidade?
![Page 3: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/3.jpg)
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.
![Page 4: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/4.jpg)
E na Web?
![Page 5: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/5.jpg)
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.
![Page 6: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/6.jpg)
Por queacessibilizar?
![Page 7: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/7.jpg)
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.
![Page 8: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/8.jpg)
Mitos da acessibilidade
![Page 9: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/9.jpg)
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.
![Page 10: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/10.jpg)
Diretrizes e Padrões
![Page 11: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/11.jpg)
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
![Page 12: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/12.jpg)
Validação
![Page 13: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/13.jpg)
Validação● Validação Manual:
● Checklists.● Testes com PNEs.
● Validação Automática:● Validadores Online:
– Hera.– Examinator.– DaSilva.
● Validadores Desktop (All-in-one):– ASES.
![Page 14: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/14.jpg)
Técnicas de Desenvolvimento
![Page 15: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/15.jpg)
Separação das camadas
● Camada de estrutura – HTML
● Camada de apresentação – CSS
● Camada de comportamento – JavaScript
![Page 16: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/16.jpg)
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.
![Page 17: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/17.jpg)
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>
![Page 18: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/18.jpg)
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.
![Page 19: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/19.jpg)
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.
![Page 20: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/20.jpg)
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.
![Page 21: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/21.jpg)
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.
![Page 22: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/22.jpg)
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>
![Page 23: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/23.jpg)
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.
![Page 24: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/24.jpg)
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.
![Page 25: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/25.jpg)
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>
![Page 26: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/26.jpg)
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>
![Page 27: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/27.jpg)
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>
![Page 28: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/28.jpg)
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>
![Page 29: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/29.jpg)
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" />
![Page 30: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/30.jpg)
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.
![Page 31: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/31.jpg)
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>
![Page 32: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/32.jpg)
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>
![Page 33: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/33.jpg)
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.
![Page 34: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/34.jpg)
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>
![Page 35: Acessibilidade web - TcheLinux Caxias do Sul](https://reader030.fdocument.pub/reader030/viewer/2022020122/556c09a4d8b42a852a8b467d/html5/thumbnails/35.jpg)
Flash● Não é possível garantir a acessibilidade.
● Somente aplicações simples, como alguns players.
● Sem animações.
● Muito esforço para acessibilizar.