40
Formulários Formulários electrónicos na WEB electrónicos na WEB [email protected] [email protected]

Formulários electrónicos na WEB [email protected]

Embed Size (px)

Citation preview

Page 1: Formulários electrónicos na WEB rogerio.costa@infocid.pt

Formulários electrónicos Formulários electrónicos na WEBna WEB

[email protected]@infocid.pt

Page 2: Formulários electrónicos na WEB rogerio.costa@infocid.pt

Tópicos:Tópicos:

Parte Um:Parte Um: Sociedade da Informação – Sociedade da Informação –

desafios e oportunidadesdesafios e oportunidades

Parte Dois:Parte Dois: A caminho da democracia A caminho da democracia

electrónica ?electrónica ?

Parte Três:Parte Três: A acessibilidade universal A acessibilidade universal

Parte Quatro:Parte Quatro: Formulários Formulários

electrónicoselectrónicos

Page 3: Formulários electrónicos na WEB rogerio.costa@infocid.pt

A Sociedade da A Sociedade da InformaçãoInformação

Parte IParte I

Page 4: Formulários electrónicos na WEB rogerio.costa@infocid.pt

Sociedade da InformaçãoSociedade da Informação

RiscosRiscos Novas formas de alfabetismoNovas formas de alfabetismo Novas formas de poderNovas formas de poder Exclusão socialExclusão social

OportunidadesOportunidades Correcção de assimetrias (geográficas, Correcção de assimetrias (geográficas,

sociais)sociais) Inclusão e coesão socialInclusão e coesão social

Page 5: Formulários electrónicos na WEB rogerio.costa@infocid.pt

A caminho da A caminho da democracia electrónica ?democracia electrónica ?

Parte IIParte II

Page 6: Formulários electrónicos na WEB rogerio.costa@infocid.pt

A caminho da democracia A caminho da democracia electrónica ?electrónica ?

Page 7: Formulários electrónicos na WEB rogerio.costa@infocid.pt

A caminho da democracia A caminho da democracia electrónica ?electrónica ?4 Fases:4 Fases:

1. Presença institucional1. Presença institucional Basicamente informaçãoBasicamente informação

2. Interacção2. Interacção Interactividade limitadaInteractividade limitada Aplicações básicas de pesquisaAplicações básicas de pesquisa

3. Transacção3. Transacção PortaisPortais Serviços básicosServiços básicos

4. Transformação4. Transformação Participação em referendos e eleiçõesParticipação em referendos e eleições

Page 8: Formulários electrónicos na WEB rogerio.costa@infocid.pt
Page 9: Formulários electrónicos na WEB rogerio.costa@infocid.pt
Page 10: Formulários electrónicos na WEB rogerio.costa@infocid.pt
Page 11: Formulários electrónicos na WEB rogerio.costa@infocid.pt
Page 12: Formulários electrónicos na WEB rogerio.costa@infocid.pt

A acessibilidade A acessibilidade universaluniversal

Parte IIIParte III

Page 13: Formulários electrónicos na WEB rogerio.costa@infocid.pt

AcessibilidadeAcessibilidade

Page 14: Formulários electrónicos na WEB rogerio.costa@infocid.pt

AcessibilidadeAcessibilidade

Page 15: Formulários electrónicos na WEB rogerio.costa@infocid.pt

A acessibilidade universalA acessibilidade universal

Aspectos críticosAspectos críticos Tabelas (de dados e de apresentação)Tabelas (de dados e de apresentação) FramesFrames Forms (formulários)Forms (formulários) ScriptsScripts

Page 16: Formulários electrónicos na WEB rogerio.costa@infocid.pt

Formulários electrónicosFormulários electrónicos

Parte IVParte IV

Page 17: Formulários electrónicos na WEB rogerio.costa@infocid.pt
Page 18: Formulários electrónicos na WEB rogerio.costa@infocid.pt
Page 19: Formulários electrónicos na WEB rogerio.costa@infocid.pt

Princípio genéricoPrincípio genérico

Disponibilizar um equivalente em texto Disponibilizar um equivalente em texto para cada elemento não-textual para cada elemento não-textual (“alt”, “longdesc”(“alt”, “longdesc”). ).

Page 20: Formulários electrónicos na WEB rogerio.costa@infocid.pt

Princípio genéricoPrincípio genérico

Este princípio aplica-se aEste princípio aplica-se a:: imageimagennss representações representações grgráficas de textoáficas de texto

(inclu(incluíínndodo s síímbolmboloos)s) zonas de zonas de imageimagens interactivasns interactivas, ,

animaanimaçõesções ((exex. GIF. GIF’’ss animaanimadosdos))

applets applets e outros e outros objectobjectooss representações em representações em ASCIIASCII frames frames

Page 21: Formulários electrónicos na WEB rogerio.costa@infocid.pt

Princípio genéricoPrincípio genérico

Este princípio aplica-se aEste princípio aplica-se a:: scriptsscripts imageimagenns uss usaaddas em listasas em listas eespaspaçadoresçadores botões gráficosbotões gráficos sons (sons (tocados ou não com interacção do tocados ou não com interacção do

utilizadorutilizador), ), ficheiros de somficheiros de som, , pistas áudio pistas áudio de de videovideo

videovideo

Page 22: Formulários electrónicos na WEB rogerio.costa@infocid.pt

Acessibilidade por tecladoAcessibilidade por teclado

Garantir a interacção por teclado.Garantir a interacção por teclado. Criar uma ordem lógica de sequência Criar uma ordem lógica de sequência

entre os componentes.entre os componentes. TABINDEXTABINDEX

Atalhos de teclado para os links, Atalhos de teclado para os links, grupos ou componentes mais grupos ou componentes mais importantes.importantes. ACCESSKEYACCESSKEY

Page 23: Formulários electrónicos na WEB rogerio.costa@infocid.pt

Acessibilidade por tecladoAcessibilidade por teclado

Exemplos:Exemplos:

<FORM action="submit" method="post"><P> <LABEL for="userid" accesskey="U">Nome</LABEL> <INPUT type="text" id="userid"> </FORM>

Page 24: Formulários electrónicos na WEB rogerio.costa@infocid.pt

Agrupar os componentesAgrupar os componentes

dividir grandes blocos de informação dividir grandes blocos de informação em grupos lógicos mais pequenos em grupos lógicos mais pequenos sempre que adequadosempre que adequado FIELDSET FIELDSET LEGENDLEGEND

Page 25: Formulários electrónicos na WEB rogerio.costa@infocid.pt

Agrupar os componentesAgrupar os componentes Exemplo:Exemplo:

<FORM action="http://example.com/user" 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> <FIELDSET> <LEGEND>História clinica</LEGEND> ...informação sobre a história clinica... </FIELDSET> </FORM>

Page 26: Formulários electrónicos na WEB rogerio.costa@infocid.pt
Page 27: Formulários electrónicos na WEB rogerio.costa@infocid.pt

Identificar os componentesIdentificar os componentes

Associar explicitamente Associar explicitamente labelslabels com os com os respectivos componentesrespectivos componentes

Para todos os componentes com Para todos os componentes com labels implícitas assegurar que a label labels implícitas assegurar que a label está correctamente posicionadaestá correctamente posicionada. .

Preceder o controlo por uma LABEL Preceder o controlo por uma LABEL que o deve preceder na mesma linha que o deve preceder na mesma linha ou na linha imediatamente anterior ou na linha imediatamente anterior

Page 28: Formulários electrónicos na WEB rogerio.costa@infocid.pt

Identificar os componentesIdentificar os componentes

Exemplos:Exemplos:

<LABEL for=“nome">Nome: <INPUT type="text" id=“nome" tabindex="1"> </LABEL>

Page 29: Formulários electrónicos na WEB rogerio.costa@infocid.pt

Botões gráficosBotões gráficos

UsUsar uma imagem para um componente ar uma imagem para um componente

botão botão ((ex.ex. com o elemento com o elemento INPUTINPUT ou ou

BUTTONBUTTON) ) não o torna necessariamente não o torna necessariamente

inacessível – desde que seja inacessível – desde que seja

disponibilizado um texto equivalentedisponibilizado um texto equivalente..

De qualquer modoDe qualquer modo, , um botão submit gráfico um botão submit gráfico

criado com criado com INPUTINPUT type="image" type="image" resulta resulta

numa imagem interactiva do tipo server-numa imagem interactiva do tipo server-

sideside. .

Page 30: Formulários electrónicos na WEB rogerio.costa@infocid.pt

Técnicas para Técnicas para componentes específicoscomponentes específicos Incluir texto por defeito nas caixas de Incluir texto por defeito nas caixas de

textotexto

VALUE=“mensagem”VALUE=“mensagem”

Disponibilizar texto alternativo para Disponibilizar texto alternativo para

imagens usadas como botões ‘submit’imagens usadas como botões ‘submit’

ALT=“Enviar”ALT=“Enviar”

Page 31: Formulários electrónicos na WEB rogerio.costa@infocid.pt

Técnicas para Técnicas para componentes específicoscomponentes específicos Exemplo:Exemplo:

<FORM action="http://exemplos.com/prog/text-read" 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>

Page 32: Formulários electrónicos na WEB rogerio.costa@infocid.pt
Page 33: Formulários electrónicos na WEB rogerio.costa@infocid.pt

Assegurar a Assegurar a compatibilidade préviacompatibilidade prévia Nalguns navegadores da versão Nalguns navegadores da versão HTML HTML

3.23.2 O elementoO elemento BUTTONBUTTON não aparecenão aparece O elemento O elemento INPUTINPUT comcom type="button" type="button"

aparece como um campo de textoaparece como um campo de texto

Page 34: Formulários electrónicos na WEB rogerio.costa@infocid.pt
Page 35: Formulários electrónicos na WEB rogerio.costa@infocid.pt
Page 36: Formulários electrónicos na WEB rogerio.costa@infocid.pt
Page 37: Formulários electrónicos na WEB rogerio.costa@infocid.pt

““I firmly believe that the only disability in I firmly believe that the only disability in life is a bad attitude”life is a bad attitude”

““Estou plenamente convicto de que a Estou plenamente convicto de que a única desvantagem face à vida é única desvantagem face à vida é

uma atitude negativa”uma atitude negativa”

Scott Hamilton

Page 38: Formulários electrónicos na WEB rogerio.costa@infocid.pt

RecursosRecursos

BibliografiaBibliografia Iniciativa para a acessibilidade da Web Iniciativa para a acessibilidade da Web

do W3Cdo W3C: : http://www.w3c.org/http://www.w3c.org/waiwai www.www.utadutad.pt/.pt/waiwai//waiwai--pageauthpageauth.html.html

Ferramentas de testeFerramentas de teste Bobby: Bobby: http://http://wwwwww..castcast..orgorg//bobbybobby// EEmulador de navegador de texto Lynx mulador de navegador de texto Lynx

ViewerViewer: : http://www.delorie.com/web/lynxview.htmhttp://www.delorie.com/web/lynxview.htmll

Page 39: Formulários electrónicos na WEB rogerio.costa@infocid.pt

RecursosRecursos

‘‘Saites’, aliás sítios, de referênciaSaites’, aliás sítios, de referência Página da Acesso: Página da Acesso: http://http://wwwwww.acesso..acesso.

mctmct..ptpt// GUIA - Grupo Português pelas Iniciativas GUIA - Grupo Português pelas Iniciativas

em Acessibilidadeem Acessibilidadehttp://www.http://www.acessibilidadeacessibilidade.net.net