Formulários electrónicos na WEB [email protected].
Transcript of Formulários electrónicos na WEB [email protected].
Formulários electrónicos Formulários electrónicos na WEBna WEB
[email protected]@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
A Sociedade da A Sociedade da InformaçãoInformação
Parte IParte I
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
A caminho da A caminho da democracia electrónica ?democracia electrónica ?
Parte IIParte II
A caminho da democracia A caminho da democracia electrónica ?electrónica ?
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
A acessibilidade A acessibilidade universaluniversal
Parte IIIParte III
AcessibilidadeAcessibilidade
AcessibilidadeAcessibilidade
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
Formulários electrónicosFormulários electrónicos
Parte IVParte IV
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”). ).
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
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
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
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>
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
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>
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
Identificar os componentesIdentificar os componentes
Exemplos:Exemplos:
<LABEL for=“nome">Nome: <INPUT type="text" id=“nome" tabindex="1"> </LABEL>
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. .
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”
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>
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
““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
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
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
Esta apresentação está disponível em:Esta apresentação está disponível em:http://http://wwwwww..infocidinfocid..ptpt//rogeriorogerio//
[email protected]@infocid.pt