Aplicações Web Acessíveis

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?

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

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

“ É 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

“ O poder da Web está em sua universalidade.” ACESSIBILIDADE NA WEB? (Tim Bernes-Lee – Criador da WEB) ‏

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

QUEM PRECISA? Jeff, dificuldades motoras Bruno, paralisia cerebral

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

QUEM PRECISA? Jack e Lara com dispositivos limitados

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

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

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

E POR QUE NÃO DEVEMOS EXCLUIR ESTAS PESSOAS?

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

180 milhões de habitantes 15 % da população brasileira tem algum tipo de deficiência (25 milhões) ‏ 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: http://www.ibge.gov.br/home/estatistica/populacao/trabalhoerendimento/pnad2007/brasil/tab1_1.pdf BRASIL – SEGUNDO IBGE

PRINCIPAIS FALHAS DOS DESENVOLVEDORES

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

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.

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

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>

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!

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?) ‏

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

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.

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!

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:

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

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.

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.

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.

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.

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.

Acessibilidade: Custo ou benefício?

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.

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

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

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

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

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

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

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

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

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

OPERÁVEL “ Componentes da interface do usuário e navegação devem ser operáveis.” WCAG 2.0 - 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. WCAG 2.0 - 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. WCAG 2.0 - 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. WCAG 2.0 - 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 WCAG 2.0 - 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 WCAG 2.0 - DIRETRIZES

COMPREENSÍVEL “ Informação e operações da interface do usuário devem ser compreensíveis” WCAG 2.0 - 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 WCAG 2.0 - 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. WCAG 2.0 - 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) WCAG 2.0 - 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” WCAG 2.0 - 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.” WCAG 2.0 - DIRETRIZES

“ 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

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

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

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

AVALIADORES AUTOMÁTICOS Há avaliadores automáticos que se baseiam em padrões: http://www.ocawa.com/pt/Acessibilidade.htm http://www.acessibilidade.net/web/ http://www.sidar.org/hera/index.php.pt http://validator.w3.org http://www.acesso.umic.pt/ http://www.dasilva.org.br/

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 CONCLUSÕES

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?

REFERÊNCIAS http://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)

REFERÊNCIAS http://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)

MUITO OBRIGADO! Contato: [email_address] http://diegopessoa.com

Aplicações Web Acessíveis

Mais conteúdo relacionado

Mais procurados (11)

Semelhante a Aplicações Web Acessíveis (20)

Último (12)

Aplicações Web Acessíveis