acessibilidade web

Acessibilidade na Web é para todos

UFSCAR - SOROCABA

Fabíola C. Matsumoto

Fabiana Bonilha

Agenda

• Desenho Universal

• O que é acessibilidade?

• Acessibilidade na WEB

• Legislação

• Alguns números

• Diretrizes de acessibilidade nacionais e internacionais

• Ferramentas de Apoio

• Problemas e Soluções

O que é acessibilidade na WEB?

É garantir que uma informação ou serviço

esteja disponível na web, em igualdade de

condições, independentemente da função

motora, visual, auditiva ou intelectual, e da

condição computacional, cultural ou social do

usuário.

Acessibilidade e Usabilidade

Acessibilidade: Trata do acesso a locais, produtos,

serviços ou informações efetivamente disponíveis ao

maior número e variedade possível de pessoas,

independente de suas capacidades físico-motoras e

perceptivas, culturais e sociais.

Usabilidade: Trata da facilidade de uso.

Obs.: Um sítio pode ser acessível, mas difícil de ser

utilizado ou; ser fácil de ser utilizado, mas inacessível a

parte da população.

Fonte: (Cartilha de usabilidade e-MAG)

Mudança de Paradigma

Com quatro linhas retas, sem tirar o lápis do papel e

sem passar pelo mesmo ponto duas ou mais vezes,

junte os nove pontos.

Mudança de Paradigma

Pessoa com deficiência

São consideradas pessoas com deficiência aquelas

que têm impedimentos de longo prazo de natureza

física, mental, intelectual ou sensorial, os quais, em

interação com diversas barreiras, podem obstruir

sua participação plena e efetiva na sociedade em

igualdades de condições com as demais pessoas.

Fonte: Convenção sobre os direitos das pessoas com deficiência.

Conformidade com o decreto de lei Decreto nº 5.296 (dezembro/04) e com a convenção da ONU que ganhou força de lei Decreto 6949 (agosto/09)

Legislação

E se fosse você

* Dados IBGE 2010

76%

24%

População Brasileira

Sem deficiência Com deficiência

População Brasileira

190.755.799

Pessoas com deficiência

45.606.048

Realidade Brasileira

98% das páginas do governo

não eram acessíveis.


federal não eram acessíveis.

Fonte: Censo na WEB 2010

2010


não eram acessíveis.


federal não eram acessíveis.

Fonte: Censo na WEB 2012

2012

Das dez melhores universidades

pontuadas no ENADE / MEC,

nenhuma possuía site acessível.

Fonte: Hudson Augusto (Prêmio Nacional de Acessibilidade na Web)

2012

Todos os Ambientes Virtuais

de Aprendizagem – possuem

falhas de acessibilidade para

realizar educação a distância

2012

Fonte: Hudson Augusto (Prêmio Nacional de Acessibilidade na Web)

Mas por que as páginas não

são acessíveis?

Reflexão

Os recursos de acessibilidade

ajudam apenas as pessoas

com deficiência?

Acessibilidade é para todos

Foto: Quatro idosos acessando a Internet Foto: Braço engessado

http://pt.wiktionary.org/wiki/engessado

http://pt.wiktionary.org/wiki/engessado


Foto: Pessoa usando computador

com leitor de telas Foto: Pessoa com

tetraplegia usando

computador


Foto: Mãos representando a comunicação por linguagem de sinais

Pessoas com deficiência

auditiva também precisam

de acessibilidade


Analfabetos funcionais: um em cada cinco

brasileiros (20,3%) é analfabeto funcional,

de acordo com a PNAD 2009

(Pesquisa Nacional de Domicílios), divulgada

pelo IBGE.

Poucos recursos:

baixa velocidade

de processamento

ou de acesso à

Internet

Foto: Pessoa de costas, sentada

de frente à lousa em branco Foto: Computador antigo


Foto: Sítio apresentado em várias resoluções (tablet, monitor e celular)

Para aqueles que precisam acessar a Web em dispositivos móveis


O Google precisa de acessibilidade!

O que é Tecnologia Assistiva?

"Tecnologia Assistiva é uma área do conhecimento, de

característica interdisciplinar, que engloba produtos,

recursos, metodologias, estratégias, práticas e serviços que

objetivam promover a funcionalidade, relacionada à

atividade e participação de pessoas com deficiência,

incapacidades ou mobilidade reduzida, visando sua

autonomia, independência, qualidade de vida e inclusão

social.”

Fonte: Comitê de Ajudas Técnicas - CAT

Recursos de Tecnologia Assistiva

Foto: Engrossadores de cabo para preensão

Definição de leitor de telas “Um leitor de tela é um programa que, interagindo com o Sistema

Operacional do computador, captura toda e qualquer informação

apresentada na forma de texto e a transforma em uma resposta falada

utilizando um sintetizador de voz.”

Fonte: Fundação Bradesco

Recursos de Tecnologia Assistiva

Foto: Logotipos de leitores de telas (Virtual Vision, NVDA, JAWS, ORCA)

Quais são os principais problemas de

acessibilidade?

Como resolvê-los

Desenvolvimento de Projetos Web

Problema: Falta de planejamento inicial do sítio

Solução: Protótipo do sítio com acessibilidade

Processo para desenvolver um sítio acessível

Sequência de passos

1 - Seguir os padrões Web

2 - Seguir diretrizes e recomendações de acessibilidade

3 - Realizar avaliação de acessibilidade

Fonte: (e-MAG - Governo Eletrônico)

Figura: Selos de validação - Padrões Web, CSS e Acessibilidade

Diretrizes de acessibilidade do Conteúdo WEB (WCAG)

Diretrizes Internacionais

Figura: Diagrama do guia de acessibilidade do WCAG

e-MAG: Modelo de Acessibilidade em Governo Eletrônico

Conjunto de recomendações a ser

considerado na manutenção e no

desenvolvimento de sítios e serviços

eletrônicos da Administração Pública

Federal;

Conduzido de forma padronizada e

de fácil implementação;

Coerente com as necessidades

brasileiras;

Em conformidade com os padrões

internacionais. Diretrizes Nacionais

Problema: <img src=“foto001101.jpg”>

Solução: <img src=“foto001101.jpg” alt=“Foto

de uma criança cheirando uma flor”>

Fornecer alternativa em texto para as imagens

Análise de endereço de uma página “Fale Conosco”

http://www.dominio.gov.br/diretorio/sub-diretorio/?apt=34&jhr=45&name=card.do

http://www.dominio.gov.br/diretorio/sub-diretorio/contato.html

http://www.dominio.gov.br/contato.html

http://www.dominio.gov.br/contato

http://dominio.gov.br/contato

Funções do mouse

Foto: Teclado e tabela com alguns eventos equivalentes aos do

mouse

Solução: Funções do mouse disponíveis via teclado

Problema: Dificuldade de navegação por teclado

Problema:

Leia mais

Veja mais

Clique aqui

Saiba mais

Download

Descrição clara de links

Solução:

Leia mais sobre a inauguração do CNRTA

Veja as fotos do evento do Livro Branco

Clique aqui e veja as fotos

Saiba mais sobre a nova plataforma

Faça o download do Guia de Acessibilidade

Cores - Contraste

Problema: Contraste ruim

Solução: Outras alternativas / Contraste maior

Fornecer alternativa para vídeo

Foto: Vídeo com alternativo textual

Problema: Vídeos sem legendas

Solução: Legendas nos vídeos

Foto: Legenda embutida

Texto com alternativa em Libras

Foto: Software que converte texto em Língua Brasileira de Sinais

Problema: Falta de acesso em Libras

Solução: Acesso ao conteúdo em Libras

Sítio com alternativa em Libras

Formulário - Captcha

http://nakedsecurity.sophos.com/pt/2012/10/08/captcha-civil-rights/

http://www.johnmwillis.com/other/top-10-worst-captchas/

Formulário - Captcha

Problema: Não é acessível

Solução? Perguntas lógicas

Solução? Formulário seguro sem o Captcha?

Quanto é 3 + 2?

Navegadores

Figura: Ícones dos cinco navegadores mais conhecidos

Problema: Acesso a sítios restrito por navegadores

Solução: Sítio funciona em navegadores distintos

Menus inacessíveis por teclado

Problema: Submenus invisíveis pelo teclado

Solução: Os menus devem se abrir após o TAB,

deixando os submenus visíveis e navegáveis via

teclado.

Exemplo:

Utilizando CSS + Javascript. Exemplo para estudo

http://tinyurl.com/menuacessivel

O uso inadequado de tabelas para diagramação de páginas

9 –

Figura: Site diagramado usando tabelas

Aria landmarks

Formulários - Identificação dos campos

Problema: Campos sem identificação

Solução: Campos identificados com etiquetas

Como eu sei que o meu

sítio está acessível?

Como eu faço para inserir acessibilidade em um

portal já pronto?

Contatos

[email protected]

[email protected]

acessibilidade web

Documents