Aplicações Web Acessíveis
-
Upload
diego-pessoa -
Category
Technology
-
view
2.544 -
download
2
description
Transcript of Aplicações Web Acessíveis
![Page 1: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/1.jpg)
![Page 2: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/2.jpg)
Formado em Sistemas para Internet (IFPB)
Analista de Sistemas, Dynavideo• Projeto Intercâmbio para Conteúdo de TV Pública
Pesquisador, NAV - IFPB• Produção e acessibilização de aplicações
educacionais.
QUEM SOU?
![Page 3: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/3.jpg)
O que é acessibilidade?
Principais Falhas em aplicações Web
Padrões Web - WCAG 2.0
Desafio
Conclusões
ÍNDICE
![Page 4: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/4.jpg)
ACESSIBILIDADE
![Page 5: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/5.jpg)
Segundo o Aurélio, Acessibilidade (Lat. accessibilitate), s.f. qualidade de ser acessível; facilidade na aproximação, no trato ou na obtenção.
Acessível adj. a que se pode chegar facilmente; que fica ao alcance.
ACESSIBILIDADE
![Page 6: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/6.jpg)
“É garantir que seu trabalho esteja disponível e acessível via web a qualquer hora, local, ambiente, dispositivo de acesso e por qualquer tipo de visitante/usuário, independente de sua capacidade motora, visual, auditiva, mental, computacional, cultural ou social.”
ACESSIBILIDADE NA WEB
![Page 7: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/7.jpg)
“O poder da Web está em sua universalidade.”
ACESSIBILIDADE NA WEB?
(Tim Bernes-Lee – Criador da WEB)
![Page 8: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/8.jpg)
QUEM PRECISA?
Juca, sem visão Mandy, sem visão e braços
![Page 9: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/9.jpg)
QUEM PRECISA?
Jeff, dificuldades motoras
Bruno, paralisia cerebral
![Page 10: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/10.jpg)
QUEM PRECISA?
• Lucas, baixa visão • Anne, baixa visão e dificuldades motoras
![Page 11: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/11.jpg)
QUEM PRECISA?
Jack e Lara com dispositivos limitados
![Page 12: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/12.jpg)
QUEM PRECISA?
• Max, inseguro e compouca experiência
• Crianças, linguagem emdesenvolvimento
![Page 13: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/13.jpg)
QUEM PRECISA?
Pessoas com deficiências físicas ou motorasPessoas com dificuldades cognitivasPessoas idosasPessoas apressadasPessoas cansadasO Google (?)Resumindo: Todos
![Page 14: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/14.jpg)
QUEM PRECISA?
Google, bilionário cego!!!
![Page 15: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/15.jpg)
E POR QUE NÃO DEVEMOS EXCLUIR ESTAS PESSOAS?
![Page 16: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/16.jpg)
Desperdício de tempo
Desperdício de recursos humanos
Desperdício de dinheiro
Questões éticas
E POR QUE NÃO DEVEMOS EXCLUÍ-LAS?
![Page 17: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/17.jpg)
180 milhões de habitantes15 % da população brasileira tem algum tipo
de deficiência (25 milhões)20 milhões de pessoas com mais de 65 anosCerca de 7 milhões de pessoas com mais de 65
anos possui alguma deficiência
Fonte: http://www.ibge.gov.br/home/estatistica/populacao/trabalhoerendimento/pnad2007/brasil/tab1_1.pdf
BRASIL – SEGUNDO IBGE
![Page 18: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/18.jpg)
PRINCIPAIS FALHAS DOS DESENVOLVEDORES
![Page 19: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/19.jpg)
PRINCIPAIS FALHAS
1) Campos sem descrição
Ao receber o foco, a descrição do campo é apagada
Leitores de tela não irão conseguir ler a descrição do campo
![Page 20: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/20.jpg)
PRINCIPAIS FALHAS
2) Menus inacessíveis
Menus drop-down cujo os sub-ítens não são ativados via teclado
Usuários que não possuírem mouse nem irão saber da existência de sub-itens
Menus formados por imagem sem descrição:
Usuários de leitores de tela nunca descobrirão quais os itens do menu.
![Page 21: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/21.jpg)
PRINCIPAIS FALHAS
3) Elementos Antissemânticos
<div id=“titulo”>TITULO</div><p><strong>Lista de Itens: </strong><br />Item 1<br />Item 2 <br />Item 3 <br /></p>
<h1>TITULO</h1><h2>Lista de Itens:</h2><ul><li>Item 1</li><li>Item 2</li><li>Item 3 </li></ul>
- Dificulta leitura de tecnologias assistivas (Ex.: leitor de tela)
- Dificulta a leitura de tecnologias de busca
- Impossibilita diferenciação de elementos
![Page 22: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/22.jpg)
PRINCIPAIS FALHAS
3) Elementos Antissemânticos
<div id=“body”> <div id=“content”> <div id=“menu”> <div class=“item”> <a href=“#”>Item</a> </div> <div class=“item”> <a href=“#”>Item</a> </div> <div class=“item”> <a href=“#”>Item</a> </div></div></div></div>
<body> <div id=“content”> <ul id=“menu”> <li><a href=“#”>Item</a></li> <li><a href=“#”>Item</a></li> <li><a href=“#”>Item</a></li> <li><a href=“#”>Item</a></li> </ul> </div></body>
![Page 23: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/23.jpg)
PRINCIPAIS FALHAS4) Não se prevenir contra remoção acidental de dados
Soluções: Prover uma forma de recuperar dados removidos:
Guardar os dados por um tempo em local temporário antes de removê-lo definitivamente (Ex.: lixeira) ou Manter registro de todas ou das mais novas versões alteradas, ficando disponíveis para consulta e restauração a qualquer momento. Estilo wiki e aplicações de controle de código.
O sistema deletou meus arquivos!
O sistema deletou meus arquivos!
![Page 24: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/24.jpg)
PRINCIPAIS FALHAS
5) Janelas pop-up
Abre uma nova janela do browser inesperadamente (procure fazer seu site de forma que ele seja previsível)
Deixará pessoas que não podem enxergar completamente perdidas (abriu uma nova página? Como eu volto?)
![Page 25: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/25.jpg)
PRINCIPAIS FALHAS
6) Texto sem contraste com o plano de fundo
![Page 26: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/26.jpg)
PRINCIPAIS FALHAS
7) Sons que iniciam automaticamente ou que não podem ser parados
Nem todo mundo que entra no seu site deseja ouvir aquele som, por mais bonito que ele seja;Sons que iniciam automaticamente podem dar sustos no usuário, que normalmente, nem imaginam que um som irá iniciar e podem estar com a caixa de som ligada em volume alto acessando no meio da madrugada;Regra básica: O usuário deve mandar na aplicação, não a aplicação mandar no usuário.
![Page 27: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/27.jpg)
PRINCIPAIS FALHAS
8) Notícias rolantes rápidas, sem pausa, não dando tempo do usuário ler.
Alguem para esse negócio?!Não consigo ler!
Alguem para esse negócio?!Não consigo ler!
![Page 28: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/28.jpg)
PRINCIPAIS FALHAS
9) Sessão com período curto de duração
Criar mecanismo de recuperação ao re-autenticar (Garantir que nenhuma informação será perdida)
Disponibilizar um tempo considerável antes de expirar (Imagine aquele cadastro de 200 campos e quando você clica em “enviar” se depara com:
![Page 29: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/29.jpg)
PRINCIPAIS FALHAS
10) Fontes pequenas demais
Dificulta a leitura
Impossibilita acesso para pessoascom baixa visão
Ou até mesmo de pessoas comsimples miopia, hipermetropia ou astigmatismo
Solução: Use fontes em tamanhos de médios (12px) pra cima e utilize barra com opções para aumentar ou diminuir fonte
![Page 30: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/30.jpg)
PRINCIPAIS FALHAS
11) Captcha
Captchas são imagens que não podem possuir descrição, do contrário, não teriam sentido.
Com isso, ficam inacessíveis a quem não possuir uma visão apurada
Solução: Ofereça outras alternativas ao usuário. Exemplo: Captcha em áudio.
![Page 31: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/31.jpg)
PRINCIPAIS FALHAS
12) Uso errado das cores ou posicionamento de botões ou campos
Cores ajudam a identificar elementos (verde positivo, vermelho negativo)
Como a navegação é da esquerda para a direita, deve-se colocar à esquerda os elementos de confirmação e à direita os de cancelamento.
![Page 32: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/32.jpg)
PRINCIPAIS FALHAS
13) Obstáculos ao conteúdo
Para chegar ao conteúdo principal utilizando só o teclado, o usuário precisa passar por todo menu e barras de ferramentas, o que demanda um enorme tempo “tabeando” até chegar à informação principal.
Solução: simples, coloque um botão “ir para o conteúdo” no topo da página, recebendo o primeiro foco de todos.
![Page 33: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/33.jpg)
PRINCIPAIS FALHAS
14) Formulários ineficientes
Formulários sem validação, pouco intuitivos, com rótulos indescritíveis, sem exemplos de preenchimento, sem seguir uma ordem de tabulação linear. Formulários que apagam outros elementos ou executam ações inesperadas sem conhecimento ou autorização do usuário. Formulários que não salvam os dados em cache caso o usuário saia da página e volte. Solução: Pense no usuário! Facilite a vida dele, não a sua.
![Page 34: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/34.jpg)
PRINCIPAIS FALHAS
15) Sites totalmente em Flash
Totalmente inacessível para usuários de leitores de tela.
Evite sites totalmente em Flash! Utilize flash para animações, filmes (flv), etc, sempre em conjunto de uma descrição do objeto em formato textual.
![Page 35: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/35.jpg)
Acessibilidade: Custo ou
benefício?
![Page 36: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/36.jpg)
WCAG 2.0
![Page 37: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/37.jpg)
WCAG 2.0
Diretrizes de Acessibilidade para o Conteúdo da Web 2.0
Definem a forma de como tornar o conteúdo da Web mais acessível a pessoas deficientes.
Envolve uma vasta gama de deficiências: visuais, auditivas, físicas, de fala, cognitivas, de linguagem, de aprendizagem e neurológicas.
![Page 38: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/38.jpg)
Estas diretrizes também facilitam a utilização do conteúdo da Web por pessoas mais velhas, cujas capacidades estão em constante mudança.
Facilitam a utilização para os usuários em geral.
ATENÇÃO:Não é possível para abordar completamente as necessidades de pessoas com todos os tipos, graus e combinações de deficiências.
WCAG 2.0
![Page 39: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/39.jpg)
No topo, quatro princípios constituem a acessibilidade na web:
Perceptível, operável, compreensívelrobusto.
WCAG 2.0
![Page 40: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/40.jpg)
Perceptível: Informação e componentes da interface do usuário devem ser apresentados aos usuários de um jeito que eles possam entender.
Operável: Componentes da interface do usuário e navegação devem ser operáveis.
Compreensível: Informação e operações da interface do usuário devem ser compreensíveis.
Robusto: Conteúdo deve ser robusto suficiente para que possa ser interpretado por uma larga faixa de agentes do usuário, incluindo tecnologias assistivas.
WCAG 2.0 - PRINCÍPIOS
![Page 41: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/41.jpg)
Logo abaixo dos princípios encontram-se as diretrizes.
As 12 diretrizes apresentam regras básicas para tornar o conteúdo mais acessível aos usuários com diferentes deficiências.
WCAG 2.0 - DIRETRIZES
![Page 42: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/42.jpg)
1.PERCEPTÍVEL “Informação e componentes da interface do usuário devem ser apresentados aos usuários de forma que eles possam entender.”
WCAG 2.0 - DIRETRIZES
![Page 43: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/43.jpg)
1.1 Prover alternativas textuais para qualquer conteúdo não-textual Todo o conteúdo não-textual que é apresentado ao usuário deve possuir uma alternativa textual que mostra o propósito equivalente.
Exceto para:- Controles e Entradas de dados (deve possuir um nome que descreve seu propósito)- Mídia Baseada em Tempo (fornecer identificação descritiva)- Exercício / Teste (prover identificação descritiva)- Decoração / Formatação (ser ignorada pela tecnologia assistiva)
WCAG 2.0 - DIRETRIZES
![Page 44: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/44.jpg)
1.2 Fornecer alternativas para multimídia baseada no tempo.
Versão em texto descrevendo mídia
Legendas
Descrição em áudio estendida
Linguagens de sinais
WCAG 2.0 - DIRETRIZES
![Page 45: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/45.jpg)
1.3 Adaptável: Criar conteúdos que possam ser apresentados de diferentes maneiras, sem perder informação ou estrutura.Todas as informações disponíveis também somente em texto;
Conteúdo não se confia unicamente na característica dos componentes tais como forma, tamanho, localização visual ou som. Exemplo: Clique no botão vermelho à direita
WCAG 2.0 - DIRETRIZES
![Page 46: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/46.jpg)
1.4 Facilitar a audição e a visualização de conteúdos aos usuários, incluindo a separação do primeiro plano e do plano de fundo. Controle de Áudio: Não tocar sons automaticamente, permitir controle do áudio (pausar, parar) e ajuste de volume. O texto deve possuir contraste de pelo menos 4.5:1 com o plano de fundo, exceto quando são: textos largos (3:1), campos inativos ou logotipos. (Use ferramentas medidoras de contraste) Oferecer opção para aumentar o texto em pelo menos 200% de jeito que não proporcione rolamento horizontal para ler uma linha do texto ocupando tela inteira.
WCAG 2.0 - DIRETRIZES
![Page 47: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/47.jpg)
OPERÁVEL “Componentes da interface do usuário e navegação devem ser operáveis.”
WCAG 2.0 - DIRETRIZES
![Page 48: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/48.jpg)
2.1 Fazer com que toda a funcionalidade fique disponível a partir do teclado.
Toda funcionalidade do conteúdo deve ser operável através do teclado, teclado sem requisitos específicos de tempo para teclas individuais.
Nota: Isto não proíbe e não deve desencorajar o uso do mouse ou outros métodos de entrada na adição da operação por teclado.
WCAG 2.0 - DIRETRIZES
![Page 49: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/49.jpg)
2.2 Fornecer tempo suficiente aos utilizadores para lerem e utilizarem o conteúdo. Permitir ajuste de tempo (desligar, ajustar, estender) Exceções: Um evento onde o limite de tempo é essencial e estendê-lo fará com que a atividade seja invalida.
Cronômetro: Cronômetro não deve ser parte essencial de um evento, exceto para mídia sincronizada ou eventos em tempo real.
Interrupções: Interrupções podem ser adiadas ou suprimidas pelo usuário, exceto interrupções envolvendo uma emergência.
WCAG 2.0 - DIRETRIZES
![Page 50: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/50.jpg)
2.3 Não criar conteúdo de uma forma conhecida por causar ataques epilépticos
Páginas web não devem conter qualquer flash(piscada) maior do que três vezes.
WCAG 2.0 - DIRETRIZES
![Page 51: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/51.jpg)
2.4 Fornecer formas de ajudar os usuário a navegar, localizar conteúdos e determinar o local em que se encontram. Driblar obstáculos (opção para saltar direto para conteúdo)
Colocar títulos nas páginas (diferentes em cada uma)
Prover uma navegação sequencial
Deixar clara a finalidade de um link no próprio ou em texto próximo
WCAG 2.0 - DIRETRIZES
![Page 52: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/52.jpg)
2.4 Fornecer formas de ajudar os usuário a navegar, localizar conteúdos e determinar o local em que se encontram. Utilizar mais de uma maneira para localizar uma seção ou página dentro de um conjunto
Manter o foco do teclado visível, facilitando a localização
Dar informações sobre a localização do usuário (Barra de navegação)
Utilizar cabeçalhos (h1, h2, etc) para melhor organizar conteúdo
WCAG 2.0 - DIRETRIZES
![Page 53: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/53.jpg)
COMPREENSÍVEL “Informação e operações da interface do usuário devem ser compreensíveis”
WCAG 2.0 - DIRETRIZES
![Page 54: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/54.jpg)
3.1 Tornar o conteúdo de texto legível e compreensível. Identificar definições específicas de palavras ou frases restritas ou vulgares, incluindo idiomas e jargões.
Disponibilizar um mecanismo que Identifique o significado de abreviações
Identificar a pronúncia específica de palavras onde o significado das palavras, no texto, é ambíguo sem o conhecimento de sua pronúncia
WCAG 2.0 - DIRETRIZES
![Page 55: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/55.jpg)
3.2 Fazer com que as páginas Web surjam e funcionem de forma previsívelNão iniciar nenhuma ação ou processo apenas ao receber foco
Uma alteração em algum componente não deve causar alterações no contexto, exceto que o usuário seja avisado. Exemplo: Um formulário não deve acionar uma ação inesperada, por exemplo, ao ativar ou selecionar outro campo.
WCAG 2.0 - DIRETRIZES
![Page 56: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/56.jpg)
3.3 Ajudar os usuários a evitar e corrigir erros.Identificar os erros de forma clara na tela
Disponibilizar rótulos (labels) e instruções nas entradas do usuário
Sugestões de erro (Informar causas daquele possível erro)
WCAG 2.0 - DIRETRIZES
![Page 57: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/57.jpg)
3.3 Ajudar os usuários a evitar e corrigir erros.
Prevenção de erro:Reversão: Submissões são reversíveis;
Controle: Antes do envio, há uma oportunidade para os usuários confirmarem a ação;Exemplo: Tem certeza que deseja remover?
Confirmação: Um mecanismo é disponível para revisão, confirmação e correção de informações antes de finalizar o evento.
Disponibilizar uma seção de “ajuda”
WCAG 2.0 - DIRETRIZES
![Page 58: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/58.jpg)
ROBUSTO “Conteúdo deve ser robusto suficiente para que possa ser interpretado por uma larga faixa de agentes do usuário, incluindo tecnologias assistivas.”
WCAG 2.0 - DIRETRIZES
![Page 59: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/59.jpg)
“Tecnologia Assistiva (ou de apoio) é
um software ou hardware projetado
para apoiar pessoas com deficiência
em atividades do cotidiano.” (W3C, 1999)www.w3.org
WCAG 2.0 - DIRETRIZES
![Page 60: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/60.jpg)
Switch Mouse Teclado virtual do Windows
Ponteira de cabeça
Acesso ao computador via voz
Sistema Operacional DOSVOX
Lente de Aumento do Windows
![Page 61: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/61.jpg)
Leitores de Tela:Virtual Vision
http://www.micropower.com.br/ Jaws for Windows
http://www.freedomscientific.com/ Windows Bridge
http://www.synthavoice.on.ca/ DOS VOX
http://caec.nce.ufrj.br/~dosvox/index.html
WCAG 2.0 - DIRETRIZES
![Page 62: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/62.jpg)
4.1 Maximizar a compatibilidade com atuais e futuros agentes de usuários, incluindo tecnologias de apoio.
No conteúdo implementado usando linguagens de marcação:
Elementos devem completar o início e fim das tags;
Elementos devem estar alinhados de acordo com sua especificação;
Elementos não contêm atributos duplicados e quaisquer IDs são únicos
WCAG 2.0 - DIRETRIZES
![Page 63: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/63.jpg)
AVALIADORES AUTOMÁTICOS
Há avaliadores automáticos que se baseiam em padrões:
http://www.ocawa.com/pt/Acessibilidade.htmhttp://www.acessibilidade.net/web/http://www.sidar.org/hera/index.php.pthttp://validator.w3.orghttp://www.acesso.umic.pt/http://www.dasilva.org.br/
![Page 64: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/64.jpg)
Construa sites centrados nos usuários
Use as recomendações, mas não apenas elas
Use avaliadores automáticos, mas não apenas eles
Estude os diversos métodos e descubra qual é o mais apropriado para o caso1 – Avaliação das necessidades2 – Testes de utilização3 – Feedback do usuário
CONCLUSÕES
![Page 65: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/65.jpg)
INTERATIVIDADE
Desafios:1- Você seria capaz de navegar num site com as imagens desabilitadas?
2- Você seria capaz de navegar apenas usando o teclado?
3- Você seria capaz de acessar um site com o monitor desligado, através do leitor de tela?
![Page 66: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/66.jpg)
REFERÊNCIAShttp://www.w3.org/TR/WCAG20/
http://www.w3.org/TR/WCAG20-TECHS/
Http://acessodigital.net
MELO, L (2009) - Usabilidade e acessibilidade - novas orientações no uso da tecnologia (NAV / IFPB)
![Page 67: Aplicações Web Acessíveis](https://reader035.fdocumentos.com/reader035/viewer/2022062303/555b3062d8b42afc348b4b75/html5/thumbnails/67.jpg)
REFERÊNCIAShttp://www.w3.org/TR/WCAG20/
http://www.w3.org/TR/WCAG20-TECHS/
http://acessodigital.net
MELO, L (2009) - Usabilidade e acessibilidade - novas orientações no uso da tecnologia (NAV / IFPB)