Palestra: Acessibilidade na web - Iran Pontes

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

IRAN PONTES | iranpontes.com/palestra

1

MAS AFINAL, O QUE É ACESSIBILIDADE?

IRAN PONTES | iranpontes.com/palestra 2

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

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.


E ACESSIBILIDADE NA WEB?



ACESSIBILIDADE PARA A WEB


CONSISTE EM APLICAR CONDIÇÕES

PARA UTILIZAÇÃO EM SISTEMAS

PARA WEB (SITES).


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 – FRASE VENCEDORA DO CONCURSO “JORNADAS DE CONHECIMENTO -

ACESSIBILIDADE NA WEB”)


ACESSIBILIDADE PARA A WEB


REMOVER “BARREIRAS NAS COMUNICAÇÕES:

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


8 Extraído de Apresentação da W3C

ACESSIBILIDADE E A


9

PARA A W3C ACESSIBILIDADE NA WEB

SIGNIFICA ACESSO PARA TODOS,

INDEPENDENTEMENTE DE QUALQUER TIPO DE

LIMITAÇÃO PESSOAL.

Extraído de Apresentação da W3C

ACESSIBILIDADE E A


RECOMENDAÇÕES DE ACESSIBILIDADE PARA O CONTEÚDO DA WEB (WCAG 2.0)

(Web Content Accessibility Guidelines)

http://www.w3.org/TR/WCAG/

10 IRAN PONTES | iranpontes.com/palestra

ACESSIBILIDADE E A





PORQUE DESENVOLVER DE MODO ACESSÍVEL?



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



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;

PORQUE DESENVOLVER SITE ACESSÍVEL?


14

VÍDEO – ARQUITETURA INCLUSIVA


http://www.youtube.com/watch?v=xDnNrBPh1KU



ACESSIBILIDADE NO HTML 5



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




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



DICAS E PRÁTICAS



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



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;

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;

DICAS E PRÁTICAS


http://www.delorie.com/web/lynxview.html


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;

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;

DICAS E 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’

DICAS PRÁTICAS


25

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;

DICAS PRÁTICAS




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.

DICAS PRÁTICAS



3. Para gerar conteúdos acessíveis no flash acesse o PAINEL

ACESSIBILITY: Window > Other Panels > Acessibility

DICAS PRÁTICAS



DICAS PRÁTICAS

Acessibilizando um MovieClip



DICAS PRÁTICAS

Acessibilizando um Botão



DICAS PRÁTICAS

ACTION SCRIPT ACESSÍVEL

3. ALGUNS EXEMPLOS PRÁTICOS:

PROPRIEDADE AÇÃO APLICAÇÃO

.silent Tornar filme acessível/Tornar objeto acessível (lógica inversa)

Documentos inteiros Botões 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



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


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

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






33

VÍDEO – ACESSIBILIDADE: CUXTO X BENEFÍCIO


http://www.youtube.com/watch?v=zNVrNo7MxsA&feature=results_video&playnext=1&list=PL45623ED9C3FFA5DE




34 IRAN PONTES | iranpontes.com/palestra

PARA QUEM DESENVOLVEMOS A FIM DA

ACESSIBILIDADE?


35

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


TECNOLOGIA


36

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


FATOR HUMANO



DADOS

http://www.csszengarden.com/



MOTIVOS PELOS QUAIS NUNCA UTILIZOU A INTERNET: 55%

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



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



IDOSOS NO MUNDO

ESTIMATIVA PARA 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/



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



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


43

IDOSO NO COMPUTADOR


http://www.youtube.com/watch?v=vYp9S-qdUzA




CASES




CASES



46

VÍDEO – ACESSIBILIDADE: CUXTO X BENEFÍCIO







CASES

http://www.bengalalegal.com/


http://www.bengalalegal.com/

48

VÍDEO – CONADE


http://www.youtube.com/watch?v=GvkyjHa8tNA&feature=related




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)




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

http://wave.webaim.org/

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

http://validator.w3.org/checklink

http://browsershots.org/




TECNOLOGIAS ASSISTIVAS

LEITORES DE TELA

VIRTUAL VI

JOWS FOR WINDOWS

DOSVOX

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


http://www.nvda-project.org/










“É FAZENDO QUE SE APRENDE A FAZER AQUILO QUE SE DEVE APRENDER A

FAZER.” Aristóteles



OBRIGADO!



IRAN PONTES

www.iranpontes.com

@iranpontes Facebook.com/iranpontes


http://www.iranpontes.com/


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


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

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

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

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


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


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

Education

Palestra: Acessibilidade na web - Iran Pontes