Acessibilidade na Web: Novos padrões WCAG 2.0. Reinaldo Ferraz. Novembro/2009. Acessibilidade na Web: novos padrões WCAG 2.0

Transcrição

1 Novos padrões WCAG 2.0 Reinaldo Ferraz Novembro/2009

2 O Consórcio World Wide Web (W3C) 2 É 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 3 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 Missão do W3C 4 Conduzir a World Wide Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo.

5 O W3C desenvolve padrões 5 Conduzir a World Wide Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo. Desde sua fundação, o W3C publicou mais de 110 de padrões, denominados Recomendações do W3C Web Standards Padrões Web

6 Metas W3C 6 Web para todos

7 Metas W3C 7 Web para todos Tornar os benefícios da web (seu valor social: comunicação humana, comércio, compartilhar conhecimentos) disponíveis a todos, independente de Hardware Software Infra-estrutura de rede Idioma Cultura Localização geográfica Habilidade física Habilidade mental

8 Metas W3C 8 Web para todos Web em qualquer dispositivo

9 Metas W3C 9 Web em qualquer dispositivo Possibilitar que o acesso de qualquer tipo de dispositivo seja tão simples, fácil e conveniente quanto de um computador convencional Computadores Desktops Netbooks Telefones PDAs TV digital Sistemas de interação por voz Aparelhos domésticos web ubíqua

10 Metas W3C 10 Web para todos Web em qualquer dispositivo Web base de conhecimento

11 Metas W3C 11 Web base de conhecimento Não apenas um grande livro hiperlinkado onde pessoas possam pesquisar, navegar, ler e visualizar informações Possibilitar que computadores interpretem, estabeleçam inferências e relações na web Interoperabilidade Web Semântica

12 Metas W3C 12 Web para todos Web em qualquer dispositivo Web base de conhecimento Web confiável e segura

13 Metas W3C 13 Web confiável e segura Uma web em que as transações sociais e comunicações com terceiros sejam estabelecidas em relações de confiança, sejam pessoas, organizações ou serviços Ambiente mas colaborativo Responsável Seguro Confiança Confidência

14 14 WAI e WCAG

15 WAI e WCAG 15 WAI - Web Accessibility Initiative Iniciativa do W3C que trabalha em conjunto com organizações de todo o mundo desenvolvendo estratégias, orientações e recursos para ajudar a tornar a Web acessível à pessoas com deficiência. WCAG - Web Content Accessibility Guidelines São as Recomendações para a acessibilidade do conteúdo da Web, documentos que explicam como tornar o conteúdo Web acessível a pessoas com deficiências, destinando-se a todos os criadores de conteúdo Web (autores de páginas e projetistas de sites) e aos programadores de ferramentas para criação de conteúdo. Versão 1.0: 5 de maio de 1999 Versão 2.0: 11 de dezembro de 2008

16 Acessibilidade na Web 16 O que é acessibilidade?

17 O que é acessibilidade? 17 Segundo a legislação brasileira: Acessibilidade é 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 com deficiência ou com mobilidade reduzida. DECRETO Nº DE 2 DE DEZEMBRO DE

18 O que é acessibilidade? Segundo a WAI: Acessibilidade na Web significa que pessoas com deficiências podem perceber, entender, navegar e interagir além de poder contribuir para a web. 18

19 O que é acessibilidade? 19 Acessibilidade na web diz respeito à facilidade de acesso, por qualquer pessoa, independente de condições físicas, técnicas ou dispositivos.

20 20 Acessibilidade na web: A quem se destina?

21 Acessibilidade na web: A quem se destina? 21 Deficientes visuais - Cegos: Pessoas que navegam com leitores de tela - Daltônicos: Dificuldade em enxergar cores e contrastes - Baixa visão: Necessidade de aumento de tela para ler

22 Acessibilidade na web: A quem se destina? 22 Deficientes auditivos - Pessoas que não conseguem acompanhar um vídeo na internet com áudio.

23 Acessibilidade na web: A quem se destina? 23 Deficientes motores - Pessoas que utilizam o computador com apenas um dedo (ou nem isso) ou que tenham dificuldades com o uso do mouse.

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

25 Acessibilidade na web: A quem se destina? 25 Displays reduzidos - Acessando a internet por um telefone celular.

26 Acessibilidade na web: A quem se destina? 26 Deficiência temporária - Pessoas obrigadas a usar o computador com sua outra mão devido a fraturas, tendinite, etc.

27 Acessibilidade na web: A quem se destina? 27 Início de aprendizado - Pessoas que estão iniciando seu processo de informatização ou crianças descobrindo o computador.

28 Acessibilidade na web: A quem se destina? 28 Idade avançada - Pessoas mais velhas, com dificuldades para ler letras pequenas e usar o mouse.

29 Introdução 29

30 Acessibilidade na web: A quem se destina? 30 Fazer um site acessível não é só se preocupar com um determinado grupo de pessoas: É se preocupar com todas as pessoas que acessam seu site.

31 31 Tutorial de Acessibilidade na Web

32 WCAG É uma recomendação W3C de 5 de maio de 1999 Foi traduzido para o português por Cláudia Dias, auditora da tecnologia da informação do Tribunal de Contas da União (TCU) As recomendações explicam como tornar o conteúdo Web acessível a pessoas com deficiências.

33 WCAG WCAG Recomendações Pontos de Verificação Técnicas para os Pontos de Verificação

34 Pontos importantes do WCAG Utilização de folhas de estilo (CSS) - Tornar imagens acessíveis

35 Pontos importantes do WCAG 1.0 Utilização de Folhas de Estilo (CSS) 35 Vantagens da utilização de Folhas de Estilo - Obter maior controle e domínio sobre as páginas criadas - Redução do tempo de transferência de páginas

36 Pontos importantes do WCAG 1.0 Utilização de Folhas de Estilo (CSS) 36 <font face= Arial, Verdana, Helvetica, sans-serif size= 2 color= black >Seu texto</font> body { color: #ffffff; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 1em; } Seu texto

37 Pontos importantes do WCAG 1.0 Utilização de Folhas de Estilo (CSS) 37 <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> CSS

38 Pontos importantes do WCAG 1.0 Utilização de Folhas de Estilo (CSS) 38 <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> <font></font> CSS

39 Pontos importantes do WCAG 1.0 Tornar imagens acessíveis 39 Alguns usuários podem não ser capazes de ver imagens; outros podem utilizar navegadores textuais e que não suportam imagens; e ainda outros podem ter desativado o suporte a imagens (por ex., porque possuem uma conexão lenta com a Internet)

40 Pontos importantes do WCAG 1.0 Tornar imagens acessíveis 40 <body> <img src="foto-01.gif" alt=""> O Arco do Triunfo (francês: Arc de Triomphe) é um monumento, localizado na cidade de Paris, construído em comemoração às vitórias militares de Napoleão Bonaparte, o qual ordenou a sua construção em Inaugurado em 1836, a monumental obra detém, gravados, os nomes de 128 batalhas e 558 generais. Em sua base, situa-se o Túmulo do Soldado Desconhecido (1920). O arco localiza-se na praça Charles de Gaulle, uma das duas extremidades da avenida Champs-Élysées. </body>

41 Pontos importantes do WCAG 1.0 Tornar imagens acessíveis 41 <body> <img src="foto-01.gif" alt=""> O Arco do Triunfo (francês: Arc de Triomphe) é um monumento, localizado na cidade de Paris, construído em comemoração às vitórias militares de Napoleão Bonaparte, o qual ordenou a sua construção em Inaugurado em 1836, a monumental obra detém, gravados, os nomes de 128 batalhas e 558 generais. Em sua base, situa-se o Túmulo do Soldado Desconhecido (1920). O arco localiza-se na praça Charles de Gaulle, uma das duas extremidades da avenida Champs-Élysées. </body>

42 Pontos importantes do WCAG 1.0 Tornar imagens acessíveis 42 <body> <img src="foto-01.gif" alt= Foto: Divulgação"> O Arco do Triunfo (francês: Arc de Triomphe) é um monumento, localizado na cidade de Paris, construído em comemoração às vitórias militares de Napoleão Bonaparte, o qual ordenou a sua construção em Inaugurado em 1836, a monumental obra detém, gravados, os nomes de 128 batalhas e 558 generais. Em sua base, situa-se o Túmulo do Soldado Desconhecido (1920). O arco localiza-se na praça Charles de Gaulle, uma das duas extremidades da avenida Champs-Élysées. </body>

43 Pontos importantes do WCAG 1.0 Tornar imagens acessíveis 43 <body> <img src="foto-01.gif" alt= Foto do Arco do Triunfo"> O Arco do Triunfo (francês: Arc de Triomphe) é um monumento, localizado na cidade de Paris, construído em comemoração às vitórias militares de Napoleão Bonaparte, o qual ordenou a sua construção em Inaugurado em 1836, a monumental obra detém, gravados, os nomes de 128 batalhas e 558 generais. Em sua base, situa-se o Túmulo do Soldado Desconhecido (1920). O arco localiza-se na praça Charles de Gaulle, uma das duas extremidades da avenida Champs-Élysées. </body>

44 Pontos importantes do WCAG 1.0 Tornar imagens acessíveis 44 Além de beneficiarem os usuários deficientes, os equivalentes textuais contribuem para que todos e quaisquer usuários encontrem as páginas mais depressa, já que os mecanismos de busca podem se servir do texto em sua indexação.

45 Pontos importantes do WCAG 1.0 Tornar imagens acessíveis 45

46 46 WCAG 2.0

47 WCAG É uma recomendação W3C de 11 Dezembro de 2008 Foi traduzido para o português em 2 de março de 2009 pelo Prof. Everaldo Bechara, do Centro de Treinamento ilearn. As WCAG 2.0 baseiam-se nas WCAG 1.0 As WCAG 2.0 foram desenvolvidas através do processo W3C em colaboração com pessoas e organizações em todo o mundo.

48 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

49 WCAG 2.0 Técnicas suficientes e aconselhadas Critérios de Sucesso A, AA ou AAA 49 Objetivos Técnicas e combinações de técnicas - Objetivo - Exemplos -Técnicas Relacionadas - Recursos -Testes Benefícios específicos ao cumprir o Critério de Sucesso Exemplos de uso Conteúdo relacionado Falhas comuns

50 WCAG Serão apresentadas algumas recomendações, com suas diversas aplicações Alguns critérios de sucesso utilizam combinações de técnicas para sua aplicação.

51 51 Recomendações WCAG 2.0

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

53 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. 53 Recomendação 1.1 Alternativas em Texto: Fornecer alternativas em texto para qualquer conteúdo não textual permitindo, assim, que o mesmo possa ser alterado para outras formas mais adequadas à necessidade do indivíduo, tais como impressão em caracteres ampliados, braille, fala, símbolos ou linguagem mais simples. Objetivo: Tornar a informação fornecida por elementos não textuais acessíveis por meio do uso de textos alternativos.

54 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 Conteúdo Não Textual: Todo o conteúdo não textual que é apresentado ao usuário tem uma alternativa em texto que serve um propósito equivalente, exceto para seguintes situações. (Nível A)

55 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. 55 Controles, Entrada (Ex: Formulários, Controle de uma aplicação) O conteúdo não textual deve dispor de um nome que descreve a sua finalidade.

56 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. 56 Mídias com base em tempo (Ex: Vídeos ao vivo) As alternativas em texto fornecem, no mínimo, uma identificação descritiva do conteúdo não textual.

57 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. 57 Teste (Ex: Exercícios inválidos se apresentados em texto) As alternativas em texto devem fornecer, no mínimo, uma identificação descritiva do conteúdo não textual.

58 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. 58 Experiência sensorial específica (Ex: Análise de uma obra de arte) As alternativas em texto devem fornecer, no mínimo, uma identificação descritiva do conteúdo não textual.

59 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. 59 Captcha Devem ser fornecidas alternativas em texto que identificam e descrevem a finalidade do conteúdo não textual, e são fornecidas formas alternativas do CAPTCHA para atender diferentes incapacidades.

60 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. 60 Decoração, Formatação (Ex: Imagens decorativas de cantos arredondados) O conteúdo deve ser implementado de uma forma que possa ser ignorado pelas Tecnologias Assistivas.

61 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. 61 Situações de uso - Técnicas suficientes Busca Situação A: Se uma breve descrição pode ter a mesma finalidade e apresentar as mesmas informações que o conteúdo não-textual:

62 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. 62 Técnicas suficientes Proporcionar texto alternativo curto para o conteúdo não-textual que tenha a mesma finalidade e apresenta as mesmas informações que o conteúdo não-textual. Utilizando atributo ALT

63 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. 63 Exemplos Um botão de busca com o desenho de uma lupa. O texto alternativo deve ser Buscar e não Lupa

64 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. 64 Exemplos Uma figura que mostra como fazer um nó de gravata, com setas indicando como fazê-lo O texto alternativo deve descrever como fazer o nó na gravata e não como a imagem se parece.

65 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. 65 Exemplos Um cabeçalho que contenha uma imagem com as palavras História geral em texto estilizado deve ter o alt text dessa figura como História Geral

66 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. 66 Exemplos A imagem de uma série de livros em uma estante contém áreas interativas que fornecem navegação sobre cada livro. O texto alternativo Os livros estão disponíveis para compra nessa sessão. Selecione um livro para maiores detalhes ajuda a descrever a foto e a interatividade do site.

67 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. 67 Técnicas suficientes Descrição detalhada da imagem Tabela de vendas de outubro Situação B: Se uma breve descrição não pode servir para a mesma finalidade e apresentar as mesmas informações que o conteúdo não-textual (por exemplo, um gráfico ou diagrama):

68 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. 68 Técnicas Suficientes Adicionar um texto alternativo curto que proporcione uma breve descrição do conteúdo não textual Exemplo: Tabela de vendas do mês de Outubro E uma das técnicas a seguir.

69 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 Adicionar uma descrição longa para elementos não textuais que proporcione e apresente a mesma informação. Utilizando Longdesc <img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/> IMPORTANTE Algumas tecnologias assistivas não suportam o atributo Longdesc

70 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 Adicionar uma descrição longa em texto próximo ao elemento não textual, com a referência para a descrição longa em uma pequena descrição. Objetivo: Fornecer uma descrição longa sem a necessidade de deslocar o usuário para outro local com a descrição. O texto alternativo curto diz: Gráfico de vendas em outubro dos três maiores vendedores Vendas de outubro mostram Maria liderando com 400 unidades, Michel em seguida com 389 e Cris é a terceira com 350 unidades. O seguinte parágrafo deve ser posicionado logo depois do gráfico: Vendas de outubro mostram Maria liderando com 400 unidades, Michel em seguida com 389 e Cris é a terceira com 350 unidades.

71 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 Adicionar uma descrição longa em outro local com um link para ela que está imediatamente ao lado do elemento não textual Objetivo: Fornecer um link para uma descrição longa em outro local da página ou mesmo em um novo documento.

72 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. 72 O texto alternativo curto diz: Gráfico de vendas em outubro dos três maiores vendedores D Ao lado da imagem, uma pequena imagem com um link para uma página com a descrição detalhada do gráfico (D link). Ao final da descrição, existe um link para retornar ao gráfico.

73 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. 73 Técnicas suficientes Situação C: Se o elemento não textual for um controle ou necessitar de entrada de dados do usuário:

74 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. 74 Fornecer um texto alternativo que identifique o propósito do elemento não textual, utilizando um texto alternativo curto. Controle de movimento de câmera O objetivo desta técnica é fornecer informação útil via texto alternativo mesmo se a funcionalidade completa do elemento não textual possa ser fornecida.

75 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. 75 Exemplos Uma aplicação que tem um disco onde é pressionado para controlar os movimentos e o zoom de uma câmera deve ter o seguinte texto alternativo Controle para movimento e zoom de uma câmera de vídeo

76 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. Utilizar o elemento label para associar rótulos de textos em controles de formulários. 76 Elementos que utilizam label explicitamente associados: input type="text" input type="checkbox" input type="radio" input type="file" input type="password" textarea select Obs: Elemento Label deve estar posicionado depois dos elementos input de type="checkbox" e type="radio"

77 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. Utilizar o elemento label para associar rótulos de textos em controles de formulários. 77 Os seguintes elementos não utilizam o elemento label porque possuem atributos value (botões submit e reset), alt (botões de imagem) ou eles mesmo são elementos (botões) Botões Submit e Reset (input type="submit" ou input type="reset") Botões em imagens (input type="image") Campos de texto escondidos (input type="hidden") Botões de Script (elementos botão ou <input type="button">)

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

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

80 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. 80 Técnicas suficientes Vídeo ao vivo da estrada Fernão Dias, trecho norte, exibindo a situação do trânsito Situação D: Se conteúdo não textual é baseado em mídia de tempo (incluindo vídeo ao vivo e só de áudio ao vivo), um teste ou exercício que seria inválido se for apresentado em texto, ou destinado a criar uma experiência sensorial específicos:

81 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. 81 Fornecer um rótulo que descreva a finalidade do áudio ou vídeo ao vivo. Exemplos Um vídeo ao vivo de uma estrada com a seguinte descrição Vídeo ao vivo da estrada Fernão Dias, trecho norte, exibindo a situação do trânsito

82 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. 82 Técnicas suficientes Situação E: Se conteúdo não textual é um CAPTCHA:

83 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. 83 Fornecer texto alternativo que descreva o objetivo do CAPTCHA Objetivo: identificar o elemento não textual como um teste CAPTCHA, A partir do texto alternativo o usuário pode saber que o CAPTCHA exige completar uma ação ou tarefa ou que tipo de tarefa é essa. Quando existe uma alternativa do CAPTCHA, o texto alternativo deve incluir instruções sobre como encontrar essa versão alternativa. Exemplo: O texto alternativo do CAPTCHA diz: Digite as palavras da imagem

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

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

86 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. 86 Exemplos Digite as letras da imagem Ou digite as letras faladas no áudio Uma página contém um CAPTCHA para que o usuário possa seguir para a próxima etapa. A página inclui tanto uma tarefa visual, como escrever palavras exibidas em uma imagem e um áudio tarefa, como escrever letras faladas em um arquivo de áudio. Um usuário com deficiência auditiva que não puder passar o CAPTCHA áudio pode ser capaz de passar CAPTCHA visual.

87 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. 87 Exemplos Digite o código Ou Quanto é sete mais dois? Um formulário para comentários de um blog inclui um CAPTCHA visual antes do usuário enviar seus comentários. Além do CAPTCHA visual, ele inclui um CAPTCHA com um formulário com campos que pergunta quanto é dois mais sete? com um campo texto que permite que o usuário coloque a resposta correta.

88 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. 88 Técnicas suficientes Situação F: Se o elemento não textual deve ser ignorado pelas tecnologias assistivas:

89 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. 89 Utilizar atributo alt em branco e não aplicar o atributo title em elementos img que devam ser ignoradas por tecnologias assistivas Eliminando o atributo title e utilizando alt nulo (alt= ) indica que tecnologias assistivas podem ignorar a imagem com segurança. Nota: alt= é válido, mas alt= é recomendado. Ter o atributo ALT nulo não é a mesma coisa que eliminar o atributo ALT.

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

91 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. 91 Técnicas de textos curtos alternativos utilizadas nas técnicas suficiente citadas anteriormente: Utilizar atributo alt em imagens utilizadas como botões submit <form action=" method="post"> <input type="image" name="submit" src="button.gif" alt="submit" /> </form> Submit

92 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. 92 Técnicas de textos curtos alternativos utilizadas nas técnicas suficiente citadas anteriormente: Utilizar o atributo alt em elementos img <img src="newsletter.gif" alt="free newsletter. Get free recipes, news, and more. Learn more." />

93 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. 93 Técnicas de textos curtos alternativos utilizadas nas técnicas suficiente citadas anteriormente: Utilizar o corpo do elemento object <object classid=" <p>here is some text that describes the object and its operation.</p> </object>

94 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. 94 Técnicas de textos curtos alternativos utilizadas nas técnicas suficiente citadas anteriormente: Proporcionar textos alternativos para cada elemento area em mapas de imagens <img src="welcome.gif" usemap="#map1" alt="areas in the library. Select an area for more information on that area." /> <map id="map1" name="map1"> <area shape="rect" coords="0,0,30,30" href="reference.html" alt="reference" /> <area shape="rect" coords="34,34,100,100" href="media.html" alt="audio visual lab" /> </map>

95 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. 95 Técnicas de textos curtos alternativos utilizadas nas técnicas suficiente citadas anteriormente: Proporcionar texto no link que descreva o objetivo de um elemento link. <a href="routes.html"> Current routes at Boulders Climbing Gym </a> <a href="routes.html"> <img src="topo.gif" alt="current routes at Boulders Climbing Gym" /> </a>

96 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. 96 Técnicas de textos alternativos longos utilizadas nas técnicas suficiente citadas anteriormente: Utilizando o atributo longdesk <p> <img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/> </p>

97 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. 97 Recomendação 1.3 Adaptável: Criar conteúdos que possam ser apresentados de diferentes maneiras (por ex., um layout mais simples) sem perder informação ou estrutura.

98 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 Informações e Relações: As informações, a estrutura e as relações transmitidas através de apresentação podem ser determinadas de forma programática ou estão disponíveis no texto. (Nível A)

99 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. 99 Objetivo: Garantir que as informações e as relações que estão implícitas pelo formato visual ou auditivo sejam preservadas quando o formato apresentado mudar. Por exemplo, o formato da apresentação muda quando o conteúdo é lido por um leitor de tela ou quando uma folha de estilo do autor da página é substituída pela folha de estilo de um usuário

100 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. 100 Exemplos Um formulário contém vários campos obrigatórios. Os rótulos para os campos obrigatórios são exibidos em vermelho. Além disso, no final de cada rótulo há um asterisco, *. As instruções para preencher o formulário indicam que "todos os campos obrigatórios são exibidos em vermelho e marcados com um asterisco *.

101 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. 101 Exemplos Uma agenda com horários de ônibus lista os pontos de ônibus verticalmente na primeira coluna e os diversos ônibus na horizontal na primeira linha. Cada célula contém o horário que o ônibus estará no ponto. Os pontos de ônibus e as células dos ônibus são identificados com headers para suas respectivas linhas e colunas, para que as tecnologias assistivas possam determinar qual ônibus e que ponto estará associado com o horário de cada célula.

102 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. 102 Técnicas suficientes Separar informação e estrutura de apresentação para permitir diferentes apresentações O objetivo desta técnica é facilitar a interação de tecnologias assistivas com o conteúdo pela lógica que separa o conteúdo estrutural da codificação.

103 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. Exemplo HTML com CSS 103 Um documento HTML utiliza as características estruturais do HTML, como parágrafos, listas, títulos, etc, e evita a apresentação recursos como mudanças de fonte, etc. O CSS é usado para formatar o documento com base nas suas propriedades estruturais.

104 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. Técnicas suficientes 104 Utilizar marcação table para apresentar informações tabulares O objetivo desta técnica é apresentar informações tabulares de uma forma que preserve as relações dentro da informação, mesmo quando os usuários não podem ver a apresentação da tabela ou formato é alterado. A informação é considerada tabular lógica quando as relações entre os textos, números, imagens ou outros dados existem em duas dimensões (vertical e horizontal).

105 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. 105 Exemplos <table> <tr> <td> </td> <th>monday</th> <th>tuesday</th> <th>wednesday</th> </tr> <tr> <th>8:00-9:00</th> <td>meet with Sam</td> <td> </td> <td> </td> </tr> <tr> <th>9:00-10:00</th> <td> </td> <td> </td> <td>doctor Williams</td> </tr> </table>

106 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. Técnicas suficientes 106 Utilizar elemento caption para associar tabelas de dados O objetivo desta técnica é a de associar programaticamente legendas para tabelas de dados onde as legendas são fornecidas na apresentação.

107 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. Exemplo 107 Um calendário de eventos com legenda <table> <caption>schedule for the week of March 6</caption>... </table>

108 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. Técnicas suficientes 108 Utilizar o atributo summary do elemento table para dar uma visão geral da tabela de dados O objetivo desta técnica é proporcionar uma breve descrição de como os dados foram organizados na tabela ou uma breve explicação de como navegar na tabela.

109 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. Exemplo Uma tabela com um resumo, mas sem legenda 109 <table summary= Horários da rota 7 seguindo para o centro. O serviço começa às 4h00 e termina à meia-noite. Os pontos são listados na linha superior. Encontre o ponto mais próximo da sua localização e leia a coluna para encontrar que horas o ônibus passa."> <tr> <th scope="col">state & First</th> <th scope="col">state & Sixth</th> <th scope="col">state & Fifteenth</th> <th scope="col">fifteenth & Morrison</th> </tr> <td>4:00</td> <td>4:05</td> <td>4:11</td> <td>4:19</td> </tr> </table>

110 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. Exemplo Uma tabela de dados com resumo e legenda 110 Neste exemplo, tanto um atributo summary e o elemento caption são usados. O caption identifica a rota do ônibus. O summary ajuda pessoas cegas a entender como funciona a tabela. Leitores de tele lêem a legenda, seguido pelo resumo. <table summary= Horários da rota 7 seguindo para o centro. O serviço começa às 4h00 e termina à meia-noite. Os pontos são listados na linha superior. Encontre o ponto mais próximo da sua localização e leia a coluna para encontrar que horas o ônibus passa."> <caption>rota 7 Centro (Dias da semana)</caption> </table>

111 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. Técnicas suficientes 111 Utilizar o atributo scope para associar células de cabeçalho e células de dados em tabelas de dados. O objetivo desta técnica é associar células de cabeçalhos com células de dados, utilizando o atributo scope.

112 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> Exemplo Uma simples agenda 112

113 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. Técnicas suficientes 113 Utilizar os atributos ID e headers para associar células de dados com células de cabeçalhos em tabelas de dados. O objetivo desta técnica associar cada célula de dados (em uma tabela de dados) com os cabeçalhos

114 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. Uma tabela com múltiplas linhas de cabeçalhos Exemplo <table> <tr> <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> 114

115 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. Técnicas suficientes 115 Fornecer uma descrição para grupos de formulários usando os elementos fieldset e legend O objetivo desta técnica é fornecer um agrupamento semântico para os controles de formulários relacionados.

116 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. Um teste de múltipla escolha Exemplo <fieldset> <legend>the play <cite>hamlet</cite> was written by:</legend> <input type="radio" id="shakesp" name="hamlet" checked="checked" value="a"> <label for="shakesp">william Shakespeare</label><br /> <input type="radio" id="kipling" name="hamlet" value="b"> <label for="kipling">rudyard Kipling</label><br /> <input type="radio" id="gbshaw" name="hamlet" value="c"> <label for="gbshaw">george Bernard Shaw</label><br /> <input type="radio" id="hem" name="hamlet" value="d"> <label for="hem">ernest Hemingway</label><br /> <input type="radio" id="dickens" name="hamlet" value="e"> <label for="dickens">charles Dickens</label> </fieldset> 116

117 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. Um grupo de checkboxes Exemplo 117 <fieldset> <legend>i am interested in the following (check all that apply):</legend> <input type="checkbox" id="photo" name="interests" value="ph"> <label for="photo">photography</label><br /> <input type="checkbox" id="watercol" name="interests" checked="checked" value="wa"> <label for="watercol">watercolor</label><br /> <input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac"> <label for="acrylic">acrylic</label> </fieldset>

118 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. Controles relacionados logicamente Exemplo <form action=" method="post"> <fieldset> <legend>residential Address</legend> <label for="raddress">address: </label> <input type="text" id="raddress" name="raddress" /> <label for="rzip">postal/zip Code: </label> <input type="text" id="rzip" name="rzip" />...more residential address information... </fieldset> <fieldset> <legend>postal Address</legend> <label for="paddress">address: </label> <input type="text" id="paddress" name="paddress" /> <label for="pzip">postal/zip Code: </label> <input type="text" id="pzip" name="pzip" />...more postal address information... </fieldset> </form> 118

119 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. Técnicas suficientes Utilizar H1-H6 para identificar cabeçalhos 119 H1 H2 H3 H3 H2 H3 H3

120 120 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 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.

121 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 121 Recomendação 2.1 Acessível por Teclado: Fazer com que toda a funcionalidade fique disponível a partir do teclado.

122 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis Teclado: Toda a funcionalidade do conteúdo é operável através de uma interface de teclado sem a necessidade de qualquer espaço de tempo entre cada digitação individual, exceto quando a função subjacente requer entrada de dados que dependa da cadeia de movimento do usuário e não apenas dos pontos finais. (Nível A)

123 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 123 Exemplos Um programa de desenho Um programa de desenho permite aos usuários criar, redimensionar, posicionar e girar objetos a partir do teclado.

124 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 124 Exemplos Um PDA com um teclado opcional Um dispositivo de PDA que normalmente é operado através de uma caneta tem um teclado opcional que pode ser anexado. O conteúdo da Web é operável, porque foi concebido para trabalhar com acesso a teclado somente.

125 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 125 Técnicas suficientes Assegurar o controle de teclado usando uma das seguintes técnicas. Usar os controles de formulário e links (HTML) O objetivo desta técnica é usar o padrão de controles de formulário HTML e elementos de ligação para fornecer a operação via teclado e interoperabilidade de tecnologia assistiva de elementos de interface interativa do usuário.

126 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 126 Exemplos - Links No exemplo, o nome é o texto dentro do link, nesse caso "Exemplo do Site". <a href=" do site</a>

127 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 127 Exemplos - Links No exemplo, uma imagem dentro de um link, o atributo "alt" para a imagem fornece o nome. <a href=" <img src="example_logo.gif" alt="exemplo"> </a>

128 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 128 Exemplos - Links No exemplo, o nome está junto a elementos diferentes dentro do link para ler "Texto Exemplo" <a href=" <img src="example_logo.gif" alt= Texto">Exemplo </a>

129 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 129 Exemplos - Botões O exemplo usa o atributo value, neste caso, Salvar, Enviar, ou Reset como nome. <input type="button" value="salvar" /> <input type="submit" value= Enviar" /> <input type="reset" value="reset" />

130 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 130 Exemplos - Botões O exemplo usa o atributo "alt", neste caso, Salvar, como o nome <input type="image" src="save.gif" alt= Salvar" />

131 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 131 Exemplos - Formulários O elemento label está associado ao elemento de entrada através do atributo for que faz referência ao atributo id do elemento input. <label for="text_1">tipo de fruta</label> <input id="text_1" type="text" value= bananas">

132 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 132 Exemplos - Formulários No exemplo, no campo de entrada tem o mesmo papel e valor como o exemplo anterior, mas recebe o nome de atributo do title. <input id="text_1" type="text" value="bananas" title= Tipo de fruta">

133 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 133 Exemplos - Checkbox O elemento label está associado com o elemento de entrada através do atributo for que se refere ao atributo id do elemento de entrada. <input id="cb_1" type="checkbox" checked="checked"> <label for="cb_1">queijo</label>

134 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 134 Exemplos - Radiobox O nome do radiobuttom abaixo vem do elemento label. <input type="radio" name="color" id="r1" checked="checked"/> <label for="r1">red</label> <input type="radio" name="color" id="r2" /> <label for="r2">blue</label> <input type="radio" name="color" id="r3" /> <label for="r3">green</label>

135 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 135 Exemplos - Combobox O nome do elemento select do elemento label é Números". Esquecer de dar um nome para o select é um erro comum. <label for="s1">números</label> <select id="s1" size="1"> <option>um</option> <option selected="selected">dois</option> <option>três</option> </select>

136 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 136 Exemplos - Combobox O exemplo tem o mesmo nome, função e valor como anterior, mas define o nome com o atributo title sobre o elemento selecionado. <select id="s1" title= Números" size="1"> <option>um</option> <option selected="selected">dois</option> <option>três</option> </select>

137 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 137 Exemplos - Textarea O exemplo tem um campo "texto editável" do elemento textarea. O nome é "Digite aqui o seu discurso" a partir do elemento label. <label for="ta_1"> Digite aqui o seu discurso </label> <textarea id="ta_1" > Quatro e sete anos atrás </textarea>

138 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 138 Exemplos - Radio Fieldset O nome do campo radio vem do elemento legend. <fieldset> <legend>escolha uma cor:</legend> <input id="red" type="radio" value="red" /> <label for="red">vermelho</label><br /> <input id="blue" type="radio" value="blue" /> <label for="blue">azul</label><br /> <input id="green" type="radio" value="green" /> <label for="green">verde</label> </fieldset>

139 <a> <button> Elemento HTML Papel/função Nome Valor Estado link Botão atributo 'title', com texto dentro do elemento <a> ou atributo 'alt' se for link de imagem. Concatenados se o atributo de texto e imagem 'alt' são fornecidos Texto dentro do elemento <button> ou atributo 'title' <fieldset> Agrupamento Elemento <legend> <input type = "button", "submit", ou "reset"> Botão Atributo 'value <input type = "image"> Botão Atributo 'alt ou atributo 'title' <input type = "text"> <input type = "password"> <input type="checkbox"> <input type="radio"> <select> <textarea> Texto editável Texto editável checkbox Botão radio combobox, lista, ou lista dropdown Texto editável Elemento <label> associado a ele ou atributo 'title Elemento <label> associado a ele ou atributo 'title Elemento <label> associado a ele ou atributo 'title Elemento <label> associado a ele ou atributo 'title Elemento <label> associado a ele ou atributo 'title Elemento <label> associado a ele ou atributo 'title Atributo 'href' Atributo 'value Elemento <option> com atributo 'selected' marcado como "selected" Texto dentro do elemento <textarea> Atributo 'checked' Atributo 'checked'

140 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 140 Recomendação 2.4 Navegável: Fornecer formas de ajudar os usuários a navegar, localizar conteúdos e determinar o local onde estão. A intenção desta orientação é para ajudar os usuários a encontrar o conteúdo que eles precisam e permitir-lhes manter o controle de sua localização. Essas tarefas são muitas vezes mais difíceis para as pessoas com deficiência.

141 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis Ignorar Blocos: Está disponível um mecanismo para ignorar blocos de conteúdo que são repetidos em várias páginas Web. (Nível A)

142 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 142 Técnicas Suficientes Adicionar um link na parte superior de cada página que vai diretamente para a área de conteúdo principal O objetivo desta técnica é fornecer um mecanismo para contornar blocos de material que se repetem em várias páginas da Web, pulando diretamente para o conteúdo principal da página web.

143 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 143 Exemplos <p><a href="#content">pular para o conteúdo</a></p> <h2>main Navigation</h2> <ul> <li><a href="#subnav">sub Navigation</a></li> <li><a href="/a/">link A</a></li> <li><a href="/b/">link B</a></li> <li><a href="/c/">link C</a></li>... <li><a href="/j/">link J</a></li> </ul> <div> <h2 id="content">título do conteúdo</h2> <p>now that I have your attention...</p> </div> Um link Pular para o conteúdo principal

144 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 144 Exemplos <p><a href="#content">pular para o conteúdo</a></p> <h2>main Navigation</h2> <ul> <li><a href="#subnav">sub Navigation</a></li> <li><a href="/a/">link A</a></li> <li><a href="/b/">link B</a></li> <li><a href="/c/">link C</a></li>... <li><a href="/j/">link J</a></li> </ul> <div> <h2> <a name = content id="content"> </a> Título do conteúdo</h2> <p>now that I have your attention...</p> </div> O leitor de tela WebVox, desenvolvido pela UFRJ, muito utilizado por deficientes visuais no Brasil não lê o atributo id de um elemento para link. Para que o software entenda essa característica, é necessário o uso do atributo name.

145 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 145 Técnicas suficientes Agrupamento de blocos de material repetido de uma forma que pode ser ignorada, usando uma das seguintes técnicas:

146 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 146 Técnicas suficientes Fornecer elementos de cabeçalho no início de cada seção de conteúdo O objetivo desta técnica é usar títulos de seção para transmitir a estrutura do conteúdo.

147 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 147 Exemplos <h1>search Technical Periodicals</h1> <h2>search</h2> <form action="search.php"> <p><label for="searchinput">enter search topic: </label> <input type="text" size="30" id="searchinput"> <input type="submit" value="go"></p> </form> <h2>available Periodicals</h2> <div class="jlinks"> <a href="pcoder.com">professional Coder</a> <a href="algo.com">algorithms</a> <a href="jse.com">journal of Software Engineering</a> </div> <h2>search Results</h2>... search results are returned in this section... Este exemplo organiza as seções de uma página de pesquisa através da marcação de cada título de seção usando elementos h2.

148 Princípio 2: Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 148 Técnicas suficientes Usar elementos estruturais para agrupar links O objetivo desta técnica é para demonstrar como agrupar links em conjuntos lógicos. <a name="categories" id="categories"></a> <h2>product Categories</h2> <ul class="navigation"> <li><p><a href="kitchen.html">kitchen</a></p></li> <li><p><a href="bedbath.html">bed & Bath</a></p></li> <li><p><a href="dining.html">fine Dining</a></p></li> <li><p><a href="lighting.html">lighting</a></p></li> <li><p><a href="storage.html">storage</a></p></li> </ul> Usando listas para agrupar links Neste exemplo, os links são agrupados usando os elementos ul e li.

149 149 Princípio 3: Compreensível - A informação e a operação da interface de usuário têm de ser compreensíveis. 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.

150 Princípio 3: Compreensível - A informação e a operação da interface de usuário têm de ser compreensíveis. 150 Recomendação 3.1 Legível: Tornar o conteúdo de texto legível e compreensível. O objetivo dessa diretriz é permitir que o conteúdo de texto possa ser lido por usuários e por tecnologia assistiva, e garantir que as informações necessárias para a compreensão estejam disponível.

151 Princípio 3: Compreensível - A informação e a operação da interface de usuário têm de ser compreensíveis Linguagem da Página: A Linguagem humana pré-definida de cada página Web pode ser determinada de forma programática. (Nível A)

152 Princípio 3: Compreensível - A informação e a operação da interface de usuário têm de ser compreensíveis. 152 Técnicas suficientes 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> Este exemplo define o conteúdo de um documento HTML para ser no idioma francês.

153 Princípio 3: Compreensível - A informação e a operação da interface de usuário têm de ser compreensíveis. 153 Exemplo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" xml:lang="fr"> <head> <title>document écrit en français</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> </head> <body>...document écrit en français... </body> </html> Este exemplo define o conteúdo de um documento com XHTML 1.1 e tipo de conteúdo application/xhtml + xml no idioma francês.

154 Princípio 3: Compreensível - A informação e a operação da interface de usuário têm de ser compreensíveis. 154 Técnicas suficientes 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 <span lang= en >and english</span>... </body> </html> Podem ocorrer mudanças no idioma dentro da página

155 155 Princípio 4: Robusto - O conteúdo tem de ser robusto o suficiente para poder ser interpretado de forma concisa por diversos agentes do usuário, incluindo tecnologias assistivas. 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.

156 Princípio 4: Robusto - O conteúdo tem de ser robusto o suficiente para poder ser interpretado de forma concisa por diversos agentes do usuário, incluindo tecnologias assistivas. 156 Recomendação 4.1 Compatível: Maximizar a compatibilidade com atuais e futuros agentes de usuário, incluindo tecnologias assistivas. O objetivo desta diretriz é o de apoiar a compatibilidade com os agentes do usuário atuais e futuros, especialmente as tecnologias de apoio (TA).

157 Princípio 4: Robusto - O conteúdo tem de ser robusto o suficiente para poder ser interpretado de forma concisa por diversos agentes do usuário, incluindo tecnologias assistivas Análise: No conteúdo implementado utilizando linguagens de marcação, os elementos dispõem de marcas de início e de fim completas, os elementos estão encaixados de acordo com as respectivas especificações, os elementos não contêm atributos duplicados, e todos os IDs são exclusivos, exceto quando as especificações permitem estas características. (Nível A) Nota: Elementos que contem tags, tanto inicial quanto final, incompletas, ou seja, falta de um sinal de menor ou barra invertida ou a aplicação de um atributo incorreto, são considerados elementos incompletos.

158 Princípio 4: Robusto - O conteúdo tem de ser robusto o suficiente para poder ser interpretado de forma concisa por diversos agentes do usuário, incluindo tecnologias assistivas. 158 A intenção deste critério de sucesso é garantir que os agentes do usuário, incluindo tecnologias de apoio, possam interpretar e analisar o conteúdo corretamente.

159 Princípio 4: Robusto - O conteúdo tem de ser robusto o suficiente para poder ser interpretado de forma concisa por diversos agentes do usuário, incluindo tecnologias assistivas. 159 Técnicas suficientes 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.

160 Princípio 4: Robusto - O conteúdo tem de ser robusto o suficiente para poder ser interpretado de forma concisa por diversos agentes do usuário, incluindo tecnologias assistivas. 160 Técnicas suficientes Usando HTML de acordo com a especificação O objetivo desta técnica é o uso de HTML e XHTML de acordo com suas respectivas especificações.

161 Princípio 4: Robusto - O conteúdo tem de ser robusto o suficiente para poder ser interpretado de forma concisa por diversos agentes do usuário, incluindo tecnologias assistivas. 161 Técnicas suficientes Assegurar que abertura e fechamento de tags sejam utilizadas de acordo com a especificação (HTML) O objetivo desta técnica é evitar erros que são conhecidos por causar problemas para as tecnologias de apoio quando estão tentando analisar o conteúdo.

162 162 Validação

163 Validação 163 A validação da acessibilidade deve ser feita por meio de ferramentas automáticas e da revisão direta. Os métodos automáticos são geralmente rápidos, mas não são capazes de identificar todas as nuances da acessibilidade. A avaliação humana pode ajudar a garantir a clareza da linguagem e a facilidade da navegação. 1 - Utilizar uma ferramenta de acessibilidade automatizada, e uma ferramenta de validação de navegadores. Vale lembrar que as ferramentas de software não incidem sobre todas as questões da acessibilidade, tais como clareza de um texto, aplicabilidade de um equivalente textual.

164 Validação Validar a sintaxe (por ex., HTML, XML) Validar as folhas de estilo (por ex., CSS).

165 Validação Utilizar um navegador exclusivamente textual ou um emulador. 5 - Utilizar vários navegadores gráficos, com: - som e gráficos ativos; - sem gráficos; - sem som; - sem mouse; - sem carregar frames, programas interpretáveis, folhas de estilo ou applets. 6 - Utilizar vários navegadores, antigos e recentes. 7 - Utilizar um navegador de emissão automática de fala, um leitor de tela, software de ampliação, uma tela de pequenas dimensões.

166 Validação Utilizar corretores ortográficos e gramaticais. A eliminação de problemas gramaticais aumenta o grau de compreensão. 9 - Rever o documento, verificando sua clareza e simplicidade Peça a pessoas com deficiências que revejam os documentos.

167 Documentos de Apoio das WCAG Como cumprir as WCAG Uma referencia rápida, passível de personalização, às WCAG 2.0, que inclui todas as recomendações, critérios de sucesso e técnicas a serem utilizados pelos autores à medida que desenvolvem e avaliam o conteúdo da Web. Entendendo as WCAG Um guia para compreender e implementar as WCAG 2.0. Existe um pequeno documento intitulado "Noções sobre" para cada recomendação e critério de sucesso nas WCAG 2.0, bem como tópicos-chave. Técnicas para as WCAG Um conjunto de técnicas e falhas comuns, cada um num documento em separado que incluem uma descrição, exemplos, código fonte e testes. Os documentos das WCAG Um diagrama e uma descrição sobre a forma como os documentos técnicos estão relacionados e ligados.

168 DICAS RÁPIDAS PARA CONSTRUIR WEB SITES ACESSÍVEIS 168 Imagens e Animações. Use o atributo alt para descrever a função de cada elemento visual. Imagemaps. Use mapas client-side (o tag map) e texto para as regiões clicáveis. Multimídia. Inclua legendas e transcrições para o áudio, e descrições para o vídeo. Híperlinks. Utilize texto que faça sentido fora do contexto. Evite a frase "clique aqui". Organização da Página. Use cabeçalhos, listas e uma estrutura consistente. Use CSS para layout e estilo sempre que possível.

169 DICAS RÁPIDAS PARA CONSTRUIR WEB SITES ACESSÍVEIS 169 Scripts, applets e plug-ins. Para o caso de estarem desabilitados ou de não serem suportados pelo browser, forneça conteúdo alternativo. Frames. Use o tag noframes e empregue títulos significativos. Tabelas. Torne compreensível a leitura linha a linha. Resuma. Valide seu trabalho. Use as ferramentas, checklist e os guias disponíveis em

170 Estatísticas Pesquisa online com usuários de leitores de tela - Dados coletados entre dezembro de 2008 e Janeiro de Fonte: WebAIM - (organização sem fins lucrativos dentro do Centro para Pessoas com Deficiência na Universidade Estadual de Utah USA ) Fonte: WebAIM -

171 Estatísticas 171 Uso do pular links Resposta % Sempre que estiver disponível 22% Muitas vezes 16% As vezes 28% Raramente 19% Nunca 10% Sem resposta 4% Fonte: WebAIM -

172 Estatísticas 172 Eu navego usando cabeçalhos... Respostas % Sempre que estiver disponível 52% Muitas vezes 24% As vezes 14% Raramente 5% Nunca 2% Não Respondeu 3% Fonte: WebAIM -

173 Estatísticas 173 Imagens usadas apenas para melhorar o visual da página devem Resposta % Seja descrita pelo meu Leitor de Tela 59% Seja ignorada pelo meu Leitor de Tela 31% Sem opinião 10% Fonte: WebAIM -

174 Estatísticas 174 Texto ALT para a foto da Casa Branca deve ser Resposta % Foto da Casa Branca 80% A Casa Branca 12% Sem opinião 8% Fonte: WebAIM -