Formulários electrónicos na WEB

Apresentação em tema: "Formulários electrónicos na WEB"— Transcrição da apresentação:

1 Formulários electrónicos na WEB

2 Tópicos: Parte Um: Sociedade da Informação – desafios e oportunidades
Parte Dois: A caminho da democracia electrónica ? Parte Três: A acessibilidade universal Parte Quatro: Formulários electrónicos

3 A Sociedade da Informação
Parte I

4 Sociedade da Informação
Riscos Novas formas de alfabetismo Novas formas de poder Exclusão social Oportunidades Correcção de assimetrias (geográficas, sociais) Inclusão e coesão social

5 A caminho da democracia electrónica ?
Parte II

6 A caminho da democracia electrónica ?

7 A caminho da democracia electrónica ?
4 Fases: 1. Presença institucional Basicamente informação 2. Interacção Interactividade limitada Aplicações básicas de pesquisa 3. Transacção Portais Serviços básicos 4. Transformação Participação em referendos e eleições

8

9

10

11

12 A acessibilidade universal
Parte III

13 Acessibilidade

14 Acessibilidade

15 A acessibilidade universal
Aspectos críticos Tabelas (de dados e de apresentação) Frames Forms (formulários) Scripts

16 Formulários electrónicos
Parte IV

17

18

19 Princípio genérico Disponibilizar um equivalente em texto para cada elemento não-textual (“alt”, “longdesc”).

20 Princípio genérico Este princípio aplica-se a: imagens
representações gráficas de texto (incluíndo símbolos) zonas de imagens interactivas, animações (ex. GIF’s animados) applets e outros objectos representações em ASCII frames

21 Princípio genérico Este princípio aplica-se a: scripts
imagens usadas em listas espaçadores botões gráficos sons (tocados ou não com interacção do utilizador), ficheiros de som, pistas áudio de video video

22 Acessibilidade por teclado
Garantir a interacção por teclado. Criar uma ordem lógica de sequência entre os componentes. TABINDEX Atalhos de teclado para os links, grupos ou componentes mais importantes. ACCESSKEY

23 Acessibilidade por teclado
Exemplos: <FORM action="submit" method="post"> <P> <INPUT tabindex="2" type="text" name=“campo1"> <INPUT tabindex="1" type="text" name=“campo2"> <INPUT tabindex="3" type="submit" name=“Enviar"> </FORM>

24 Acessibilidade por teclado
Exemplos: <FORM action="submit" method="post"> <P> <LABEL for="userid" accesskey="U">Nome</LABEL> <INPUT type="text" id="userid"> </FORM>

25 Agrupar os componentes
dividir grandes blocos de informação em grupos lógicos mais pequenos sempre que adequado FIELDSET LEGEND

26 Agrupar os componentes
Exemplo: <FORM action=" method="post"> <FIELDSET> <LEGEND>Informação Pessoal</LEGEND> <LABEL for=“nome">Nome: </LABEL> <INPUT type="text" id="nome” tabindex="1"> <LABEL for=“apelido">Apelido: </LABEL> <INPUT type="text" id=“apelido" tabindex="2"> ... mais informação Pessoal... </FIELDSET> <LEGEND>História clinica</LEGEND> ...informação sobre a história clinica... </FORM>

27

28 Agrupar os componentes
OPTGROUP para agrupar elementos OPTION dentro de um SELECT 

29 Identificar os componentes
Associar explicitamente labels com os respectivos componentes Para todos os componentes com labels implícitas assegurar que a label está correctamente posicionada. Preceder o controlo por uma LABEL que o deve preceder na mesma linha ou na linha imediatamente anterior

30 Identificar os componentes
Exemplos: <LABEL for=“nome">Nome: <INPUT type="text" id=“nome" tabindex="1"> </LABEL>

31 Botões gráficos Usar uma imagem para um componente botão (ex. com o elemento INPUT ou BUTTON) não o torna necessariamente inacessível – desde que seja disponibilizado um texto equivalente. De qualquer modo, um botão submit gráfico criado com INPUT type="image" resulta numa imagem interactiva do tipo server-side.

32 Técnicas para componentes específicos
Incluir texto por defeito nas caixas de texto VALUE=“mensagem” Disponibilizar texto alternativo para imagens usadas como botões ‘submit’ ALT=“Enviar”

33 Técnicas para componentes específicos
Exemplo: <FORM action=" method="post"> <P> <TEXTAREA name=nome rows="20" cols="80"> Por favor escreva aqui o seu nome. </TEXTAREA> <INPUT type="submit" value=“Enviar"> <INPUT type="reset"> </P> </FORM>

34

35 Acessibilidade por teclado
Exemplos: <FORM action=" method="post"> <P> <INPUT type="image" name=submit src="button.gif" alt="Enviar"> </FORM>

36 Assegurar a compatibilidade prévia
Nalguns navegadores da versão HTML 3.2 O elemento BUTTON não aparece O elemento INPUT com type="button" aparece como um campo de texto

37

38

39

40 “I firmly believe that the only disability in life is a bad attitude”
“Estou plenamente convicto de que a única desvantagem face à vida é uma atitude negativa” Scott Hamilton

41 Recursos Bibliografia Ferramentas de teste
Iniciativa para a acessibilidade da Web do W3C: Ferramentas de teste Bobby: Emulador de navegador de texto Lynx Viewer:

42 Recursos ‘Saites’, aliás sítios, de referência
Página da Acesso: GUIA - Grupo Português pelas Iniciativas em Acessibilidade

43 Esta apresentação está disponível em: http://www.infocid.pt/rogerio/