Acessibilidade na Web: Orientações, Dicas e Aplicações

ACESSIBILIDADE NA WEB
ORIENTAÇÕES, DICAS E APLICAÇÕES
IRAN PONTES | iranpontes.com/palestra

1

ACESSIBILIDADE NA WEB | ORIENTAÇÕES, DICAS E APLICAÇÕES

MAS AFINAL, O QUE
É ACESSIBILIDADE?

IRAN PONTES |
2
iranpontes.com/palestra


MAS AFINAL, O QUE É ACESSIBILIDADE?
Segundo a lei no 10.098, de 19 de dezembro de 2000,
acessibilidade está relacionada em FORNECER CONDIÇÃO
PARA UTILIZAÇÃO, COM SEGURANÇA E AUTONOMIA, TOTAL
OU ASSISTIDA, dos espaços, mobiliários e equipamentos
urbanos, das edificações, dos serviços de transporte E DOS
DISPOSITIVOS, SISTEMAS E MEIOS DE COMUNICAÇÃO E
INFORMAÇÃO, por pessoa portadora de deficiência ou com
mobilidade reduzida.

IRAN PONTES |
3


E ACESSIBILIDADE
NA WEB?

IRAN PONTES |
4


ACESSIBILIDADE PAR A A WEB

CONSISTE EM APLICAR CONDIÇÕES
PAR A UTILIZAÇÃO EM SISTEMAS
PAR A WEB (SITES).

IRAN PONTES |
5


ACESSIBILIDADE NA WEB
“ACESSIBILIDADE NA WEB É TORNAR TODOS OS
SERVIÇOS, ASSUNTOS E PUBLICAÇÕES TÃO
FÁCEIS DE SEREM UTILIZADOS POR TODAS AS
PESSOAS, QUE ATÉ ESQUECEREMOS QUE HÁ
DIFERENÇAS.”

(CARLA NASCIMENTO – FR ASE VENCEDOR A DO CONCURSO “JORNADAS DE CONHECIMENTO -
ACESSIBILIDADE NA WEB”)

IRAN PONTES |
6


ACESSIBILIDADE PAR A A WEB
REMOVER “BARREIRAS NAS COMUNICAÇÕES:
QUALQUER ENTR AVE OU OBSTÁCULO QUE
DIFICULTE OU IMPOSSIBILITE A EXPRESSÃO OU
O RECEBIMENTO DE MENSAGENS POR
INTERMÉDIO DOS MEIOS OU SISTEMAS DE
COMUNICAÇÃO, SEJAM OU NÃO DE MASSA.”
ARTIGO 2 II -D
IRAN PONTES |
7


ACESSIBILIDADE E A

Extraído de Apresentação da W3C 8


ACESSIBILIDADE E A

PAR A A W3C ACESSIBILIDADE NA WEB
SIGNIFICA ACESSO PAR A TODOS,
INDEPENDENTEMENTE DE QUALQUER TIPO DE
LIMITAÇÃO PESSOAL.

Extraído de Apresentação da W3C 9


ACESSIBILIDADE E A

RECOMENDAÇÕES DE ACESSIBILIDADE
PAR A O CONTEÚDO DA WEB (WCAG 2.0)
(Web Content Accessibility
Guidelines)
http://www.w3.org/TR/WCAG/

IRAN PONTES |
10


PORQUE DESENVOLVER
DE MODO ACESSÍVEL?

IRAN PONTES |
11


PORQUE DESENVOLVER SITE ACESSÍVEL?
1. Prestação de serviço público;
2. Estará de acordo com os princípios de acessibilidade
preconizados pela lei federal de acessibilidade;
3. Adaptado a diferentes tipos de conexão como
navegadores antigos como o IE6, computadores antigos e
sem mouse;
4. Maior acesso ao site devido a atender a um maior público

IRAN PONTES |
12


PORQUE DESENVOLVER SITE ACESSÍVEL?
5. Menos custo com manutenção;
6. Site mais fácil de ser navegado e intuitivo;
7. O Governo é obrigado a desenvolver de forma acessível
conforme Decreto 5.296 de 02 de dezembro de 2004;
8. Desenvolvedor é uma ponte de comunicação;
9. Pensar e desenvolver de forma INCLUSIVA;

IRAN PONTES |
13


VÍDEO – ARQUITETUR A INCLUSIVA

14


ACESSIBILIDADE NO HTML 5

IRAN PONTES |
15


1. MARCAÇÃO SEMÂNTICA:
• Facilita a leitura da tela por softwares que leem tags do
HTML e não entre blocos de navegação marcado com <div>,
que não é semântico, porque não há como grupá-los e
incluí-los em um esquema diferenciado de navegação.
Solução do HTML 5:
<header>, <footer>, <nav>, <article>, <section>,
<aside> e <figure> ...

IRAN PONTES |
16


2. MULTIMÍDIA
• HTML5 oferece controles nativos evitando utilizar plugins, pois a
mídia faz parte do navegador que também possui controles
nativos;
Solução do HTML 5:
<button> para controles play/pause e os mecanismos criados
pelos novos elementos input da HTML5 como
<input type=range> para um slider de volume

IRAN PONTES |
17


DICAS E
PRÁTICAS

IRAN PONTES |
18


DICAS PRÁTICAS
1. Estudar sobre acessibilidade e usabilidade assim como
arquitetura da informação e padrões WEB.
2. Disponibilizar LEGENDAS à áudios e descrições para
vídeos;
3. Acrescentar descrição nas imagens utilizando “alt”, “title”
e “longdesc”:
<img src=“casa_amarela.jpg“ Longdesc=“casaamarela.html"
alt=“Casa amarela“/

IRAN PONTES |
19


DICAS E PRÁTICAS
4. Disponibilizar as informações com e sem cores;
5. Utilizar links com atributo title: <a href="link.htm"
title="Descrição do Link" >Link</a>
6. Formulários sempre com o elemento <label>:
<label for="Nome"> Nome: </label><input type="Text"
name="Nome">
7. Onde for necessário um plug-in como FLASH, deve-se
incluir um link para o ítem requerido;

IRAN PONTES |
20


DICAS E PRÁTICAS
8. Desabilitar CSS para garantir que a página está limpa;
(Fazer teste para o site com apenas textos:
http://www.delorie.com/web/lynxview.html)
9. Testar o site em vários navegadores;
10. Confirmar que os links funcionam mesmo com o Java
Script desabilitado;
11. Verificar se as cores do fundo e textos sobrepostos
estejam com bons contrates;

IRAN PONTES |
21


DICAS E PRÁTICAS
12. Evitar desenvolver para resoluções de novos monitores e
sim os mais utilizados;
13. Evitar tabelas e quando houver (Tabelas de dados)
identificar cabeçalhos de linha e coluna e resumos;
11. Evitar movimentos na página;
13. Evitar utilizar Menus com sub-menus e quando for
necessário que seja acessível no uso do teclado;
14. Disponibilizar link na logo do site;

IRAN PONTES |
22


DICAS E PRÁTICAS
15. Destacar links visitados e nunca sublinhar textos sem que
haja link;
16. Usar atributo "for" para permitir que o usuário clique no
rótulo (nome) para selecionar os campos no formulário;
17. Evitar utilizar textos justificados em sites devido há alguns
problemas de legibilidade, particularmente para os
usuários disléxicos (lêem com dificuldade);
18. Desenvolver uma versão do site monocromática;

IRAN PONTES |
23


DICAS PRÁTICAS
19. Utilizar espaçamento entre linhas utilizando a propriedade
line-height do CSS conseguimos criar um espaçamento
entre as linhas em um parágrafo;
20. Utilizar breadcrumbs (migalhas de pão);
21. Utilizar cor de background;
22. Testar se você consegue navegar em seu site utilizando
tab, shift-tab e return;
23. Usar o atributo da linguagem do site ‘lang:pt’

IRAN PONTES |
24


DICAS PRÁTICAS
24. Desenvolver a versão mobile do site;
25. Textos em EM ou PT não em PX;
26. Se usar frames, usar a tag interna <noframes>, e o
atributo ‘longdesc’;
27. Tags como <caption> dos atributos id, headers e scope
guiam o leitor de sites (tela) então podem usar a vontade;
28. Evitar utilizar CAPTCHA com apenas imagens, utilizem com
som, perguntas simples...
29. Sempre desenvolver seguindo os princípios da W3C;
IRAN PONTES |
25


DICAS PRÁTICAS

IRAN PONTES |
26


DICAS PRÁTICAS
1. Quantidade razoável de celulares não aceitam flash

(incluindo o IPHONE);

2. Em Modify > Document

sempre definir o TITLE e

DESCRIPTION do documento.

IRAN PONTES |
27


DICAS PRÁTICAS
3. Para gerar conteúdos acessíveis no flash acesse o PAINEL
ACESSIBILITY: Window > Other Panels > Acessibility

IRAN PONTES |
28


DICAS PRÁTICAS

Acessibilizando um MovieClip
IRAN PONTES |
29


DICAS PRÁTICAS

Acessibilizando um Botão
IRAN PONTES |
30


DICAS PRÁTICAS
ACTION SCRIPT ACESSÍVEL

3. ALGUNS EXEMPLOS PRÁTICOS:
PROPRIEDADE AÇÃO APLICAÇÃO
.silent Tornar filme Documentos inteiros
acessível/Tornar objeto Botões
acessível (lógica inversa) Clipes de filme
Texto dinâmico
Texto de entrada
.description Descrição Documentos inteiros
Botões
Clipes de filme
Texto dinâmico
Texto de entrada

IRAN PONTES |
31


DICAS PRÁTICAS

MAIS INFORMAÇÕES SOBRE ACESSIBILIDADE NO FLASH:

http://imasters.com.br/artigo/8146/flash/acessibilidade_em_flash/

http://help.adobe.com/pt_BR/Flash/10.0_UsingFlash/
WSd60f23110762d6b883b18f10cb1fe1af6-7c2ba.html

IRAN PONTES |
32


VÍDEO – ACESSIBILIDADE: CUXTO X
BENEFÍCIO

33


PAR A QUEM
DESENVOLVEMOS A FIM DA
ACESSIBILIDADE?

IRAN PONTES |
34


TECNOLOGIA
• Navegadores sem suporte a cor;
• Navegadores de texto;
• Conexões lentas; ou Diversidade de Sistemas Operacionais;
• Dispositivos de navegação portáteis;
• Navegadores sem suporte a CSS ou scripts, ou com estes
recursos desabilitados;
• Dispositivos de navegação com limitações de memória
e/ou processamento; Diversidade de resoluções de tela...

IRAN PONTES |
35


FATOR HUMANO
• Pessoas com limitações de visão, audição, física, cognitiva
ou neurológica;
• Idosos;
• Crianças em fase de conhecimento;
• Limitações temporárias;
• Limitações Econômicas;
• Comunidades rurais...

IRAN PONTES |
36


DADOS

IRAN PONTES | http://www.csszengarden.com/ 37


MOTIVOS PELOS QUAIS NUNCA
UTILIZOU A INTERNET: 55%
AFIRMAR AM QUE O MOTIVO É A FALTA
DE HABILIDADE.

Fonte: Pesquisa TIC Domicílios 2010 – CGI.br Pessoas que nunca
acessaram a internet, mas usaram um computador.

IRAN PONTES |
38


IDOSOS NO MUNDO
Em 2010, de acordo com a
Sinopse do Censo Demográfico o
país tinha 13,8 milhões de
crianças de até 4 anos e 14
milhões de pessoas com mais de
65 anos.
Fonte: G1, 2012

IRAN PONTES |
39


IDOSOS NO MUNDO

ESTIMATIVA PAR A 2050

Quase 2 bilhões de pessoas com mais de 60 anos.
(+ de 20% da população)

Fonte: ht tp://www.un.org/esa/population/publications/worldageing19502050/

IRAN PONTES |
40


DEFICIÊNCIAS
• 14,5% da população brasileira (mais de 24 milhões)
era por tadora de, pelo menos, uma das deficiências
investigadas pela pesquisa.

• Em 2000, existiram 148 mil pessoas cegas e 2,4
milhões com grande dificuldade de enxergar
Fonte: IBGE - ht tp://www.ibge.gov.br/home/presidencia/noticias/27062003censo.shtm

IRAN PONTES |
41


DEFICIÊNCIAS
• O número de surdos no Brasil era de 166.400. Além
disso, cerca de 900 mil pessoas declararam ter grande
dificuldade permanente de ouvir.

• Pessoas com tetraplegia, paraplegia ou hemiplegia
permanente são mais de 937 mil e com falta de um
membro mais de 478 mil.

Fonte: IBGE - ht tp://www.ibge.gov.br/home/presidencia/noticias/27062003censo.shtm

IRAN PONTES |
42


IDOSO NO COMPUTADOR

43


CASES



VÍDEO – ACESSIBILIDADE: CUXTO X
BENEFÍCIO

46


CASES

IRAN PONTES |
iranpontes.com/palestra http://www.bengalalegal.com/ 47


VÍDEO – CONADE

48


TESTE DE ACESSIBILIDADE
http://validator.w3.org/

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

http://wave.webaim.org//

http://www.stainlessvision.com/projects/colour-contrast-visualiser
(Contrastes)

http://validator.w3.org/checklink (Links quebrados)

http://browsershots.org (Diferentes navegadores)

IRAN PONTES |
49


TECNOLOGIAS ASSISTIVAS

LEITORES DE TELA

 VIRTUAL VI

 JOWS FOR WINDOWS

 DOSVOX

 NVDA (http://www.nvda-project.org/)

IRAN PONTES |
50


“É FAZENDO QUE SE APRENDE A FAZER
AQUILO QUE SE DEVE APRENDER A
FAZER.” Aristóteles

IRAN PONTES |
51


OBRIGADO!

IRAN PONTES |
52


IR AN PONTES
www.iranpontes.com

@iranpontes
Facebook.com/iranpontes

IRAN PONTES |
53


REFERÊNCIAS E DOCUMENTOS
• Livro: Design – Gestão, Métodos, Projetos e Processos

• http://www.renatatr.com/monografia/monografia.pdf

• http://edu3051.pbworks.com/f/ACESSIBILIDADE_WEB_revista_PGIE.pdf

• http://www.linhadecodigo.com.br/artigo/1624/acessibilidade-web-tudo-tem-
sua-primeira-vez.aspx

• http://www.kadunew.com/blog/web-design/10-crimes-de-usabilidade-que-
voce-nao-deve-cometer

• Apresentação Acessibilidade pela W3C ao Iseminar 2010

• http://www.maujor.com/tutorial/acessibilidade-na-html5.php

IRAN PONTES |
54


REFERÊNCIAS E DOCUMENTOS
• http://pt.kioskea.net/contents/web/ergonomie.php3

• http://www.ilearn.com.br/TR/WCA

• http://www.webroom.com.br/conteudo.aspx?cont=78&pai=72

• Apresentações: Acesso Digital

IRAN PONTES |
55

Acessibilidade na Web: Orientações, Dicas e Aplicações

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (14)

Ähnlich wie Acessibilidade na Web: Orientações, Dicas e Aplicações

Ähnlich wie Acessibilidade na Web: Orientações, Dicas e Aplicações (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Acessibilidade na Web: Orientações, Dicas e Aplicações