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

Tamanho: px
Começar a partir da página:

Download "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 https://www.planalto.gov.br/ccivil_03/_ato /2004/decreto/d5296.htm

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="http://example.com/prog/text-read" 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="http://www.example.com/analogclock.py"> <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="http://example.com/adduser" 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="www.example.com">exemplo 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="www.example.com"> <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="www.example.com"> <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" "http://www.w3.org/tr/html4/strict.dtd"> <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" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" 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" "http://www.w3.org/tr/html4/strict.dtd"> <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 -

WCAG 2.0: a nova versão de padrões web de acessibilidade

WCAG 2.0: a nova versão de padrões web de acessibilidade WCAG 2.0: a nova versão de padrões web de acessibilidade Reinaldo Ferraz Janeiro/2010 Acessibilidade na Web O que é acessibilidade na web? 2 Segundo a WAI: Acessibilidade na Web significa que pessoas com

Leia mais

Acessibilidade na web O caminho das pedras para construir sítios acessíveis. SECOP 2011 2 de setembro de 2011 Reinaldo Ferraz W3C.

Acessibilidade na web O caminho das pedras para construir sítios acessíveis. SECOP 2011 2 de setembro de 2011 Reinaldo Ferraz W3C. Acessibilidade na web O caminho das pedras para construir sítios acessíveis SECOP 2011 2 de setembro de 2011 Reinaldo Ferraz W3C.br Um pouco do W3C É um consórcio internacional, criado em 1994 por Tim

Leia mais

Acessibilidade na web

Acessibilidade na web Acessibilidade na web Front In Porto Alegre 18 de Agosto de 2012 Reinaldo Ferraz W3C.br @reinaldoferraz @w3cbrasil Um pouco do W3C Um pouco do W3C O W3C no Brasil conferenciaweb.w3c.br http://premio.w3c.br/

Leia mais

Acessibilidade na web O caminho das pedras para construir sítios acessíveis. Belo Horizonte MG 10 de abril de 2012 Reinaldo Ferraz W3C.

Acessibilidade na web O caminho das pedras para construir sítios acessíveis. Belo Horizonte MG 10 de abril de 2012 Reinaldo Ferraz W3C. Acessibilidade na web O caminho das pedras para construir sítios acessíveis Belo Horizonte MG 10 de abril de 2012 Reinaldo Ferraz W3C.br Um pouco do W3C É um consórcio internacional, criado em 1994 por

Leia mais

Tutorial Acessibilidade na Web Construindo Formulários e Tabelas acessíveis

Tutorial Acessibilidade na Web Construindo Formulários e Tabelas acessíveis Tutorial Acessibilidade na Web Construindo Formulários e Tabelas acessíveis FISL 12 Reinaldo Ferraz W3C Brasil Possibilitar o acesso a pessoas com deficiência Web para todos Todos mesmo! Web para todos,

Leia mais

Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. Reinaldo Ferraz. junho/2009. Acessibilidade na Web:

Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. Reinaldo Ferraz. junho/2009. Acessibilidade na Web: o caminho das pedras para construir sítios acessíveis. Reinaldo Ferraz junho/2009 O Consórcio World Wide Web (W3C) 2 É um consórcio internacional, criado em 1994 por Tim Berners-Lee com organizações filiadas,

Leia mais

DICAS PARA DESENVOLVER SITE ACESSÍVEL

DICAS PARA DESENVOLVER SITE ACESSÍVEL DICAS PARA DESENVOLVER SITE ACESSÍVEL Este arquivo contém dicas para o desenvolvimento de uma página acessível e de acordo com as normas W3C (World Wide Web). Para uma boa compreensão destas dicas é necessário

Leia mais

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível SIEP / RENAPI Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Setembro de 2009 Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Cuidados em geral Separar adequadamente

Leia mais

COMO FUNCIONA UM FORMULÁRIO

COMO FUNCIONA UM FORMULÁRIO FORMULÁRIOS Constitui-se numa das formas de a máquina cliente enviar informações para que um programa no servidor receba estes dados, processe-os e devolva uma resposta ao usuário, por meio do navegador,

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aulas 09 e 10 Fernando F. Costa nando@fimes.edu.br Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode

Leia mais

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes Desenvolvimento Web XHTML Formulários Prof. Bruno E. G. Gomes 2014 Introdução Um recurso bastante utilizado no desenvolvimento Web é o envio de dados de uma página para o servidor quando fornecemos informações,

Leia mais

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1

Leia mais

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário Sumário FORMULÁRIO EM HTML... 2 FORM... 2 ACTION... 2 METHOD... 2 INPUT... 2 INPUT TYPE TEXT... 2 INPUT TYPE PASSWORD... 2 CHECKBOX - Múltipla escolha... 4 RADIO - Escolha única... 4 Botões de ação...

Leia mais

FORMULÁRIOS ACESSÍVEIS

FORMULÁRIOS ACESSÍVEIS Ministério da Educação Secretaria de Educação Profissional e Tecnológica IFRS Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Sul NAV Núcleo de Acessibilidade Virtual FORMULÁRIOS ACESSÍVEIS

Leia mais

HTML -- Criação de Home Page

HTML -- Criação de Home Page PPáággi innaa 1 LISTAS Na linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definição (DL). Um detalhe

Leia mais

Acessibilidade no SIEP (Sistema de Informações da Educação Profissional e Tecnológica) Módulo de Acessibilidade Virtual CEFET Bento Gonçalves RS Maio 2008 ACESSIBILIDADE À WEB De acordo com Cifuentes (2000),

Leia mais

Ferramentas para Multimídia e Internet - 1486

Ferramentas para Multimídia e Internet - 1486 1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato

Leia mais

HTML: Listas, Tabelas e Formulários CST Sistemas para Internet

HTML: Listas, Tabelas e Formulários CST Sistemas para Internet HTML: Listas, Tabelas e Formulários CST Sistemas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) Listas Listas de itens são bastante

Leia mais

O W3C Futuro da Web HTML5. Março/2011 Web Expo Fórum

O W3C Futuro da Web HTML5. Março/2011 Web Expo Fórum O W3C Futuro da Web HTML5 Março/2011 Web Expo Fórum Web e W3C Tim Berners-Lee criou / propôs 2 a Web em 1989 (há 21 anos) http://www.w3.org/history/1989/proposal.html (URI + HTTP + HTML) Web e W3C 3 Tim

Leia mais

Formulários em HTML - O que são e para que servem

Formulários em HTML - O que são e para que servem Formulários em HTML - O que são e para que servem A tag - Os atributos action e method A primeira coisa que iremos fazer é usar a tag para podermos usarmos formulários. Antes de entrarmos

Leia mais

Os componentes de um formulário são: Form, Input, Select e AreaText

Os componentes de um formulário são: Form, Input, Select e AreaText HTML Formulário O elemento FORM, da HTML, é o responsável por prover documentos interativos no ambiente WWW de forma que uma pagina web exibida a um usuário possa submeter um conjunto de dados, informados

Leia mais

O código acima descreve o formulário com uma caixa de texto e dois botões

O código acima descreve o formulário com uma caixa de texto e dois botões Formulários Formulários permitem que os usuários interajam com um servidor Web passando informações. Assim, através da Web, se pode ler e gravar informações em Banco de Dados, gerando enormes possibilidades

Leia mais

Monday, January 23, 12. Introdução sobre Acessibilidade na web

Monday, January 23, 12. Introdução sobre Acessibilidade na web Introdução sobre Acessibilidade na web Acessibilidade na web é o consumo da informação por qualquer pessoa por qualquer tipo de meio de acesso. Para que serve a web? A web serve para compartilhar informação.

Leia mais

TECNOLOGIAS WEB AULA 8 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

TECNOLOGIAS WEB AULA 8 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD TECNOLOGIAS WEB AULA 8 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar os principais problemas de acessibilidade na Internet. Apresentar as principais deficiências e as tecnologias de apoio.

Leia mais

Prof. Erwin Alexander Uhlmann 1/7/2010

Prof. Erwin Alexander Uhlmann 1/7/2010 HTML 5 O html 5 é a nova versão do html 4. Foi desenvolvido para a interoperabilidade e padronização de plataformas e navegadores (motores). Compare as estruturas do html4 e do 5, abaixo: HTML 4 HTML 5

Leia mais

O W3C Futuro da Web HTML5 Web Semântica. Março/2011 SENAC Ribeirão Preto Road Show TI 2011

O W3C Futuro da Web HTML5 Web Semântica. Março/2011 SENAC Ribeirão Preto Road Show TI 2011 O W3C HTML5 Web Semântica Março/2011 SENAC Ribeirão Preto Road Show TI 2011 Web e W3C Tim Berners-Lee criou / propôs a Web em 1989 (há 21 anos) http://www.w3.org/history/1989/proposal.html (URI + HTTP

Leia mais

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web;

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; HTML Introdução Introdução ao HTML HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; É uma linguagem de hipertexto; Permite escrever texto de forma estruturada, que está

Leia mais

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web RNP REDE NACIONAL DE PESQUISA Centro Regional de Brasília CR/DF ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web Parte III - Hypertext

Leia mais

Maurício Samy Silva. Novatec

Maurício Samy Silva. Novatec Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...13 Introdução...15 Para quem foi escrito este livro... 15 Convenções tipográficas... 16 Site do livro... 18 Capítulo 1 O que é (X)HTML?...20

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB

INTRODUÇÃO AO DESENVOLVIMENTO WEB INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web HTML HyperText Markup Language XTML extensible HyperText Markup Language Elementos da Seção do Corpo Tabelas Formulários Professor Alan Cleber Borim www.alanborim.com.br Índice.

Leia mais

Desenvolvimento de Aplicações Web. Prof. José Eduardo A. de O. Teixeira www.vqv.com.br / j.edu@vqv.com.br

Desenvolvimento de Aplicações Web. Prof. José Eduardo A. de O. Teixeira www.vqv.com.br / j.edu@vqv.com.br Desenvolvimento de Aplicações Web Programação Contextualização de aplicações Web: navegadores e servidores como interpretadores, tecnologias do lado do cliente (XHTML, CSS, Javascript) e do lado do servidor

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

PROGRAMAÇÃO WEB DO LADO DO CLIENTE

PROGRAMAÇÃO WEB DO LADO DO CLIENTE PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets,

Leia mais

Mais sobre uso de formulários Site sem Ajax

Mais sobre uso de formulários Site sem Ajax Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2 Site usando Ajax para preencher

Leia mais

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN Sumário 1. Introdução...1 2. Tags...1 3. HTML...1 4. Cabeça, Corpo

Leia mais

Aplicativos para Internet Aula 01

Aplicativos para Internet Aula 01 Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx

Leia mais

7. Formulários em XHTML

7. Formulários em XHTML Programação para Internet I 7. Formulários em XHTML Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt Os formulários constituem uma das principais formas de interacção entre clientes e servidores. São

Leia mais

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS.

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS. UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Programação de Computadores

Leia mais

Dessa forma, o uso de elementos HTML que estruturem de forma clara a tabela auxiliam a sua leitura por pessoas que se utilizam leitores de tela.

Dessa forma, o uso de elementos HTML que estruturem de forma clara a tabela auxiliam a sua leitura por pessoas que se utilizam leitores de tela. Tabelas Acessíveis O objetivo do uso de tabelas em documentos HTML é a apresentação de dados tabulares. Para tanto, existem diversos elementos para formatar as tabelas de forma clara, tanto para o usuário

Leia mais

Deficiências. Deficiência Física Deficiência Auditiva Deficiência Visual Deficiência Mental Deficiência Múltipla. Tem dificuldade para:

Deficiências. Deficiência Física Deficiência Auditiva Deficiência Visual Deficiência Mental Deficiência Múltipla. Tem dificuldade para: Deficiências Deficiência Física Deficiência Auditiva Deficiência Visual Deficiência Mental Deficiência Múltipla Tem dificuldade para: ver a tela usar o mouse usar o teclado ler um texto ouvir um som navegar

Leia mais

ENGENHARIA DE USABILIDADE Unidade V Acessibilidade à Web. Luiz Leão luizleao@gmail.com http://www.luizleao.com

ENGENHARIA DE USABILIDADE Unidade V Acessibilidade à Web. Luiz Leão luizleao@gmail.com http://www.luizleao.com Luiz Leão luizleao@gmail.com http://www.luizleao.com Conteúdo Programático Conceitos e Importância Projeto e desenvolvimento de Web acessível Acessibilidade É o processo e as técnicas usadas para criar

Leia mais

Web Design Aula 09: Formulários

Web Design Aula 09: Formulários Web Design Aula 09: Formulários Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Roteiro Tag ... Tag Tag ... Rádio Checkbox Atributo name Form Um

Leia mais

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos.

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. 1 Índice 1 - INTRODUÇÃO 3 2 - TAGS 3 3 - EDITORES 3 4 - SALVANDO UMA PAGINA HTML 3 5 - INICIANDO UMA PÁGINA 3 6 - CONSTRUINDO

Leia mais

Adaptação de materiais digitais. Manuela Francisco manuela.amado@gmail.com

Adaptação de materiais digitais. Manuela Francisco manuela.amado@gmail.com Adaptação de materiais digitais Manuela Francisco manuela.amado@gmail.com Plano da sessão Tópicos Duração Documentos acessíveis: porquê e para quem. Diretrizes de acessibilidade Navegabilidade, legibilidade

Leia mais

Uso de Padrões Web. maio/2009

Uso de Padrões Web. maio/2009 Uso de Padrões Web maio/2009 Internet e Web, passado, presente e futuro 2 Internet e Web, passado, presente e futuro 3 A Evolução da Web Pré Web Passado web 1.0 Presente web 2.0 Futuro web 3.0 4 A Evolução

Leia mais

Acessibilidade na Web

Acessibilidade na Web Acessibilidade na Web Departamento de Computação - UFS Tópicos Especiais em Sistemas de Informação Lucas Augusto Carvalho lucasamcc@dcomp.ufs.br Prof. Rogério Vídeo Custo ou Benefício? http://acessodigital.net/video.html

Leia mais

Fazendo a Web falar: HTML5, WAI-ARIA e NVDA. Reinaldo Ferraz W3C Brasil

Fazendo a Web falar: HTML5, WAI-ARIA e NVDA. Reinaldo Ferraz W3C Brasil Fazendo a Web falar: HTML5, WAI-ARIA e NVDA Reinaldo Ferraz W3C Brasil Em breve Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão Deficiência auditiva Deficiência motora Estatísticas

Leia mais

VPAT (Voluntary Product Accessibility Template, Modelo de Acessibilidade de Produto) do eportfolio da Desire2Learn Maio de 2013 Conteúdo

VPAT (Voluntary Product Accessibility Template, Modelo de Acessibilidade de Produto) do eportfolio da Desire2Learn Maio de 2013 Conteúdo VPAT (Voluntary Product Accessibility Template, Modelo de Acessibilidade de Produto) do eportfolio da Desire2Learn Maio de 2013 Conteúdo Introdução Recursos de acessibilidade principais Navegação usando

Leia mais

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Laboratório de Práticas

Leia mais

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como criar formulários em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte por quaisquer

Leia mais

FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT)

FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT) FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT) Formulários (FORMS): Um formulário é uma área que pode conter elementos de formulário. Elementos de formulário são elementos que permitem ao usuário

Leia mais

Pré-requisito Treinamento de Lógica de Programação, ou conhecimento equivalente.

Pré-requisito Treinamento de Lógica de Programação, ou conhecimento equivalente. 1 HTML5 e 3 Descrição Aprenda no curso de HTML os conceitos essenciais para a criação de páginas web, junto com os novos recursos e possibilidades que o HTML5 e 3 oferecem para a criação de sites com códigos

Leia mais

#Aula Nº 1 Introdução webstandards.samus.com.br Vinicius Fiorio Custódio samus@samus.com.br

#Aula Nº 1 Introdução webstandards.samus.com.br Vinicius Fiorio Custódio samus@samus.com.br #Aula Nº 1 Introdução webstandards.samus.com.br Vinicius Fiorio Custódio samus@samus.com.br #O que é Web Standards? São padrões de desenvolvimento web recomendados pela W3C que visam a implementação de

Leia mais

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Programação Web Prof. Wladimir HTML - Formulários @wre2008 1 Sumário Formulários HTML @wre2008 2 Formulários: Muitos elementos de um formulário html são definidos pela tag . Cada tipo de elemento

Leia mais

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário Introdução HyperText Markup Language HTML Formulário Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ O usuário interage com os serviços

Leia mais

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com Luiz Leão luizleao@gmail.com http://luizleao.com CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG S HTML LINGUAGEM HTML Hypertext Markup Language Interpretada pelo navegador Não linearidade da informação Formatação

Leia mais

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira WebDesign Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo

Leia mais

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

Tecnologias para apresentação de dados - HTML. Aécio Costa

Tecnologias para apresentação de dados - HTML. Aécio Costa Tecnologias para apresentação de dados - HTML Aécio Costa Apresentação de Dados na Web Tecnologias client-side HTML CSS JavaScript HyperText Markup Language Uma linguagem de marcação utilizada para produzir

Leia mais

Técnicas e processos de produção. Profº Ritielle Souza

Técnicas e processos de produção. Profº Ritielle Souza Técnicas e processos de produção Profº Ritielle Souza INTRODUÇÃO HTML Sigla em inglês para Hyper Text Markup Language, traduzindo daria algo como Linguagem para marcação de Hipertexto. E o que seria o

Leia mais

TECNOLOGIAS WEB AULA 7

TECNOLOGIAS WEB AULA 7 TECNOLOGIAS WEB AULA 7 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar as principais tags utilizadas na construção de formulários em HTML. Compreender as principais estruturas formadas com as

Leia mais

Copyright 2013 by Desire2Learn Incorporated. Desire2Learn e seus logotipos relacionados são marcas registradas da Desire2Learn Incorporated.

Copyright 2013 by Desire2Learn Incorporated. Desire2Learn e seus logotipos relacionados são marcas registradas da Desire2Learn Incorporated. Lista de Verificação WCAG 2.0 (Web Content Accessibility Guidelines, Diretrizes de Acessibilidade do Conteúdo da Web) do eportfolio da Desire2Learn 13 de março de 2013 Conteúdo Introdução Recursos de acessibilidade

Leia mais

Acessibilidade na Web Cesár Bomfim Brasília 15 de Março

Acessibilidade na Web Cesár Bomfim Brasília 15 de Março Acessibilidade na Web Cesár Bomfim Brasília 15 de Março Avaliação Passos para Site Acessível -Seguir padrões Web; -Seguir as diretrizes e recomendações de acessibilidade; -Realizar avaliação de acessibilidade.

Leia mais

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver

Leia mais

MÓDULO 1 - xhtml Básico

MÓDULO 1 - xhtml Básico MÓDULO 1 - xhtml Básico 1. Introdução xhtml significa Extensible Hypertext Markup Language (Linguagem de Marcação Hipertextual Extensível) e é a linguagem de descrição de documentos usada na World Wide

Leia mais

Introdução. História. Como funciona

Introdução. História. Como funciona Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado

Leia mais

Roteiro de Estudos e Atividades Avaliativas HTML

Roteiro de Estudos e Atividades Avaliativas HTML Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar

Leia mais

Acessibilidade Web. Ivo Gomes

Acessibilidade Web. Ivo Gomes Acessibilidade Web Ivo Gomes 1 O que é a Acessibilidade Web? Permi'r que todos os u'lizadores tenham acesso ao site. Independentemente de terem alguma necessidade especial. Independentemente de terem algum

Leia mais

0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento.

0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento. IFES - Campus Cachoeiro de Itapemirim-ES Curso Técnico em Informática Disciplina: Programação Web Professor: Flávio Izo e Rafael Vargas Data: 07/04/2015 Aluno: GABARITO Valor: 12,5 Conteúdo: HTML + Formulários

Leia mais

Colégio da Policia Militar do Estado do Tocantins. HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa

Colégio da Policia Militar do Estado do Tocantins. HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa Colégio da Policia Militar do Estado do Tocantins HTML5 e CSS3 Formulários Prof. Gleison Batista de Sousa Formulários Avançando no HTML e CSS Nesta aula vamos aprender como criar uma página de contato

Leia mais

Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique.

Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique. Lista de Revisão 1. Nos sistemas web, geralmente os usuários apresentam dois problemas típicos, a desorientação e a sobrecarga cognitiva. Discorra sobre esses problemas. 2. Apresente as principais diferenças

Leia mais

Mitos da Acessibilidade Web

Mitos da Acessibilidade Web SAPO Codebits 2008 Magda Joana Silva magdajoanasilva@gmail.com Acessibilidade Web igualdade de acesso a Web sites a pessoas com limitações Acessibilidade Web igualdade de acesso a Web sites a pessoas com

Leia mais

Formulários HTML. Envio de Informação para o servidor

Formulários HTML. Envio de Informação para o servidor Programação Na Web Formulários HTML Envio de Informação para o servidor 1 António Gonçalves Agenda Envio de dados através de formulários A Marca FORM Controle para Text Botões tipo Push Botões Check boxes

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com No início A Web é criada em 1989, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.

Leia mais

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont APOSTILA Curso de HTML com PHP HTML Pablo Dapont PET Computação - sala 202 Prédio 43424 ( prédio dos laboratórios ) Instituto de Informática - UFRGS email : pet@inf.ufrgs.br Av. Bento Gonçalves, 9500 bloco

Leia mais

Observações importantes:

Observações importantes: Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB Gabarito AD1 2 semestre de 2014. Observações importantes:

Leia mais

Helder da Rocha. Criação de. Web Sites II. Servidor Web Aplicações Web Programas CGI e SSI. Rev.: CWS2-04-2000/01 A4

Helder da Rocha. Criação de. Web Sites II. Servidor Web Aplicações Web Programas CGI e SSI. Rev.: CWS2-04-2000/01 A4 Helder da Rocha Criação de Web Sites II Servidor Web Aplicações Web Programas CGI e SSI Rev.: CWS2-04-2000/01 A4 Copyright 2000 por Helder Lima Santos da Rocha. Todos os direitos reservados. Os direitos

Leia mais

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML

Leia mais

HTML5. Prof. Salustiano Rodrigues de Oliveira saluorodrigues@gmail.com www.profsalu.com.br

HTML5. Prof. Salustiano Rodrigues de Oliveira saluorodrigues@gmail.com www.profsalu.com.br HTML5 Prof. Salustiano Rodrigues de Oliveira saluorodrigues@gmail.com www.profsalu.com.br HTML5 HTML5 é considerada a próxima geração do HTML e suas funcionalidades inovadoras o tornam uma alternativa

Leia mais

HTML - 7. Vitor Vaz da Silva Paula Graça

HTML - 7. Vitor Vaz da Silva Paula Graça HTML - 7 Vitor Vaz da Silva Paula Graça 1 Formulários Os formulários forms no HTML, são utilizados para a introdução de dados de uma determinada aplicação Os programas JavaScript têm como um dos seus maiores

Leia mais

Um Mergulho nas Recomendações de Acessibilidade para Conteúdo Web do W3C (WCAG2.0)

Um Mergulho nas Recomendações de Acessibilidade para Conteúdo Web do W3C (WCAG2.0) UNIVERSIDADE FEDERAL DO ESTADO DO RIO DE JANEIRO CENTRO DE CIÊNCIAS EXATAS E TECNOLOGIA Relatórios Técnicos do Departamento de Informática Aplicada da UNIRIO n 0012/2011 Um Mergulho nas Recomendações de

Leia mais

Observações importantes:

Observações importantes: Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB AD1 1 semestre de 2014. Observações importantes:

Leia mais

Apostila Active Brasil de Webdesign. Daniel de Menezes Gularte Omar Queiroz. 2002 Apostila de Webdesign ver. 1 rev. 0. Curso de Web Design

Apostila Active Brasil de Webdesign. Daniel de Menezes Gularte Omar Queiroz. 2002 Apostila de Webdesign ver. 1 rev. 0. Curso de Web Design APOSTILA WEBDESIGN Apostila Active Brasil de Webdesign Daniel de Menezes Gularte Omar Queiroz A livre distribuição dessa cópia está proibida, sendo de material exclusivo do curso de Webdesign da Active

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável

Leia mais

PROGRAMAÇÃO PARA INTERNET HTML

PROGRAMAÇÃO PARA INTERNET HTML PROGRAMAÇÃO PARA INTERNET HTML Prof. Rafael Gross INTRODUÇÃO Quando acessamos uma página web, estamos interessados na informação contida nessa página. Essa informação pode estar na forma de texto, imagem

Leia mais

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br Desenvolvimento Web Saymon Yury C. Silva Analista de Sistemas http://www.saymonyury.com.br Vantagens Informação em qualquer hora e lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada

Leia mais

HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).

HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.). HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a

Leia mais

CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael

CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael CSS ETEC FRANCISCO MORATO Professores: Kelly e Rafael 2015 Agenda Introdução; Website Layouts; CSS; Referências. 2 Website Layouts A maioria dos sites têm colocado o seu conteúdo em várias colunas; Ex.:

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção

Leia mais

02 - Usando o SiteMaster - Informações importantes

02 - Usando o SiteMaster - Informações importantes 01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,

Leia mais

WAI-ARIA, UMA APROXIMAÇÃO

WAI-ARIA, UMA APROXIMAÇÃO WAI-ARIA, UMA APROXIMAÇÃO Fernández Rivera, Javier Tradução: Leondeniz Candido de Freitas Versão em espanhol disponível em http://www.nosolousabilidad.com/articulos/wai_aria.htm Resumo: introdução ao ARIA

Leia mais

Lista e Tabelas. Fundamentos da Linguagem Web

Lista e Tabelas. Fundamentos da Linguagem Web Lista e Tabelas Fundamentos da Linguagem Web Bruno Angelo Medeiros Março de 2015 LISTAS O que são? Tipos Ordenadas Não ordenadas De definição Exemplos Exercícios LISTAS - O QUE SÃO? São uma forma de organização

Leia mais

"O poder da Web está na sua universalidade. O acesso por todas as pessoas, não obstante a sua incapacidade, é um aspecto essencial.

O poder da Web está na sua universalidade. O acesso por todas as pessoas, não obstante a sua incapacidade, é um aspecto essencial. "O poder da Web está na sua universalidade. O acesso por todas as pessoas, não obstante a sua incapacidade, é um aspecto essencial." (Tim Berners-Lee - Diretor do W3C) Acessibilidade na Web 1 - O que é

Leia mais

Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript

Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript 1 Tecnologia WEB I Prof. Erwin Alexander Uhlmann Dos princípios do HTML, estruturação com CSS e automação com Javascript UHLMANN, Erwin Alexander. Dos princípios do HTML, estruturação com CSS e automação

Leia mais

Home Page da Estação Automática do IF-SC

Home Page da Estação Automática do IF-SC Home Page da Estação Automática do IF-SC Ana Paula Jorge Fraga Email: anaa_fraga@hotmail.com Artur da Silva Querino E-mail: arturquerino@gmail.com Kathilça Lopes de Souza E-mail: kathii16@hotmail.com Rayana

Leia mais

QUEM SOU? ( IFPB ) Formado em Sistemas para Internet. Analista de Sistemas, Dynavideo. Pesquisador, NAV - IFPB

QUEM SOU? ( IFPB ) Formado em Sistemas para Internet. Analista de Sistemas, Dynavideo. Pesquisador, NAV - IFPB QUEM SOU? ( IFPB ) Formado em Sistemas para Internet Analista de Sistemas, Dynavideo Projeto Intercâmbio para Conteúdo de TV Pública Pesquisador, NAV - IFPB Produção e acessibilização de aplicações educacionais.

Leia mais

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL.

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Procuraremos mostrar os principais procedimentos para fazer um cadastro de registros numa base de dados MySQL utilizando a linguagem

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Prof. André Yoshimi Kusumoto andrekusumoto.unip@gmail.com http://www.kusumoto.com.br Apresentação Carga horária mensal:

Leia mais