As tags <form> e </form> são utilizadas para delimitar quais campos fazem parte de um formulário. Seus principais atributos são: action, method e name.

O atributo action indica qual é a página que receberá os dados do formulário.

O atributo method pode ter os valores get ou post. No get os dados do formulário vão juntamente com a URL. Garanta que a URL resultante não tenha comprimento maior que 255 caracteres, caso contrário, navegadores e servidores de proxy mais antigos podem não suportar essas URLs (Fielding et al., 1997). Uma alternativa interessante é utilizar cookies, pois podem ser recuperados via Javascript (client-side) ou via linguagem de programação server-side. A seguir um exemplo de uma URL de destino recebendo dados de um formulário via get.

No post os dados são enviados juntamente com a requisição e o limite é configurável no servidor Web.

Note que se o formulário utilizar dados que não são caracteres (e.g., upload de arquivos) então o atributo method do formulário deve ser post.

O atributo name é utilizado para nomear o formulário para que ele possa ser referenciado dentro da página. Lembre-se que a especificação da linguagem XHTML 1.0 Strict não conta com o atributo name para a tag <form>.

Link para o tópico Formulários - A tag HTML < form >

Javascript deve ser usado para oferecer funcionalidades adicionais às já existentes e necessárias ao funcionamento da página Web. Dessa forma, caso o navegador do cliente não ofereça suporte a scripts a funcionalidade da página não será afetada. O Javascript permite que você informe a versão com que você deseja que seu código seja interpretado e também permite que você identifique a versão do navegador do cliente. No entanto, escrever códigos para versões restritas do Javascript não é um opção muito boa (apesar de amplamente adotada). O que sugerimos é a padronização e adoção de boas práticas de codificação que tornem o código Javascript menos sensível a versões dos navegadores e versões da própria linguagem.

A utilização de scripts também levanta questões relacionadas à acessibilidade. Existe a percepção que páginas que utilizam scripts não são acessíveis e que não é possível desenvolver páginas acessíveis fazendo uso de scripts. Ambas as afirmações estão incorretas e, neste site, são apresentadas formas de criar páginas acessíveis utilizando scripts.

Link para o tópico Recomendações para uso do Javascript

Acessibilidade na Web significa que pessoas com diferentes tipos de deficiência também deveriam entender, navegar, interagir e contribuir com websites (WAI - Web Accessibility Initiative). Assim, o apoio à busca de acessibilidade na Web não exclui nenhum dos usuários e estende o conceito de usabilidade como um todo.

Relacionamento dos componentes essenciais da Acessibilidade Web. Desenvolvedores Web normalmente usam ferramentas de criação e ferramentas de aperfeiçoamento para criar conteúdo Web. Pessoas ("usuários") usam navegadores Web, players de mídia, tecnologias assistivas, ou outros "agentes de usuário" para acessar e interagir com o conteúdo (Silva, 2005).

Parte das 14 diretrizes para construção de websites acessíveis do W3C (WCAG - Web Content Accessibility Guidelines 1.0) podem ser atendidas com a construção de códigos HTML, CSS e Javascript válidos e bem estruturados. A seguir a lista de funcionalidades que contribuem para atender às diretrizes:

• Redação de título de páginas que identifique seu conteúdo, facilitando a indexação por ferramentas de busca, evitando a utilização de ASCII art;
• Utilização do atributo lang para especificar o idioma da página e de trechos que utilizam outros idiomas para que leitores de telas e outros aplicativos os interprete corretamente;
• Conteúdo textual e sonoro equivalente ao visual (i.e., utilização de atributos alt e title, geração de conteúdo via CSS, funcionalidades adicionadas com Javascript, etc.), tendo em foco a redundância e nunca contar com apenas uma forma para apresentação de conteúdos;
• Tornando conteúdo mais legível a partir da utilização de unidades de medida relativas, tanto para texto quando elementos da página (e.g., tabelas, largura da página);
• Utilização de CSS bem estruturado, o que torna o website mais robusto, consistente e de mais fácil manutenção;
• Organização de páginas e formulários seguindo uma ordem lógica a partir da utilização de rótulos e tabindex, por exemplo;
• Elaboração de tabelas estruturais e de conteúdo que sejam acessíveis e evitam criar barreiras para os usuários que utilizam leitores de telas.

Com estes pontos, 8 das 14 diretrizes de conteúdo do W3C (WCAG 1.0) são atendidas. São elas:

• Diretriz 1 - Fornecer alternativas ao conteúdo sonoro e visual
• Diretriz 2 - Não recorrer apenas à cor
• Diretriz 3 - Utilizar corretamente marcações e folhas de estilo
• Diretriz 4 - Indicar claramente qual o idioma utilizado
• Diretriz 5 - Criar tabelas passíveis de transformação harmoniosa
• Diretriz 8 - Assegurar a acessibilidade direta de interfaces do usuário integradas
• Diretriz 9 - Projetar páginas considerando a independência de dispositivos
• Diretriz 11 - Utilizar tecnologias e recomendações do W3C

Link para o tópico Acessibilidade na Web

O que você já deveria ter lido:

• O que é Acessibilidade?
• Tecnologias Assistivas

Segundo o Decreto nº 5.296 (DECRETO nº 5.296 DE 2 DE DEZEMBRO DE 2004, 2004), acessibilidade está relacionada em fornecer condição para utilização, com segurança e autonomia, total ou assistida, dos espaços, mobiliários e equipamentos urbanos, das edificações, dos serviços de transporte e dos dispositivos, sistemas e meios de comunicação e informação, por pessoa portadora de deficiência ou com mobilidade reduzida. No mesmo documento, barreiras são definidas como qualquer entrave ou obstáculo que limite ou impeça o acesso, a liberdade de movimento, a circulação com segurança e a possibilidade de as pessoas se comunicarem ou terem acesso à informação (DECRETO nº 5.296 DE 2 DE DEZEMBRO DE 2004, 2004).

O programa Custe o que custar (CQC) da rede Bandeirantes de televisão fez uma matéria que ilustra bem como ainda há muito para ser feito sobre acessibilidade no Brasil.

Acessibilidade na Web significa que pessoas com diferentes tipos de deficiência também conseguem entender, navegar, interagir e contribuir com websites, inclusive idosos, que sofrem alterações em algumas de suas habilidades devido a idade (WAI - Web Accessibility Initiative).

Assim, podemos pensar na acessibilidade como sendo a qualidade de locais, dispositivos, meios de comunicação, sistemas e serviços, que podem ser utilizados por pessoas com diferentes necessidades. Note que por "pessoas com diferentes necessidades" nos referimos a qualquer indivíduo, uma vez que existem inúmeras situações em que um ou mais sentidos de uma pessoa não estão voltados para a mesma tarefa. A seguir são apresentados alguns cenários em que estão envolvidas barreiras e problemas de acessibilidade para pessoas com diferentes tipos de limitações:

Em torneiras que utilizam temporizador para controlar o fluxo da água, se uma torneira está mal regulada de forma que a água pare assim que o botão é liberado, um usuário que está com uma das mãos ocupadas não conseguirá utilizar a torneira. Basta que o usuário esteja com um dos braços engessado ou segurando um bebê para não conseguir utilizar a torneira em questão.

Em escritórios em que é permitido que se escute música com a utilização de fone de ouvido, um telefone sem indicativo visual de que está tocando não chamará a atenção do seu usuário e conseqüentemente não atingirá seu objetivo. Note que o usuário não precisa ter nenhum problema no aparelho auditivo para fazer uso da redundância obtida com a utilização do recurso visual.

Figura: Pessoa usando fone de ouvido enquanto trabalha. Fonte: Foto de muzo178 no flicker.

Na computação a redundância também é um recurso bastante útil para a garantia da acessibilidade. Um exemplo da relevância da redundância é a ferramenta de comunicação instantânea do webmail Gmail (Google Mail). Nele, notificações são informadas através de efeitos visuais e auditivos.

Figura: Informações redundantes sobre a chegada de nova mensagem na ferramenta de comunicação instantânea do GMail.

Por fim, o apoio à busca de acessibilidade não exclui nenhum dos usuários e estende o conceito de usabilidade como um todo. E, seguindo a definição de barreiras do Decreto nº 5.296 (DECRETO nº 5.296 DE 2 DE DEZEMBRO DE 2004, 2004), temos que uma forma de tornarmos algo mais acessível é identificar e eliminar quaisquer barreiras existentes entre os usuários e o que eles querem utilizar.

Link para o tópico O que é Acessibilidade?

As tags <a> e </a> são utilizadas para definir um hiperlink. Note que o hiperlink deve identificar claramente o local para onde o usuário será enviado. Não utilize palavras vagas nem repita o mesmo conteúdo para dois hiperlinks distintos. Toda âncora deve ter um conteúdo textual ou gráfico associado de forma que os usuários possam acessá-la.

Os atributos principais desta tag são: href, target, accesskey, longdesc e title. O atributo href indica qual é o destino do hiperlink, que pode ser uma página ou uma âncora. Para referenciar uma âncora basta colocar o nome da âncora após o sinal #.

Um uso comum dessas âncoras, para tornar páginas mais acessíveis aos usuários de leitores de tela, é nomear uma região do conteúdo principal e incluir um hiperlink no início da página que remeta o usuário diretamente para esse conteúdo, evitando que tenham que passar por cada um dos links até alcançarem o conteúdo principal. Este mecanismo é chamado de skip link.

O atributo accesskey indica um atalho pelo qual o usuário poderá acessar um hiperlink apenas combinando uma tecla especial (e.g., ALT) com o caractere associado a este atributo, sem necessitar do mouse. Note que o uso deste atributo deve ser consistente e único para cada hiperlink/função.

O atributo title é diferente da tag <title>. Aqui o atributo indica ao usuário o que há na página/âncora que o hiperlink remete, já a tag <title> se refere ao título da página.

O atributo longdesc contém uma descrição mais detalhada que a descrição apresentada no atributo title.

Link para o tópico Âncoras e hiperlinks - A tag HTML <a>

Os códigos em Javascript utilizados em uma página podem ser internos ou externos. Para utilização de código interno sugerimos que a estrutura utilizada seja a seguinte:

Priorize a declaração de códigos Javascript no início dos documentos HTML, dentro da tag <head>. Com isso, você melhora a legibilidade do código e evita erros de escopo de declaração de variáveis e ordem de métodos.

Note que os comandos <!-- e //--> localizados após as tags script de abertura e fechamento, respectivamente, são usados para que código Javascript não seja mostrado por navegadores que não suportam scripts.

Sugerimos que as chamadas a scripts externos tenham a seguinte forma:

Note que arquivos externos não precisam iniciar com os comandos utilizados nos scripts internos, pois o arquivo externo só será interpretado se o navegador suportar Javascript.

Link para o tópico Inclusão de código Javascript

A primeira linha de código de uma página HTML deve ser a declaração DOCTYPE. É por meio dela que é possível especificar uma DTD (Document Type Definition) e assim possibilitar que os navegadores e ferramentas de validação identifiquem a linguagem utilizada numa página, assim como suas tags, atributos e estrutura.

Note que ela deve ser a primeira linha do arquivo que o navegador recebe, ou seja, não há problema algum se houver programação no lado do servidor contanto que a página HTML resultante contenha em sua primeira linha a declaração DOCTYPE.

A declaração DOCTYPE pode ser feita de várias formas. Na forma apresentada anteriormente temos a seguinte estrutura. Em que:

1. DOCTYPE - Marca o início da declaração DOCTYPE;
2. Nome da tag-raiz - Informa qual é o elemento de maior hierarquia, neste caso é HTML. Note que a tag-raiz deve ser única;
3. Declaração do escopo da DTD - O escopo pode ser definido como: vazio para declarações locais, SYSTEM para DTDs externas e acessíveis apenas por um sistema específico, ou PUBLIC para DTDs externas e públicas, que é o que utilizaremos;
4. Identificador - Seu conteúdo indica o mantenedor da DTD, linguagem e versão da mesma e, por fim, o idioma em que a DTD foi escrita;
5. URL - Endereço do arquivo que contém a DTD. Se tiver curiosidade para saber como é a especificação da DTD que utilizaremos acesse a DTD de HTML 4.01.

Por fim, HTML 4.01 possui três DTDs principais, são elas: Strict, que utiliza apenas os elementos consolidados; Frameset, que é usada em websites que contam com frames; Transitional, que permite a utilização dos mesmos elementos da Strict mais os elementos obsoletos, tendo em vista a compatibilidade com páginas mais antigas.

Assim, recomendamos a utilização da DTD Transitional nos casos em que esteja sendo realizada a recodificação do website e a Strict quando estiver sendo criado um novo website ou após a a verificação que o website seja um HTML válido, uma vez que temos como objetivo manter a apresentação de páginas antigas, tornar o código HTML válido e incluir elementos que aumentem a acessibilidade de um website.

Link para o tópico DOCTYPE - Declaração do cabeçalho de documentos HTML

A tag <input> é utilizada para definir um campo de entrada de dados em um formulário. Por meio do seu atributo type é possível escolher qual é o tipo de elemento a ser utilizado. Os principais valores para o atributo type são: text, checkbox, radio e submit.

Além do atributo type deve-se utilizar os atributos id, name e value. O atributo id serve para identificar o elemento e entre outras coisas possibilitar o uso da tag <label>.

O atributo name é utilizado para referenciar o elemento no formulário via programação no cliente ou no servidor. O atributo value indica qual é o valor inicial do campo.

Quando cabível com o tipo de input, para indicar que ele está selecionado, use o atributo checked com valor checked.

Link para o tópico Campos de entrada de dados - A tag HTML <input>

O que você já deveria ter lido:

• Formulários - A tag HTML < form >

A geração de conteúdo utilizando CSS é uma característica do CSS nível 2, o que indica que deve ser utilizada com cautela e acompanhada de testes com os navegadores mais utilizados pelo público alvo. A geração de conteúdo possibilita adicionar informações sobre o contexto de elementos que são destacados por atributos visuais como borda, imagens ou cores de fundo, etc.

Além dos pseudo-elementos before e after, o CSS nível 2 conta com as propriedades cue, cue-before e cue-after, que possibilitam que sons sejam tocados para auxiliar na identificação de conteúdo. Outras formas mais compatíveis de fornecer contexto e aumentar a acessibilidade de uma página Web são: a partir da utilização dos atributos display e visibility para esconder elementos de contexto que são redundâncias para informações visuais, ou tornar um texto desses pequeno e de cor igual à do fundo. Conforme comentado anteriormente, verifique sempre a compatibilidade das propriedades e elementos que deseja utilizar com os navegadores utilizados no seu website. A referência sugerida é Referência de CSS do W3 Schools.

Link para o tópico Conteúdos gerados pelo CSS: os pseudo-elementos before e after

No lugar de executar vários comandos de impressão (e.g., document.write), o que pode tornar o script muito lento, concatene a saída em uma variável e por fim envie o conteúdo da variável de uma única vez.

Link para o tópico Escrita de HTML via Javascript