Metodologia para Avaliação de Acessibilidade em Sites 1ª Conferência Web W3C Brasil Lêda Lucia Spelta e Horácio Soares É garantir que a informação esteja.

Apresentação em tema: "Metodologia para Avaliação de Acessibilidade em Sites 1ª Conferência Web W3C Brasil Lêda Lucia Spelta e Horácio Soares É garantir que a informação esteja."— Transcrição da apresentação:

1 Metodologia para Avaliação de Acessibilidade em Sites 1ª Conferência Web W3C Brasil Lêda Lucia Spelta e Horácio Soares É garantir que a informação esteja disponível e acessível a qualquer hora, local, ambiente, dispositivo de acesso e por qualquer tipo de visitante/usuário, independente de sua capacidade motora, visual, auditiva, mental, computacional, cultural ou social. Novembro 2009

2 Acessibilidade? 2

3 “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”)

4 + Acessibilidade de Verdade!
Acessibilidade + Web Standards + Usabilidade Acessibilidade de Verdade!

5 Acessibilidade para quem?
É garantir que a informação esteja disponível e acessível a qualquer hora, local, ambiente, dispositivo de acesso e por qualquer tipo de visitante/usuário, independente de sua capacidade motora, visual, auditiva, mental, computacional, cultural ou social.

6 Juca, sem visão.

7 Mandy, sem visão e braços.

8 Lucas, com baixa visão utilizando o software ampliador de tela.

9 Para nosso ex. aluno Isaias, ele é designer e descobriu no início de 2009 que é daltônico.
Isaias à esquerda, conduzindo o Januário para um chopinho após curso de acessibilidade Web.

10 Acessibilidade então é para pessoas com deficiência visual, certo?
Ok! Acessibilidade então é para pessoas com deficiência visual, certo? 10

11 Errado! Errado! Errado! 11

12 João Henriques deficiente motor utiliza o mouse com dificuldade. ( www
João Henriques deficiente motor utiliza o mouse com dificuldade. ( )

13 Eric interagindo através de teclado expandido Funlar – Rio (nov/2006).

14 João, tetraplégico João (foto de Maíra Soares )

15 Chapeuzinho Vermelho em português e na língua de sinais (prof. Goulão)
Deficientes auditivos não oralizados têm dificuldades com o português. Apreendem primeiro a língua de sinais. Chapeuzinho Vermelho em português e na língua de sinais (prof. Goulão)

16 Então acessibilidade é somente para pessoas com deficiências, certo?
16

17 Casal João e Ana, eles têm pouca experiência, baixa visão e dificuldades motoras.

18 Pedro e Laura com dispositivos móveis com acesso a Internet.
Pedro olhando para seu smartphone e Laura com uma cara desesperada para seu celular. Pedro e Laura com dispositivos móveis com acesso a Internet.

19 Gabriel, linguagem em desenvolvimento...
Gabriel compenetrado, olhando para o monitor e clicando com o mouse. Agora ele está olhando e brincando com o teclado.

20 Calvin, pouca experiência e medo do computador
Homem com muito medo olhando por cima de um notebook.

21 Max, com tendinite, usando o mouse com a mão trocada.
Homem com expressão de desespero, usando o mouse com a mão esquerda

22 E todos nós, primeira experiência.
Um criança em frente a um notebook

23 E finalmente, o bilionário cego!!!
Cifrão desenhado com moedas douradas

24 Dilbert fazendo parte do logotipo do Google e falando “eu não posso ver”.
Google, o bilionário cego!!! É apenas um robô que só indexa conteúdo em texto.

25 Acessibilidade, quais são os custos?
25

26 Baixo em novos projetos Diminui com tempo Validação e manutenção
Curva de aprendizagem Alto custo no redesign Baixo em novos projetos Diminui com tempo Validação e manutenção Melhoria contínua Mudança de cultura 26

27 Gráfico de barras em crescimento da esquerda para direita.
E os benefícios? Gráfico de barras em crescimento da esquerda para direita. 27

28 Homem com arma mirando um possível alvo
Possibilidade de atingir 100% do público alvo; Homem com arma mirando um possível alvo 28

29 Atender melhor todas as pessoas
29

30 Mas normalmente o tratamento que recebemos é...
Avião cheio com passageiro exprimido e impossibilitado fazer seu lanche. 30

31 Quando podemos ser surpreendidos
Design universal: uma solução para todos Bebedor acessível para todas pessoas, altas, baixas, em cadeiras, etc. 31

32 Homem de terno comemorando
Fidelizar clientes Homem de terno comemorando 32

33 Atender com qualidade novos clientes que surgem com a inclusão digital e o sistema de cotas.
Dardo

34 Mais fácil de usar e aprender
Casal decepcionado ao utilizar as orientações do fabricante e não conseguir montar uma estante. 34

35 Uma mão com laço no dedo indicador
Conformidade com o decreto de lei (dez/04) e com a convenção da ONU que ganhou força de lei (ago/08) ; É garantir que a informação esteja disponível e acessível a qualquer hora, local, ambiente, dispositivo de acesso e por qualquer tipo de visitante/usuário, independente de sua capacidade motora, visual, auditiva, mental, computacional, cultural ou social. Uma mão com laço no dedo indicador

36 Uma senhora acessando um computador.
Crescimento do consumidor acima dos 65 anos...

37 Visualizar os benefícios da acessibilidade
Manutenção mais rápida e barata, com melhor performance e diminuição dos custos com banda; Visualizar os benefícios da acessibilidade

38 Valorização da Diversidade e Responsabilidade Social;
Mãos entrelaçadas

39 Proteção contra processos pela falta da acessibilidade;
Mão com sinal de ok. Proteção contra processos pela falta da acessibilidade;

40 Maior visibilidade pelos sistemas de busca;
Um grande e bonito olho azul. Maior visibilidade pelos sistemas de busca; 40

41 Diferencial competitivo Mulher com notebook em sinal de ok
Cachorrinho caregando um enorme osso.

42 Mãe e filha felizes na praia dando uma estrela
Diferencial competitivo e melhoria da qualidade. Mãe e filha felizes na praia dando uma estrela

43 Navegação as escuras

44 Globo em ambiente futurista.
Validação de Acessibilidade Globo em ambiente futurista.

45 Validação de Acessibilidade
Validações automáticas e semi-automáticas de páginas web

46 Validação de Acessibilidade
Web Standards

47 Validador W3C – HTML/XHTML http://validator.w3.org/
AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated. Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion states, “Changes of context are initiated only by user request.” Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity. 47

48 Validador W3C – CSS http://jigsaw.w3.org/css-validator/
AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated. Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion states, “Changes of context are initiated only by user request.” Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity. 48

49 Firefox - HTML Validator
Ferramentas Firefox - HTML Validator AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated. Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion states, “Changes of context are initiated only by user request.” Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity. 49

50 Validação de Acessibilidade
Validação automática e semi-automática de acessibilidade.

51 Validação de Acessibilidade
Validadores automáticas, quem tem um, não tem nenhum...

52 HERA http://www.sidar.org/hera/index.php.pt
52

53 EXAMINATOR http://www.acesso.umic.pt/webax/examinator.php
53

54 Da Silva http://www.dasilva.org.br/
54

55 Total Validator http://www.totalvalidator.com WCAG 2.0 e WCAG 1.0
55

56 Web Xact (Bobby) http://webxact. watchfire
Web Xact (Bobby) Validador de acessibilidade que foi comprado pela IBM e não está mais disponível na Web. 56

57 Truwex Online 2.0 http://checkwebsite.erigami.com/accessibility.html
57

58 Functional Accessibility Evaluator 1.0 http://fae.cita.uiuc.edu/
58

59 WAVE is a free web accessibility "evaluation tool p rovided by WebAIM
59

60 TAW WCAG 1.0, WCAG 2.0 (BETA) http://www.tawdis.net/
60

61 Achecker (WCAG 2.0) http://achecker.ca/checker/index.php
Functional Accessibility Evaluator 61

62 Lista de validadores indicados pelo WAI: http://www. w3
62

63 Validação de Acessibilidade
Avaliação de contraste.

64 Color and accessibility http://www. merttol

65 Teste de contraste http://www. snook
AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated. Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion states, “Changes of context are initiated only by user request.” Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity. 65

66 Teste de contraste http://juicystudio
AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated. Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion states, “Changes of context are initiated only by user request.” Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity. 66

67 Teste de contraste http://www. stainlessvision
AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated. Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion states, “Changes of context are initiated only by user request.” Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity. 67

68 Teste de contraste http://www. vischeck
Teste de contraste (teste de imagens e sites) AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated. Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion states, “Changes of context are initiated only by user request.” Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity. 68

69 Teste de contraste Firefox - analisador de Contraste de Cores
AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated. Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion states, “Changes of context are initiated only by user request.” Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity. 69

70 Validação de Acessibilidade
Avaliação do tempo de download das páginas.

71 WebSiteOptimization - tempo http://WebSiteOptimization
AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated. Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion states, “Changes of context are initiated only by user request.” Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity. 71

72 Validação de Acessibilidade
Teste de links quebrados e página de erro.

73 W3C - Link checker http://validator.w3.org/checklink
AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated. Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion states, “Changes of context are initiated only by user request.” Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity. 73

74 Validação de Acessibilidade
Avaliação humana por especialistas.

75 Validação de Acessibilidade
Avaliação humana por especialistas: Aplicação de lista de verificação do WCAG por especialista.

76 Validação de Acessibilidade
Checklist W3C WCAG 1.0 (link)

77 Validação de Acessibilidade
WCAG 2.0 Appendix B: Checklist (Non-Normative) Web Content Accessibility Guidelines 2.0 Checklist

78 Validação de Acessibilidade
Avaliação humana por especialistas em acessibilidade simulando o acesso por pessoas com deficiência.

79 Validação de Acessibilidade
Sem mouse – navegar pelo site em análise utilizando apenas o teclado e monitor, com mouse desligado..

80 Validação de Acessibilidade
Sem mouse e com software leitor de telas - navegar pelo site com o teclado, um software leitor de telas e com monitor.

81 Validação de Acessibilidade
Sem mouse e sem monitor - navegar pelo seu site utilizando apenas o teclado com orientação do leitor de telas.

82 Validação de Acessibilidade
Testes de acesso em diferentes plataformas e navegadores.

83 Lynx Viewer http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php
AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated. Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion states, “Changes of context are initiated only by user request.” Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity. 83

84 Lynx Viewer Testando o site da AcessoDigital.net
AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated. Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion states, “Changes of context are initiated only by user request.” Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity. 84

85 Diferentes Navegadores http://browsershots.org
AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated. Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion states, “Changes of context are initiated only by user request.” Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity. 85

86 Diferentes Navegadores http://browsershots.org
AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated. Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion states, “Changes of context are initiated only by user request.” Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity. 86

87 Diferentes Navegadores http://browsershots.org
AJAX creates a new paradigm for the web and many people are not accustomed to it yet. Thus it is important to inform the user if the page is being incrementally updated. Some users may not notice that data on the page is changed. This is especially true for users of assistive technology such as screen readers and magnifiers. Due to assistive technology, cognitive, or other reasons, some users may be focused on only a single area of the page. These uses may not be able to easily locate new information on the page. Unexpected changes of focus can be very distracting for some users. It can be very time consuming and difficult for some users to return to the previous location on the page. Thus, changing focus to the updated content should be avoided unless the user has explicitly requested that mechanism of update notification. Also, note that WCAG 2.0 Success Criterion states, “Changes of context are initiated only by user request.” Loss of back button functionality and URIs that can not be bookmarked are also issues associated with AJAX but they will not be discussed in this presentation since they do not directly affect accessibity. 87

88 Validação de Acessibilidade
Testes de acesso com diferentes configurações.

89 Desabilitar estilos (CSS)
89

90 Desabilitar imagens 90

91 Desabilitar Scripts 91

92 Validação de Acessibilidade
Testes de impressão e com dispositivos móveis

93 Melhoria contínua da acessibilidade
Validação de Acessibilidade Canal para reportar problemas de acessibilidade. Melhoria contínua da acessibilidade @

94 Firefox Firefox 3.0.7 Complementos para o Firefox (são instalados a partir de seus respectivos links) : Firebug: HTML Validator Web Developer Check My Colors! 1.0 Firefox Accessibility Extension

95 Firefox Complementos para o Firefox (são instalados a partir de seus respectivos links) : TAW3 with a click Juicy Studio Accessibility Toolbar Obtrusive JavaScript Checker

96 Uma mão segurando um cartão de visita da acesso digital.
Obrigado! Lêda Lucia Spelta Horácio Soares É garantir que a informação esteja disponível e acessível a qualquer hora, local, ambiente, dispositivo de acesso e por qualquer tipo de visitante/usuário, independente de sua capacidade motora, visual, auditiva, mental, computacional, cultural ou social. Uma mão segurando um cartão de visita da acesso digital.