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

rogerio.costa@infocid.ptrogerio.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

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//

rogerio.costa@infocid.ptrogerio.costa@infocid.pt