Acessibilidade básica no formulário de contato

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

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;

**label, ****fieldset, ****[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;

**label, ****fieldset, **]6optgroup.

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;

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.

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:

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.

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. 

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *