Formulários e entrada de dados

Neste episódio, convidamos Cláudia Martin Nascimento e Sandyara Peres para falar sobre formulários e entrada de dados. Formulários são essenciais na Web. A partir deles, as pessoas fazem cadastros, publicam conteúdo e interagem umas com as outras na Web. Só que esses formulários precisam ser acessíveis, para que qualquer pessoa consiga utilizá-los. O episódio de hoje mostrará como rótulos, instruções e mensagens de erro influenciam a experiência do usuário positiva ou negativamente.

A produção deste podcast não seria possível sem o apoio da Embaixada do Reino Unido, da Secretaria de Governo Digital do Ministério da Gestão e da Inovação em Serviços Públicos e com a parceria do W3C Chapter São Paulo, Movimento Web para Todos e Acesso para todos.





Participantes

Host: Reinaldo Ferraz
Convidadas: Cláudia Martin Nascimento e Sandyara Peres
Produção: Espiral Interativa, Ceweb.br e Comunicação NIC.br
Estúdio de gravação: 3 Telas
Roteiros: Espiral Interativa, Acesso para Todos, Ceweb.br
Recursos de acessibilidade:
Tradução e Interpretação de Libras-Português
Tradutora: Jade Moia
Legendas: Espiral Interativa e Ceweb.br

Link para transcrição do episódio: https://nic.br/pagina/transcricao-todos-na-web-5/

Redes Sociais:

https://www.youtube.com/nicbrvideos/
https://x.com/comuNICbr/
https://www.telegram.me/nicbr/
https://www.linkedin.com/company/nic-br/
https://www.instagram.com/nicbr/
https://www.facebook.com/nic.br/
https://www.flickr.com/NICbr/

Veja também:

https://nic.br/
https://ceweb.br

Termos e expressões utilizados ao longo do episódio:

Accordion / accordions: componentes que mostram ou escondem conteúdo ao clicar, como se fossem seções expansíveis (por exemplo, uma lista de perguntas em que você clica e a resposta aparece).
ARIA (Accessible Rich Internet Applications): conjunto de atributos usados no código de páginas para ajudar tecnologias assistivas, como leitores de tela, a entender melhor os elementos de uma página.
aria-label: atributo que adiciona um rótulo (nome) a um elemento, usado principalmente por leitores de tela quando não há um texto visível na tela.
aria-describedby: atributo que associa um campo a uma descrição adicional, como uma mensagem de erro ou instrução, para que leitores de tela leiam essa informação junto.
Arrastar e soltar (drag and drop): ação de clicar (ou tocar), segurar e mover um elemento na tela até outro lugar.
autocomplete (HTML): atributo que indica o tipo de informação esperada em um campo (como nome, e-mail ou cartão), permitindo preenchimento automático e facilitando a digitação.
Campo de edição: campo onde a pessoa pode digitar informações em um formulário, como nome, e-mail ou senha.
Campo obrigatório: campo que precisa ser preenchido antes de enviar o formulário.
CAPTCHA: teste usado para diferenciar pessoas de robôs, como identificar imagens, digitar letras distorcidas ou resolver pequenos desafios.
Carga cognitiva: esforço mental necessário para entender ou realizar uma tarefa.
CC number (credit card number): número do cartão de crédito solicitado em formulários de pagamento.
Comandos de voz: forma de interação com dispositivos por meio da fala, como pedir algo a assistentes virtuais.
Dados sensíveis: informações pessoais importantes, como CPF, endereço ou dados bancários, que exigem cuidado no uso e armazenamento.
Discalculia: dificuldade em lidar com números e cálculos.
fieldset: elemento do HTML usado para agrupar campos relacionados dentro de um formulário, como um conjunto de dados pessoais ou de pagamento.
legend (HTML): texto que funciona como título de um grupo de campos (dentro de um fieldset), ajudando a entender o contexto daquele conjunto.
Leitor de tela: tecnologia que lê em voz alta o conteúdo da tela para pessoas com deficiência visual.
Logradouro: tipo de via, como rua, avenida, praça, entre outros. É uma forma mais formal de se referir ao endereço.
Modais: janelas que aparecem sobre o conteúdo principal da página, geralmente para mostrar mensagens ou pedir alguma ação do usuário.
Navegação sequencial: forma de navegar passando pelos elementos em ordem, geralmente usando teclado ou leitor de tela.
placeholder: texto de exemplo que aparece dentro de um campo de formulário e desaparece quando a pessoa começa a digitar. Serve apenas como dica, não como rótulo.
Semântica (no HTML): uso correto dos elementos da página para dar significado ao conteúdo (por exemplo, usar um título como título), facilitando a compreensão por pessoas e tecnologias.
Snackbar: pequena mensagem temporária que aparece na tela, geralmente para informar algo rápido, como “ação realizada” ou “mensagem enviada”.
Submit (botão de envio): botão usado para enviar os dados preenchidos em um formulário.
Tecnologias assistivas: ferramentas que ajudam pessoas com deficiência a usar dispositivos digitais, como leitores de tela, ampliadores de tela e comandos de voz.
Transação financeira: ação que envolve pagamento ou movimentação de dinheiro, como uma compra online.
Validação de formulário: processo que verifica se os dados preenchidos estão corretos (por exemplo, se um e-mail está no formato certo).
Zoom / ampliação de tela: recurso que aumenta o tamanho do conteúdo para facilitar a leitura por pessoas com baixa visão.

Além dos termos que comentamos aqui, a Norma ABNT 17225 traz uma seção de termos e definições que pode complementar seu entendimento e apoiar você nessa jornada.