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

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.

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 compouca experiência

• Crianças, linguagem emdesenvolvimento

QUEM PRECISA?

Pessoas com deficiências físicas ou motorasPessoas com dificuldades cognitivasPessoas idosasPessoas apressadasPessoas cansadasO 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 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

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

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!

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

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

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ívelrobusto.

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


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)


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


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


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.


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


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.


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.


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.


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


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


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


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


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.


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)


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”


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


“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


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


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


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/

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

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Ê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)

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)

MUITO OBRIGADO!

Contato:[email protected]://diegopessoa.com

Aplicações Web Acessíveis

Technology

Transcript of Aplicações Web Acessíveis