Tableless

Busca Menu

Acessibilidade básica no formulário de contato

Seja o primeiro a comentar por

Um dos itens indispensáveis em um site é o formulário de contato, já pensou deixar ele acessível para todos na web? Na atualidade a acessibilidade vem sendo levada a sério com o avanço das tecnologias web e as supostas padronizações dos navegadores, e a acessibilidade hoje na web é muito importante, e a chegada do HTML5 deixou marcação do HTML mais explicativa para usuários acessíveis.

WCAG 2.0 o que é ?

Quando se fala em diretrizes de acessibilidade  a WCAG que está na versão 2.0 abrange um vasto conjunto de recomendações, o resumo já define bem o que é a WCAG 2.0;

“As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.0 abrangem um vasto conjunto de recomendações que têm como objetivo tornar o conteúdo Web mais acessível. O cumprimento destas diretrizes fará com que o conteúdo se torne acessível a um maior número de pessoas com incapacidades, incluindo cegueira e baixa visão, surdez e baixa audição, dificuldades de aprendizagem, limitações cognitivas, limitações de movimentos, incapacidade de fala, fotossensibilidade bem como as que tenham uma combinação destas limitações. Seguir estas diretrizes fará também com que o conteúdo Web se torne mais usável aos utilizadores em geral.”

Proposta

Nesse post irei mostrar um formulário de contato básico, validado pelo W3C e nível “AAA” nas baterias de teste do AccessMonitor que são baseados nas diretrizes WCAG 2.0, se desejar saber mais sobre o AccessMonitor veja a documentação nesse link.

Elementos acessíveis

No HTML temos elementos importantes para fazer com que seu formulário de contato tenha o mínimo de acessibilidade possível, abaixo alguns deles;

labelfieldsetlegend optgroup.

Elemento label

Esse é o cara da combinação do conjunto de atributos “for” e “id”, relacionando de forma clara o seu rótulo, indicando ao usuário o elemento de entrada de dados a ser editado, deixar de fazer esse relacionamento entre  “for” e “id” certamente vai deixar o usuário confuso, e não é uma coisa difícil de fazer, veja o exemplo abaixo;

<label for="nome">Nome</label>
<input type="text" id="nome">

Atualmente não precisa mais envolver a label no input, pois as tecnologias mais modernas já procuram por o rótulo na hora da edição, o conjunto de atributos “for” e “id” pode ser utilizado com todos elementos de formulário, exceto o elemento button.

Elementos fieldset e legend

O elemento fieldset é responsável por agrupar itens no formulário que tenham características em comum e sempre dentro do elemento form.

O elemento legend é utilizado em conjunto com o fieldset e deve estar dentro do mesmo, fazendo dessa forma o melhor  entendimento do usuário e toda vezes que um elemento for anunciado será precedido o elemento legend.

<form>
  <fieldset>
    <legend>Formulário de contato</legend>
  </fieldset>
</form>

Elemento optgroup

O elemento optgroup é utilizado juntamente com o select, o optgroup é a mesma ideia do fieldset e legend dando título e agrupando itens do elemento select quando tem necessidade.

Cada optgroup recebe um “label” que será o título do grupo, veja o exemplo:

<form>
 <label for="lista">Lista</label>
 <select id="lista">
  <optgroup label="Diretoria">
   <option>Maria</option>
   <option>José</option>
   <option>João</option>
  </optgroup>
  <optgroup label="Comercial">
   <option>Pedro</option>
   <option>Antonio</option>
   <option>Manoel</option>
  </optgroup>
 </select>
</form>

O elemento optgroup juntamente com o atributo label (Diretoria e Comercial) deixa os elementos mais acessíveis e organizados em um select.

Formulário nível “AAA” pelo AccessMonitor e validado pelo W3C

Abaixo um formulário simples, com as recomendações minimas de acessibilidade.

<!DOCTYPE html>
<html lang="pt-br">
 <head>
 <title>Formulário de contato</title>
 <meta charset="UTF-8">
 </head>
 <body>
 <div class="container">
 <a href="#formulario">
 Entre em contato por meio de nosso formulário de contato.
 </a>
 <form method="post" action="form.php" id="formulario">
 <h1>Formulário de contato</h1>
 <h2>Entre em contato que teremos o imenso prazer em responder sua mensagem.</h2>

 <label for="nome">Nome</label>
 <input type="text" id="nome">

 <label for="email">E-mail</label>
 <input type="email" id="email">

 <label class="label label-primary" for="telefone">Telefone</label>
 <input type="tel" id="telefone" class="form-control" maxlength="11">

 <label for="departamento">Escolha um departamento</label> 
 <select id="departamento">
 <option>Selecione</option>
 <option>Atendimento</option>
 <option>Comercial</option>
 <option>Elogios</option>
 <option>Reclamações</option>
 </select>

 <label for="mensagem">Mensagem</label>
 <textarea id="mensagem"></textarea>
 <input type="submit" value="Enviar">
 </form>
 </div>
 </body>
</html>

A recomendação da WCAG 2.0 é que sempre tenha um link e que ele seja o primeiro, em  que ele envie para o conteúdo principal, por isso o link “Entre em contato por meio de nosso formulário de contato”.

Últimas considerações

Trabalhar em projetos que envolve acessibilidade é muito mais complexo, sou prova viva disso, ter atenção em como você escreve seu código é primordial. Colocar em mente que escrever um bom código é sinônimo de alcançar o máximo de pessoas possíveis, e as tecnologias estão ai cada dia evoluindo mais, vai querer separar alguém de um conteúdo relevante só por falta de caprichar nos seus códigos? As recomendações de acessibilidade nos permite disponibilizar o acesso a esses conteúdos de forma mais confortável para o usuário. Um dos teste mais básicos de acessibilidade é você conseguir navegar pelo site usado o TAB, se você ficar travado em algo ou não consegui chegar no conteúdo que deseja isso é indício que precisa de melhorias. 

Em vários site de e-commerce não tem a possibilidade de efetuar um fluxo de compra com um leitor de tela, pois etapas como validações de campos, plugins,  falta de hierarquia de cabeçalho deixa a desejar, tonando o conteúdo inacessível. Eu acredito em uma web para todos, sei que nas correrias de projetos a acessibilidade é deixada de lado, mais sempre que possível construa tudo pensando em todos. 

Publicado no dia