Acessibilidade na web Padrões web e WCAG 2.0. Acessibilidade Digital - Um Direito de Todos 21 de setembro de 2011 Reinaldo Ferraz W3C.

Transcrição

1 Acessibilidade na web Padrões web e WCAG 2.0 Acessibilidade Digital - Um Direito de Todos 21 de setembro de 2011 Reinaldo Ferraz W3C.br

2 Um pouco do W3C É um consórcio internacional, criado em 1994 por Tim Berners- Lee com organizações filiadas, uma equipe em tempo integral, participação do público para colaborativamente desenvolver padrões universais para a Web.

3 O W3C no Brasil O escritório brasileiro começou suas atividades em outubro de É uma iniciativa do CGI.br, que é o responsável por coordenar e integrar as iniciativas de serviços da Internet no País e do NIC.br, criado para implementar as decisões e os projetos do Comitê Gestor da Internet no Brasil.

4 Acessibilidade, para quem?

5 Já testou o seu site? Acessível via teclado Foto: Flickr.com - Baddog_

6 Já testou o seu site?

7 Já testou o seu site? João é tetraplégico

8 Vídeos com legendas Já testou o seu site?

9 Já testou o seu site? Michele é surda

10 Já testou o seu site? Sem CSS e imagens Foto: Flickr.com - Baddog_

11 Ou mesmo sem monitor

12 Já testou o seu site? Márcia é cega.

13 Acessibilidade na web Beneficia pessoas com deficiência

14 Acessibilidade na web: A quem se destina? Acessibilidade é para todos!

15 Acessibilidade na web: A quem se destina? Foto: everystockphoto.com -bartimaeus- Usuários de Dispositivos Móveis

16 Acessibilidade na web: A quem se destina? Foto: Flickr.com - Tuftronic10000 Deficiência temporária

17 Acessibilidade na web: A quem se destina? Medo de usar o computador Foto: everystockphoto.com - Violator3

18 Estatísticas 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 Domicílios 2010 CGI.br Fonte:

19 Acessibilidade na web: A quem se destina? Início de aprendizado Nosso primeiro contato

20 Acessibilidade na web: A quem se destina? Idade Avançada Nós, daqui alguns anos Foto: Flickr.com - Jacob BÃ tter

21 Estatísticas Número de pessoas com 60 anos ou mais no mundo: milhões milhões Estimativa para 2050 Quase 2 bilhões de pessoas com mais de 60 anos. (+ de 20% da população) Foto: Flickr.com - Jacob BÃ tter Fonte:

22 Aplicando acessibilidade O caminho para a acessibilidade na web Foto: everystockphoto.com - Colin Gregory Palmer

23 Aplicando acessibilidade Web Content Accessibility Guidelines (WCAG) Versão de maio de Versão de dezembro de

24 WCAG Princípios WCAG 2.0 Recomendações (12 no total) Entendendo as Recomendações Critérios de sucesso Como Cumprir os critérios de sucesso Entendendo os critérios de sucesso Técnicas suficientes e aconselhadas

25 Princípio 1: Perceptível Isto significa que os usuários devem ser capazes de perceber a informação que está sendo apresentada, não podendo ser invisível para todos os seus sentidos.

26 Perceptível Forneça alternativas de texto para o conteúdo não textual.

27 <img /> Considerando perspectivas

28 Considerando perspectivas <img /> <img alt="foto das teclas W, 3 e C fora do teclado" />

29 Considerando perspectivas <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" />

30 Princípio 1: Perceptível Se o elemento não textual necessitar de entrada de dados do usuário

31 Princípio 1: Perceptível 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"

32 Princípio 1: Perceptível Utilizar o elemento o atributo title para identificar controles de formulários quando o elemento label não puder ser utilizado Exemplo: Campos de texto para números 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>

33 Princípio 1: Perceptível Técnicas suficientes Se conteúdo não textual é um CAPTCHA:

34 Princípio 1: Perceptível Fornecer texto alternativo que descreva o objetivo do CAPTCHA Identificar o elemento não textual como um teste CAPTCHA Exemplo: O texto alternativo do CAPTCHA diz: Digite as palavras da imagem

35 E Princípio 1: Perceptível

36 Princípio 1: Perceptível Certificar-se que a página web contenha outro CAPTCHA servindo o mesmo propósito, usando uma modalidade diferente. O objetivo desta técnica reduzir as situações em que um usuário com deficiência não consiga completar um CAPTCHA. Com mais de uma modalidade de CAPTCHA, é mais provável que o usuário seja capaz de completar uma das tarefas com sucesso.

37 Princípio 1: Perceptível Exemplos Digite o código Ou Que dia vem depois de sexta-feira?

38 Princípio 1: Perceptível Técnicas suficientes Se o elemento não textual deve ser ignorado pelas tecnologias assistivas?

39 Princípio 1: Perceptível Utilize CSS para incluir imagens decorativas O objetivo desta técnica é fornecer um mecanismo que adicione imagens meramente decorativas sem adicioná-la dentro do conteúdo. <style type="text/css"> body { background: url('/images/home-bg.jpg'); } </style>

40 Seu texto Princípio 1: Perceptível Pontos importantes do WCAG 1.0 Utilização de Folhas de Estilo (CSS) body { color: #ffffff; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 1em; } Seu texto 40

41 Princípio 1: Perceptível Pontos importantes do WCAG 1.0 Utilização de Folhas de Estilo (CSS) < font> < font> < font> < < font> < font> CSS 41

42 Princípio 1: Perceptível Pontos importantes do WCAG 1.0 Utilização de Folhas de Estilo (CSS) < font> < font> < font> < < font> < font> CSS 42

43 Perceptível Forneça alternativas de texto para o conteúdo não textual. Forneça legendas e alternativas para conteúdo de áudio e vídeo.

44 Princípio 1: Perceptível Proporcionar legendas (open ou closed caption)

45 Princípio 1: Perceptível Proporcionar uma alternativa para a mídia baseada em tempo Transcrição do vídeo em texto Veja a versão em texto do treinamento

46 Perceptível Forneça alternativas de texto para o conteúdo não textual. Forneça legendas e alternativas para conteúdo de áudio e vídeo. Faça o conteúdo adaptável e disponível para tecnologias assistivas.

47 Princípio 1: Perceptível

48 Princípio 1: Perceptível <table cellspacing="0" cellpadding="0" summary="as duas primeiras colunas da tabela são as variáveis de cruzamento (por exemplo, Regiões do país) e as subdivisões de cada bloco (por exemplo, sudeste, sul, etc.). As demais colunas são os números percentuais de cada indicador. Informações adicionais para melhor leitura dos dados estão no rodapé de cada tabela.">

49 Princípio 1: Perceptível <table cellspacing="0" cellpadding="0" summary="as duas primeiras colunas da tabela são as variáveis de cruzamento (por exemplo, Regiões do país) e as subdivisões de cada bloco (por exemplo, sudeste, sul, etc.). As demais colunas são os números percentuais de cada indicador. Informações adicionais para melhor leitura dos dados estão no rodapé de cada tabela."> <caption>a1 - PROPORÇÃO DE DOMICÍLIOS COM COMPUTADOR</caption> </table>

50 Princípio 1: Perceptível - A informação e os componentes da interface do usuário têm de ser apresentados aos usuários em formas que eles possam perceber. <table border="1"> <caption>contact Information</caption> <tr> <td></td> <td scope="col">name</td> <td scope="col">phone#</td> <td scope="col">city</td> </tr><tr> <td>1.</td> <td scope="row">joel Garner</td> <td> </td> <td>pittsburgh</td> </tr><tr> <td>2.</td> <td scope="row">clive Lloyd</td> <td> </td> <td>baltimore</td> </tr> </table> Princípio 1: Perceptível 50

51 Princípio 1: Perceptível Princípio 1: Perceptível - A informação e os componentes da interface do usuário têm de ser apresentados <table> aos usuários em formas que eles <tr> possam perceber. <th rowspan="2" id="h">homework</th> <th colspan="3" id="e">exams</th> <th colspan="3" id="p">projects</th> </tr> <tr> <th id="e1" headers="e">1</th> <th id="e2" headers="e">2</th> <th id="ef" headers="e">final</th> <th id="p1" headers="p">1</th> <th id="p2" headers="p">2</th> <th id="pf" headers="p">final</th> </tr> <tr> <td headers="h">15%</td> <td headers="e e1">15%</td> <td headers="e e2">15%</td> <td headers="e ef">20%</td> <td headers="p p1">10%</td> <td headers="p p2">10%</td> <td headers="p pf">15%</td> </tr> </table>

52 Perceptível Forneça alternativas de texto para o conteúdo não textual. Forneça legendas e alternativas para conteúdo de áudio e vídeo. Faça o conteúdo adaptável e disponível para tecnologias assistivas. Usar contraste suficiente para tornar as coisas fáceis de ver e ouvir.

53 Visão normal Daltonismo

54 Protanopia (Deficiências em vermelho) Daltonismo

55 Deuteranopia (Deficiências em verde) Daltonismo

56 Tritanopia (Deficiências em azul) Daltonismo

57 Acromatopsia (Deficiências todas as cores) Daltonismo

58 Daltonismo

59 Baixa visão

60 Princípio 2: Operável Isto significa que os usuários devem ser capazes de operar a interface; a interface de interação não pode exigir interação que o usuário não possa executar.

61 Operável Faça todas as funcionalidades acessíveis via teclado.

62 Princípio 2: Operável Utilizar o teclado e outras funções específicas 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>

63 Operável Faça todas as funcionalidades acessíveis via teclado. Não utilize conteúdo que cause convulsões.

64

65 Operável Faça todas as funcionalidades acessíveis via teclado. Não utilize conteúdo que cause convulsões. Ajude os usuários a navegar e encontrar conteúdo.

66 Princípio 2: Operável Um link Pular para o conteúdo principal

67 Princípio 2: Operável Fornecer elementos de cabeçalho no início de cada seção de conteúdo <H1>Título Principal</H1> <H2>Subtítulo</H2> <H3>Sub-Subtítulo</H3> <H2>Subtítulo</H2> <H3>Sub-Subtítulo</H3> <H4>...</H4>

68 Princípio 3: Compreensível Isto significa que os usuários devem ser capazes de compreender as informações, bem como o funcionamento da interface do usuário; o conteúdo ou operação não pode ir além de sua compreensão.

69 Princípio 3: Compreensível Definir o idioma da página Usando atributos de idioma no elemento HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html lang="fr"> <head> <title>document écrit en français</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body>...document écrit en français </body> </html>

70 Princípio 3: Compreensível Definir o idioma da página Usando atributos de idioma no elemento HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html lang="fr"> <head> <title>document écrit en français</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body>...document écrit en français and english... </body> </html>

71 Princípio 3: Compreensível Ajude os usuários a evitar e corrigir erros.

72 Princípio 4: Robusto Isto significa que os usuários devem ser capazes de acessar o conteúdo conforme as tecnologias evoluem; como a tecnologia e os agentes de usuário evoluem, o conteúdo deve permanecer acessível.

73 Robusto Maximize a compatibilidade com as tecnologias atuais e futuras.

74 Princípio 4: Robusto Validar as páginas Web O objetivo desta técnica é evitar ambigüidades em páginas da Web que muitas vezes resultam em código que não valida contra especificações formais.

75 Princípio 4: Robusto Usando HTML de acordo com a especificação HTML <img src= img.gif alt= > XHTML <img src= img.gif alt= />

76 Princípio 4: Robusto Assegurar que abertura e fechamento de tags sejam utilizadas de acordo com a especificação (HTML) <div>texto <a href= link.htm >Texto </a>

77 Estatísticas - WebAim - Terceira edição da pesquisa - Pesquisa online com 1245 usuarios de leitores de tela - Os dados foram colhidos em dezembro de Fonte: WebAIM - (organização sem fins lucrativos dentro do Centro para Pessoas com Deficiência na Universidade Estadual de Utah USA ) Fonte: WebAim -

78 Estatísticas - WebAim Resposta # de Pesquisados % de Pesquisados Avançado % Intermediário % Iniciante % Fonte: WebAim -

79 Estatísticas - WebAim Resposta # de Pesquisados % de Pesquisados Avançado % Intermediária % Iniciante % Fonte: WebAim -

80 Estatísticas - WebAim Browser # de Pesquisados % de Pesquisados Internet Explorer % Firefox % Internet Explorer % Safari % Internet Explorer % Internet Explorer % Outros % Fonte: WebAim -

81 Estatísticas - WebAim Resposta # de Pesquisados % de Pesquisados Navegue pelas categorias na página (Cabeçalhos) Fonte: WebAim % Use o recurso "Localizar" % Navegação pelos links % Leitura da página %

82 Princípios do W3C Web para todos, em qualquer dispositivo, em qualquer lugar, segura e confiável! Foto: everystockphoto.com - woodleywonderworks

83 Acessibilidade é isso! Porque sou diferente dos outros? Foto: everystockphoto.com - txd

84 Acessibilidade é isso! Porque você tem que ser igual aos outros? Foto: everystockphoto.com - txd

85 Obrigado! Reinaldo Ferraz W3C Escritório Brasil