perda de tempo?

Acessibilidade web

“...não apenas permitir que pessoas com deficiências ou mobilidade

reduzida participem de atividades que incluem o uso de produtos, serviços e

informação, mas a inclusão e extensão do uso destes por todas as parcelas presentes em uma determinada

população, visando sua adaptação e locomoção,

eliminando as barreiras.”(Wikipédia, 2012)

Acessibilidade

permitir o acesso por todos, independente do tipo de usuário, situação, condição ou ferramenta utilizada

ou seja...

Estamos falando de...

❏ Cores do layout e fontes

❏ Distribuição adequada dos espaços clicáveis

❏ Facilidade de disponibilização de conteúdo

❏ Código semântico

❏ HTML e CSS válido

❏ Javascript que preveja o uso de teclas

❏ Entre outros...

NÃO!!!

Mas e aí, isso se aplica somente a pessoas com deficiência?

Fonte: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

Fonte: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

Fonte: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

❏ Navegador

❏ Conexão

❏ Dispositivo

❏ Status social

❏ Se tem ou não deficiência

não interessa...

❏ Incapacidade de ver, ouvir ou deslocarse

❏ Dificuldade ou impossibilidade de interpretar certos tipos de informação.

❏ Dificuldade visual para ler ou compreender textos.

❏ Incapacidade para usar o teclado ou o mouse, ou não dispor deles.

❏ Só texto❏ Dimensões reduzidas❏ Conexão lenta❏ Diversidade:

❏ Navegador diferente do IE❏ Por voz❏ Sistema operacional não Windows

❏ Desatualização:❏ Navegador antigo

❏ Muito atualizado ¬¬'❏ Smartphones❏ Smart TVs

Devemos levar em consideração...

❏ Sem mouse

❏ Sem teclado

❏ Sem monitor

❏ Sem áudio

❏ Dispositivos diversos

Resumindo...

“Acessibilidade de verdade

é a soma de acessibilidade

+ web standards

+ usabilidade.”www.acessodigital.net

o que é necessário?!

Vamos ao que interessa…

Arquitetura

❏ Definição de tamanho e disposição de elementos de acordo com a ordem de consumo, fluxo de venda, etc

❏ Planejamento espacial considerando o tamanho e disposição dos elementos para que sejam responsivos ou adaptáveis às necessidades especificas do usuário

Layout

Design

❏ Visual diferenciado de acordo com a situação, plataforma e dispositivo

❏ Opção para alto contraste

❏ Design adequado para usuários daltônicos

❏ Escolha de fontes❏ Estilo

❏ Tamanho

Seguir padrões web

Significa desenvolver um código semântico e sem erros

Exemplo incorreto

Exemplo correto

Conjunto de recomendações:

❏ W3C (WCAG, WAI-ARIA, etc) ❏ e-MAG

Seguir diretrizes de acessibilidade

❏ Perceptível

A informação e os componentes da interface de usuário precisam ser apresentados de forma que eles possam ser percebidos com facilidade

Níveis de acessibilidade WCAG 2.0

❏ Operável

Os componentes da interface do usuário e a navegação precisam ser operáveis

❏ Compreensível

A informação e a operação da interface do usuário têm de ser compreensíveis

❏ Robusto

Maximizar a compatibilidade com atuais e futuros navegadores, incluindo tecnologias de apoio

❏ Nível A - Nível mínimo de conformidade

❏ Nível AA

❏ Nível AAA

Níveis de Conformidade

❏ Aumentar fonte

❏ Diminuir fonte

❏ Fonte normal

❏ Contraste

❏ Atalhos para Menu, Conteúdo e Busca

❏ Link para a página de acessibilidade do site

Barra de acessibilidade

❏ Validar os códigos do conteúdo HTML e das folhas de estilo

❏ Verificar o fluxo de leitura da página – para tal, utilizar um navegador textual

❏ Verificar o fluxo de leitura da página sem estilos, sem script e sem as imagens

Realizar avaliação de acessibilidade

❏ Verificar as funcionalidades da barra de acessibilidade

❏ Realizar a validação automática de acessibilidade utilizando o ASES e outros avaliadores automáticos

❏ Realizar a validação manual, utilizando os checklists de validação humana

Nem são tantos erros

Será?

Ferramentas de apoio

Avaliador de acessibilidade

❏ ASES❏ Da Silva (versão antiga do ASES

online)❏ Componentes FF

❏ Web developer tool

"Pensar em acessibilidade não é ser bonzinho, é enxergar no público não-padrão e com necessidades especiais, potenciais consumidores para o que você está vendendo."

Bruno Torres (março, 2006)

Custo ou benefício?

http://bengalalegal.com/

http://acessibilidade.bento.ifrs.edu.br/

http://vidamaislivre.com.br/

http://www.parquedossonhos.com.br/

Sites premiados

Links úteis

Sobre acessibilidade

❏ http://www.acessibilidadelegal.com/❏ http://www.acessobrasil.org.br/❏ http://www.governoeletronico.gov.

br/acoes-e-projetos/e-MAG

Validador

❏ http://www.dasilva.org.br/

Buscador de sites acessíveis

❏ http://www.clareou.com.br/

❏ http://pt.wikipedia.org/wiki/Acessibilidade❏ http://www.acessobrasil.org.br❏ http://www.acessobrasil.org.br/ciiee/index.htm❏ http://www.w3.org/TR/WAI-WEBCONTENT/❏ http://www.governoeletronico.gov.br/acoes-e-

projetos/e-MAG❏ http://brunotorres.net/acessibilidade-nao-e-

altruismo❏ http://www.acessibilidadelegal.com/❏ http://www.lupadigital.info/❏ http://www.w3.org/TR/CSS21/media.html❏ http://www.w3.org/TR/css3-mediaqueries/❏ http://tableless.com.br/o-que-sao-media-types/

Referências