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

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

A Sociedade da Informação Parte I

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

A caminho da democracia electrónica ? Parte II

A caminho da democracia electrónica ?

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

A acessibilidade universal Parte III

Acessibilidade

Acessibilidade

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

Formulários electrónicos Parte IV

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

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

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

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

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>

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

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

Agrupar os componentes 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> <LEGEND>História clinica</LEGEND> ...informação sobre a história clinica... </FORM>

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

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

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

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.

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”

Técnicas para componentes específicos 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>

Acessibilidade por teclado Exemplos: <FORM action="http://exemplos.com/prog/text-read" method="post"> <P> <INPUT type="image" name=submit src="button.gif" alt="Enviar"> </FORM>

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

“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

Recursos Bibliografia Ferramentas de teste Iniciativa para a acessibilidade da Web do W3C: http://www.w3c.org/wai www.utad.pt/wai/wai-pageauth.html Ferramentas de teste Bobby: http://www.cast.org/bobby/ Emulador de navegador de texto Lynx Viewer: http://www.delorie.com/web/lynxview.html

Recursos ‘Saites’, aliás sítios, de referência Página da Acesso: http://www.acesso.mct.pt/ GUIA - Grupo Português pelas Iniciativas em Acessibilidade http://www.acessibilidade.net

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