Botões e controles

Neste episódio, falamos com os especialistas Cláudia Martin Nascimento e Sidney Tobias sobre botões e controles interativos. Esses elementos precisam ser acessíveis para que todas as pessoas consigam identificar suas funções e utilizá-los corretamente. Nesta conversa, também compartilhamos orientações práticas para garantir uma interação inclusiva e eficiente.

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
Convidados: Cláudia Martin Nascimento e Sidney Tobias
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-6/

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:

Área de clique / área de toque: é o espaço onde você pode clicar ou tocar para ativar um botão ou controle.
ARIA (Accessible Rich Internet Applications): conjunto de atributos usados no código para ajudar tecnologias assistivas a entender melhor os elementos da 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.
Arrastar e soltar (drag and drop): ação de clicar (ou tocar), segurar e mover um elemento na tela até outro lugar.
button: elemento do HTML usado para criar botões de ação.
checkbox: campo de formulário que permite marcar ou desmarcar uma opção.
Comandos de voz: Forma de interagir com dispositivos usando a fala.
div: elemento do HTML usado para organizar partes maiores de uma página. Ele funciona como uma “caixa” que agrupa conteúdos.
down event: evento de pressionar, momento em que a pessoa começa a clicar ou tocar.
Feedback (retorno): resposta que o sistema dá após uma ação. Exemplo: “Compra realizada com sucesso”.
Feedback multissensorial: Quando o retorno é apresentado de várias formas (visual, texto e som).]
Foco (de teclado): Indicação de qual elemento está selecionado ao usar o teclado. Exemplo: contorno ao redor de um botão.
HTML: é a linguagem usada para montar a estrutura de uma página na internet. Pense no HTML como o “esqueleto” de um site. Ele organiza tudo o que aparece na tela.
Link (hiperlink): elemento clicável que leva para outra página ou seção.
Leitor de tela: Tecnologia assistiva que lê o conteúdo da tela em voz alta.
Movimento de pinça: gesto com dois dedos para ampliar ou reduzir algo na tela. Exemplo: dar zoom em um mapa.
Mudança de contexto: quando algo muda na página sem a pessoa esperar. Exemplo: página recarrega automaticamente durante o preenchimento de um campo de formulário.
Nome acessível: texto que identifica um elemento para tecnologias assistivas. É o que o leitor de tela anuncia.
Pixel (CSS): unidade de medida usada para definir tamanhos na tela.
Ponteiro único: é quando uma ação pode ser feita com um único toque ou clique, sem exigir movimentos complexos. Em outras palavras: a pessoa consegue interagir usando um dedo, um clique do mouse ou um único ponto de contato na tela.
Radio (botão de opção): é um tipo de campo de formulário onde a pessoa pode escolher apenas uma opção entre várias. Diferente de outros campos, aqui não dá para marcar mais de uma alternativa ao mesmo tempo.
Redundância (em acessibilidade): oferecer mais de uma forma de realizar a mesma ação. Exemplo: gesto + botão.
Rótulo (label): texto que explica a função de um botão ou campo. Exemplo: “Enviar formulário” em vez de só “Enviar”.
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.
Showroom: é um espaço (físico ou digital) usado para mostrar produtos, mas nem sempre para comprar na hora. A ideia principal é: ver, conhecer e experimentar antes de decidir comprar.
span: é um elemento do HTML parecido com a <div>, mas usado para organizar partes pequenas de conteúdo, geralmente dentro de um texto.
Tabulação (navegação por TAB): é a forma de navegar por um site usando a tecla TAB do teclado, pulando de um elemento interativo (botões, links, campos de formulário, menus) para outro.
Teclado QWERTY: é o modelo de teclado mais comum, usado em computadores, celulares e tablets. Ele recebe esse nome por causa da sequência das primeiras letras da linha superior do teclado: Q W E R T Y.
Tecnologias assistivas: ferramentas que ajudam pessoas com deficiência a usar dispositivos digitais, como leitores de tela, ampliadores de tela e comandos de voz.]
Texto alternativo (atributo alt): texto inserido no código da página para descrever uma imagem. É esse texto que o leitor de tela lê quando encontra uma imagem.
up event: evento de soltar, momento em que a pessoa solta o clique — é quando a ação deve acontecer.

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.