QUEM SOU? ( IFPB ) Formado em Sistemas para Internet. Analista de Sistemas, Dynavideo. Pesquisador, NAV - IFPB

Transcrição

1

2 QUEM SOU? ( IFPB ) Formado em Sistemas para Internet 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.

3 ÍNDICE O que é acessibilidade? Principais Falhas em aplicações Web Padrões Web - WCAG 2.0 Desafio Conclusões

4 ACESSIBILIDADE

5 ACESSIBILIDADE 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.

6 ACESSIBILIDADE NA WEB É 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.

7 ACESSIBILIDADE NA WEB? O poder da Web está em sua universalidade. ( WEB (Tim Bernes-Lee Criador da

8 QUEM PRECISA? Juca, sem visão Mandy, sem visão e braços

9 QUEM PRECISA? Jeff, dificuldades motoras Bruno, paralisia cerebral

10 QUEM PRECISA? Lucas, baixa visão Anne, baixa visão e dificuldades motoras

11 QUEM PRECISA? Jack e Lara com dispositivos limitados

12 QUEM PRECISA? Max, inseguro e com pouca experiência Crianças, linguagem em desenvolvimento

13 QUEM PRECISA? Pessoas com deficiências físicas ou motoras Pessoas com dificuldades cognitivas Pessoas idosas Pessoas apressadas Pessoas cansadas (?) O Google Resumindo: Todos

14 QUEM PRECISA? Google, bilionário cego!!!

15 E POR QUE NÃO DEVEMOS EXCLUIR ESTAS PESSOAS?

16 E POR QUE NÃO DEVEMOS EXCLUÍ-LAS? Desperdício de tempo Desperdício de recursos humanos Desperdício de dinheiro Questões éticas

17 BRASIL SEGUNDO IBGE 180 milhões de habitantes 15 % da população brasileira tem algum tipo ( milhões de deficiência (25 20 milhões de pessoas com mais de 65 anos Cerca de 7 milhões de pessoas com mais de 65 anos possui alguma deficiência Fonte: erendimento/pnad2007/brasil/tab1_1.pdf

18 PRINCIPAIS FALHAS DOS DESENVOLVEDORES

19 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

20 PRINCIPAIS FALHAS 2) Menus inacessíveis Menus formados por imagem sem descrição: Usuários de leitores de tela nunca descobrirão quais os itens do menu. 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

21 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> ( tela - Dificulta leitura de tecnologias assistivas (Ex.: leitor de - Dificulta a leitura de tecnologias de busca - Impossibilita diferenciação de elementos

22 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>

23 PRINCIPAIS FALHAS 4) 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!

24 PRINCIPAIS FALHAS 5) Janelas pop-up Abre uma nova janela do browser inesperadamente (procure fazer ( previsível seu site de forma que ele seja Deixará pessoas que não podem enxergar completamente perdidas (? volto (abriu uma nova página? Como eu

25 PRINCIPAIS FALHAS 6) Texto sem contraste com o plano de fundo

26 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.

27 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!

28 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:

29 PRINCIPAIS FALHAS 10) Fontes pequenas demais Dificulta a leitura Impossibilita acesso para pessoas com baixa visão Ou até mesmo de pessoas com simples 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

30 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.

31 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.

32 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.

33 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.

34 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.

35 Acessibilidade: Custo ou benefício?

36 WCAG 2.0

37 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.

38 WCAG 2.0 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.

39 WCAG 2.0 No topo, quatro princípios constituem a acessibilidade na web: Perceptível, operável, compreensível robusto.

40 WCAG PRINCÍPIOS 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.

41 WCAG DIRETRIZES 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.

42 WCAG DIRETRIZES 1.PERCEPTÍVEL Informação e componentes da interface do usuário devem ser apresentados aos usuários de forma que eles possam entender.

43 WCAG DIRETRIZES 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 ( descritiva - Mídia Baseada em Tempo (fornecer identificação ( descritiva - Exercício / Teste (prover identificação ( assistiva - Decoração / Formatação (ser ignorada pela tecnologia

44 WCAG DIRETRIZES 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

45 WCAG DIRETRIZES 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

46 WCAG DIRETRIZES 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.

47 WCAG DIRETRIZES OPERÁVEL Componentes da interface do usuário e navegação devem ser operáveis.

48 WCAG DIRETRIZES 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.

49 WCAG DIRETRIZES 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.

50 WCAG DIRETRIZES 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.

51 WCAG DIRETRIZES 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

52 WCAG DIRETRIZES 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

53 WCAG DIRETRIZES COMPREENSÍVEL Informação e operações da interface do usuário devem ser compreensíveis

54 WCAG DIRETRIZES 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

55 WCAG DIRETRIZES 3.2 Fazer com que as páginas Web surjam e funcionem de forma previsível Nã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.

56 WCAG DIRETRIZES 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)

57 WCAG DIRETRIZES 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

58 WCAG DIRETRIZES ROBUSTO Conteúdo deve ser robusto suficiente para que possa ser interpretado por uma larga faixa de agentes do usuário, incluindo tecnologias assistivas.

59 WCAG DIRETRIZES Tecnologia Assistiva (ou de apoio) é um software ou hardware projetado para apoiar pessoas com deficiência em atividades do cotidiano. (W3C, 1999)

60 Switch Mouse Teclado virtual do Windows Acesso ao computador via voz Ponteira de cabeça Lente de Aumento do Windows Sistema Operacional DOSVOX

61 WCAG DIRETRIZES Leitores de Tela: Virtual Vision Jaws for Windows Windows Bridge DOS VOX

62 WCAG DIRETRIZES 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

63 AVALIADORES AUTOMÁTICOS Há avaliadores automáticos que se baseiam em padrões:

64 CONCLUSÕES 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 caso 1 Avaliação das necessidades 2 Testes de utilização 3 Feedback do usuário

65 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?

66 REFERÊNCIAS TECHS/ MELO, L (2009) - Usabilidade e acessibilidade - novas orientações no uso da tecnologia (NAV / IFPB)

67 REFERÊNCIAS TECHS/ MELO, L (2009) - Usabilidade e acessibilidade - novas orientações no uso da tecnologia (NAV / IFPB)

68 MUITO OBRIGADO! Contato: