Apresentacao Acessibilidade SenacMarilia2012

Acessibilidade na web
O caminho das pedras para construir pginas acessveis 21 de maio de 2012 Road Show Senac 2012 Marilia SP Reinaldo Ferraz W3C.br
Um pouco do W3C
um consrcio internacional, criado em 1994 por Tim BernersLee com organizaes filiadas, uma equipe em tempo integral, participao do pblico
para colaborativamente desenvolver padres universais para a Web.
O W3C no Brasil
O escritrio brasileiro comeou suas atividades em outubro de 2007. uma iniciativa do CGI.br, que o responsvel por coordenar e integrar as iniciativas de servios da Internet no Pas e do NIC.br, criado para implementar as decises e os projetos do Comit Gestor da Internet no Brasil.
Acessibilidade, para quem?
Foto: everystockphoto.com - namida-k
Cegos Daltnicos - Baixa viso
Foto: everystockphoto.com - jessicafm
Surdos
Mobilidade reduzida
J testou o seu site?
Vdeo Arquitetura inclusiva
J testou seu site?
Acessvel via teclado
Foto: Flickr.com - Baddog_
Joo tetraplgico
Vdeos com legendas
Michele surda
Sem CSS e imagens
Foto: Flickr.com - Baddog_
Ou mesmo sem monitor
Carlos cego
Estatsticas
Pessoas com deficincia no Brasil
24%
45.623.910 pessoas
Censo 2010
Fonte: IBGE
Fonte: http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resultados_preliminares/default_resultados_preliminares.shtm
Estatsticas
Pessoas com deficincia no Brasil
Visual: 19% Auditiva: 5% Motora: 7% Cognitiva: 1%
35.791.488 pessoas 9.722.163 pessoas 13.273.969 pessoas 2.617.025 pessoas
Fonte: IBGE
Estatsticas
Pessoas com deficincia no Brasil 2000 2010 Deficincia Visual: 16,6 - 35.8 milhes Deficincia auditiva: 5,7 9.7milhes Deficincia motora: 9,3* - 13.3 milhes Deficincia cognitiva: 2,8 - 2.6 milhes
* Tetraplegia, Paraplegia ou hemiplegia permanentes + Falta de um membro ou parte dele + Dificuldade permanente de caminhar ou subir escadas Fonte: IBGE
Estatsticas
Pessoas com deficincia em So Paulo
23%
9 349 553 pessoas
Censo 2010
Fonte: IBGE
Vdeo O mundo adaptado
Acessibilidade na web
Beneficia pessoas com deficincia
Acessibilidade para todos !
Foto: everystockphoto.com -bartimaeus-
Usurios de Dispositivos Mveis
Foto: Flickr.com - Tuftronic10000
Deficincia temporria
Medo de usar o computador
Foto: everystockphoto.com - Violator3
Estatsticas
Motivos pelos quais nunca utilizou a internet
55%
Falta de habilidade com o computador/internet
Pessoas que nunca acessaram a internet, mas usaram um computador. Fonte: Pesquisa TIC Domiclios 2010 CGI.br
Fonte: http://www.cetic.br/
Incio de aprendizado
Nosso primeiro contato
Idade Avanada
Ns, daqui alguns anos

Foto: Flickr.com - Jacob Btter
Estatsticas
Nmero de pessoas com 60 anos ou mais no mundo: 1950 205 milhes 2000 606 milhes Estimativa para 2050 Quase 2 bilhes de pessoas com mais de 60 anos. (+ de 20% da populao)
Foto: Flickr.com - Jacob Btter
Fonte: http://www.un.org/esa/population/publications/worldageing19502050/
Estatsticas
Pessoas com grande ou alguma dificuldade em enxergar no Brasil
18,5%
35.262.864 pessoas
Censo 2010
Fonte: IBGE
Estatsticas
Pessoas com grande ou alguma dificuldade em enxergar em So Paulo
17,4%
7.197.685 pessoas
Censo 2010
Fonte: IBGE
Aplicando acessibilidade
O caminho para a acessibilidade na web
Foto: everystockphoto.com - Colin Gregory Palmer
Video
Vdeo Acessibilidade na Web Custo ou beneficio?
Aplicando acessibilidade
Web Content Accessibility Guidelines (WCAG)

Verso 1.0 5 de maio de 1999 www.w3.org/TR/WCAG10/ Verso 2.0 11 de dezembro de 2008 www.w3.org/TR/WCAG/
Futuro da Web
http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
Futuro da Web
http://1997.webhistory.org/www.lists/www-html.1995q2/0128.html
Futuro da Web
http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2006-October/007520.html
WCAG 2.0
4 Princpios
WCAG 2.0
Entendendo as Recomendaes
Recomendaes (12 no total) Critrios de sucesso

Como Cumprir os critrios de sucesso Entendendo os critrios de sucesso
Tcnicas suficientes e aconselhadas
Princpio 1: Perceptvel
Isto significa que os usurios devem ser capazes de perceber a informao que est sendo apresentada, no podendo ser invisvel para todos os seus sentidos.
Perceptvel
Fornea alternativas de texto para o contedo no textual.
Considerando perspectivas
<img />
<img /> <img alt="Foto das teclas W, 3 e C fora do teclado" />
<img /> <img alt="Foto das teclas W, 3 e C fora do teclado" /> <img src="foto.jpg" alt=Foto das teclas W, 3 e C fora do teclado" />
Se o elemento no textual necessitar de entrada de dados do usurio
Exemplos Em um campo de entrada de texto: <label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname"> Em um campo checkbox: <input type="checkbox" id="markuplang" name="computerskills> <label for="markuplang">HTML</label>
Obs: Elemento Label deve estar posicionado depois dos elementos input de type="checkbox" e type="radio"
Clicando aqui
Aciona aqui
Utilizar o elemento o atributo title para identificar controles de formulrios quando o elemento label no puder ser utilizado Exemplo: Campos de texto para nmeros de telefone
<fieldset> <legend>Phone number</legend> <input id="areaCode" title="Area Code" type="text" size="3" value="" > <input id="exchange title="First three digits of phone number" type="text value="" > <input id="lastDigits title="Last four digits of phone number" type="text value="" > </fieldset>
54
Se o elemento no textual deve ser ignorado pelas tecnologias assistivas?
Utilize CSS para incluir imagens decorativas

O objetivo desta tcnica fornecer um mecanismo que adicione imagens meramente decorativas sem adicion-la dentro do contedo.
<style type="text/css"> body { background: url('/images/home-bg.jpg'); } </style>
56
Utilizao de Folhas de Estilo (CSS)

Seu texto
body { color: #ffffff; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 1em; } Seu texto
57

 < font> < < font> font> < font> < font> < font> < font> 
CSS
58

 < font> < < font> font> < font> < font> < font> < font> 
CSS
Tcnicas suficientes
Se contedo no textual um
CAPTCHA:
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
Perceptvel
Fornea alternativas de texto para o contedo no textual. Fornea legendas e alternativas para contedo de udio e vdeo.
Proporcionar legendas (open ou closed caption)
Proporcionar uma alternativa para a mdia baseada em tempo
Transcrio do vdeo em texto
Veja a verso em texto do treinamento
Perceptvel
Fornea alternativas de texto para o contedo no textual. Fornea legendas e alternativas para contedo de udio e vdeo. Faa o contedo adaptvel e disponvel para tecnologias assistivas.
Tabelas
A5 - TIPO DE CONEXO PARA ACESSO INTERNET NO DOMICLIO Percentual sobre o total de domiclios com acesso Internet 1 Percentual (%) Modem Tradicional (acesso discado linha telefnica) Banda Larga 2 Outros NS/NR 3 TOTAL Banda Larga Modem digital via linha telefnica (tecnologia DSL) Modem via cabo Conexo via rdio Conexo via satlite TOTAL BRASIL 20 66 23 25 14 3 6 10 REA URBANA 19 66 24 26 14 3 6 9 RURAL 21 55 17 14 20 5 8 16 REGIES DO PAS SUDESTE 22 65 21 30 11 3 4 10 NORDESTE 19 64 12 32 18 1 10 9 SUL 13 71 34 12 22 3 8 10 NORTE 31 49 23 11 11 5 14 7 CENTRO-OESTE 13 67 34 18 13 2 8 13 RENDA FAMILIAR At R$465 16 51 14 20 14 3 12 21 R$466-R$930 22 61 18 24 15 4 4 14 R$931-R$1395 23 62 22 24 13 2 6 9 R$1396-R$2325 23 63 23 22 15 3 6 8 R$2326-R$4650 16 75 32 28 11 4 7 4 R$4651 ou mais 12 78 27 34 16 1 6 5 CLASSE SOCIAL 4 A 11 81 24 41 14 3 9 3 B 18 71 28 26 13 3 6 7 C 22 61 19 24 15 3 5 12 DE 26 41 10 15 15 2 3 29
<table summary="As duas primeiras colunas da
tabela so as variveis de cruzamento (por exemplo, Regies do pas) e as subdivises de cada bloco (por exemplo, sudeste, sul, etc.). As demais colunas so os nmeros percentuais de cada indicador. Informaes adicionais para melhor leitura dos dados esto no rodap de cada tabela.">
Perceptvel
Fornea alternativas de texto para o contedo no textual. Fornea legendas e alternativas para contedo de udio e vdeo. Faa o contedo adaptvel e disponvel para tecnologias assistivas. Usar contraste suficiente para tornar as coisas fceis de ver e ouvir.
Daltonismo
Viso normal
Daltonismo
Protanopia (Deficincias em vermelho)
Daltonismo
Deuteranopia (Deficincias em verde)
Daltonismo
Tritanopia (Deficincias em azul)
Daltonismo
Acromatopsia (Deficincias todas as cores)
Daltonismo
Voc consegue ler este texto.
Voc consegue ler este texto?
Voc no consegue ler este texto!
Princpio 2: Opervel
Isto significa que os usurios devem ser capazes de operar a interface; a interface de interao no pode exigir interao que o usurio no possa executar.
Opervel
Faa todas as funcionalidades acessveis via teclado.
Princpio 2: Opervel
Utilizar o teclado e outras funes especficas do dispositivo
<a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')" onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')"> <img id="menu" src="menu_off.gif" alt="Menu" /> </a>
Opervel
Faa todas as funcionalidades acessveis via teclado. No utilize contedo que cause convulses.
Opervel
Faa todas as funcionalidades acessveis via teclado. No utilize contedo que cause convulses. Ajude os usurios a navegar e encontrar contedo.
Princpio 2: Opervel
Um link Pular para o contedo principal
Princpio 2: Opervel
Fornecer elementos de cabealho no incio de cada seo de contedo
<H1>Ttulo Principal</H1> <H2>Subttulo</H2> <H3>Sub-Subttulo</H3> <H2>Subttulo</H2> <H3>Sub-Subttulo</H3> <H4>....</H4>
Princpio 3: Compreensvel
Isto significa que os usurios devem ser capazes de compreender as informaes, bem como o funcionamento da interface do usurio; o contedo ou operao no pode ir alm de sua compreenso.
Definir o idioma da pgina
Usando atributos de idioma no elemento HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr"> <head> <title>document crit en franais</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> ...document crit en franais </body> </html>
Definir o idioma da pgina
Usando atributos de idioma no elemento HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr"> <head> <title>document crit en franais</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> ...document crit en franais and english... </body> </html>
Ajude os usurios a evitar e corrigir erros.
Princpio 4: Robusto
Isto significa que os usurios devem ser capazes de acessar o contedo conforme as tecnologias evoluem; como a tecnologia e os agentes de usurio evoluem, o contedo deve permanecer acessvel.
Robusto
Maximize a compatibilidade com as tecnologias atuais e futuras.
Princpio 4: Robusto Validar as pginas Web

O objetivo desta tcnica evitar ambigidades em pginas da Web que muitas vezes resultam em cdigo que no valida contra especificaes formais.
http://validator.w3.org/
Princpio 4: Robusto
Usando HTML de acordo com a especificao HTML <img src=img.gif alt=> XHTML <img src=img.gif alt= />
http://www.w3.org/TR/
Princpio 4: Robusto
Assegurar que abertura e fechamento de tags sejam utilizadas de acordo com a especificao (HTML)
<div>Texto <a href=link.htm>Texto </a>
Princpios do W3C
Web para todos, em qualquer dispositivo, em qualquer lugar, segura e confivel!

Foto: everystockphoto.com - woodleywonderworks
Acessibilidade isso!
Porque sou diferente dos outros?
Foto: everystockphoto.com - txd
Acessibilidade isso!
Porque voc tem que ser igual aos outros?

Foto: everystockphoto.com - txd
Obrigado!
Reinaldo Ferraz W3C Escritrio Brasil www.w3c.br Twitter: @w3cbrasil

reinaldo@nic.br Twitter: @reinaldoferraz

Apresentacao Acessibilidade SenacMarilia2012

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apresentacao Acessibilidade SenacMarilia2012

Enviado por

Direitos autorais:

Formatos disponíveis

Acessibilidade na web

para colaborativamente desenvolver padres universais para a Web.

Acessibilidade, para quem?

Foto: everystockphoto.com - namida-k

Cegos Daltnicos - Baixa viso

Foto: everystockphoto.com - jessicafm

J testou o seu site?

Vdeo Arquitetura inclusiva

J testou o seu site?

J testou seu site?

J testou o seu site?

J testou o seu site?

Acessvel via teclado

Foto: Flickr.com - Baddog_

J testou o seu site?

J testou o seu site?

J testou o seu site?

Vdeos com legendas

J testou o seu site?

J testou o seu site?

Sem CSS e imagens

Foto: Flickr.com - Baddog_

Ou mesmo sem monitor

J testou o seu site?

Pessoas com deficincia no Brasil

Pessoas com deficincia no Brasil

Visual: 19% Auditiva: 5% Motora: 7% Cognitiva: 1%

35.791.488 pessoas 9.722.163 pessoas 13.273.969 pessoas 2.617.025 pessoas

Pessoas com deficincia em So Paulo

J testou o seu site?

Vdeo O mundo adaptado

Beneficia pessoas com deficincia

Acessibilidade para todos !

Foto: everystockphoto.com -bartimaeus-

Usurios de Dispositivos Mveis

Foto: Flickr.com - Tuftronic10000

Medo de usar o computador

Foto: everystockphoto.com - Violator3

Motivos pelos quais nunca utilizou a internet

Nosso primeiro contato

Ns, daqui alguns anos

Pessoas com grande ou alguma dificuldade em enxergar no Brasil

Pessoas com grande ou alguma dificuldade em enxergar em So Paulo

O caminho para a acessibilidade na web

Foto: everystockphoto.com - Colin Gregory Palmer

Vdeo Acessibilidade na Web Custo ou beneficio?

Web Content Accessibility Guidelines (WCAG)

Recomendaes (12 no total) Critrios de sucesso

Tcnicas suficientes e aconselhadas

Fornea alternativas de texto para o contedo no textual.

<img /> <img alt="Foto das teclas W, 3 e C fora do teclado" />

Se o elemento no textual necessitar de entrada de dados do usurio

Se o elemento no textual deve ser ignorado pelas tecnologias assistivas?

Utilize CSS para incluir imagens decorativas

Utilizao de Folhas de Estilo (CSS)

Utilizao de Folhas de Estilo (CSS)

Utilizao de Folhas de Estilo (CSS)

Proporcionar legendas (open ou closed caption)

Proporcionar uma alternativa para a mdia baseada em tempo

Transcrio do vdeo em texto

Veja a verso em texto do treinamento

<table summary="As duas primeiras colunas da

Protanopia (Deficincias em vermelho)