formulários electrónicos na web [email protected]
TRANSCRIPT
![Page 2: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/2.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/3.jpg)
A Sociedade da A Sociedade da InformaçãoInformação
Parte IParte I
![Page 4: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/4.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/5.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/6.jpg)
A caminho da democracia A caminho da democracia electrónica ?electrónica ?
![Page 7: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/7.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/8.jpg)
![Page 9: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/9.jpg)
![Page 10: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/10.jpg)
![Page 11: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/11.jpg)
![Page 12: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/12.jpg)
A acessibilidade A acessibilidade universaluniversal
Parte IIIParte III
![Page 13: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/13.jpg)
AcessibilidadeAcessibilidade
![Page 14: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/14.jpg)
AcessibilidadeAcessibilidade
![Page 15: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/15.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/16.jpg)
Formulários electrónicosFormulários electrónicos
Parte IVParte IV
![Page 17: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/17.jpg)
![Page 18: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/18.jpg)
![Page 19: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/19.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/20.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/21.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/22.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/23.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/24.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/25.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/26.jpg)
![Page 27: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/27.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/28.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/29.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/30.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/31.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/32.jpg)
![Page 33: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/33.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/34.jpg)
![Page 35: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/35.jpg)
![Page 36: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/36.jpg)
![Page 37: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/37.jpg)
““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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/38.jpg)
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](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/39.jpg)
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
![Page 40: Formulários electrónicos na WEB rogerio.costa@infocid.pt](https://reader034.vdocuments.pub/reader034/viewer/2022051314/552fc0fc497959413d8b9ec0/html5/thumbnails/40.jpg)
Esta apresentação está disponível em:Esta apresentação está disponível em:http://http://wwwwww..infocidinfocid..ptpt//rogeriorogerio//
[email protected]@infocid.pt