Apresentação

O episódio de hoje se aprofunda na apresentação de conteúdos. Nele, os especialistas Leonardo Gleison e Simone Freire explicam como o design, o uso de cores, a ordem dos elementos e a adaptação do conteúdo em diferentes dispositivos impactam a experiência de navegação e a acessibilidade para todas as pessoas.

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: Jeniffer Deus
Convidados: Leonardo Gleison e Simone Freire
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-7/

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:

Aplicação: nome usado para programas, sistemas ou serviços digitais. Um aplicativo de banco, um sistema de RH ou uma plataforma de compras são exemplos de aplicações.

ARIA / atributos ARIA: recursos usados no código para ajudar leitores de tela a entender melhor os elementos da página. Funcionam como instruções extras para tecnologias assistivas.

aria-hidden: atributo usado para esconder conteúdos do leitor de telas quando eles não precisam ser lidos naquele momento. Por exemplo: um menu fechado que não deve ser anunciado enquanto está escondido.

Cabeçalho: título ou subtítulo usado para organizar conteúdos em uma página. Funciona como os capítulos de um livro, ajudando as pessoas a entenderem a estrutura do texto.

Campo de texto: espaço onde a pessoa digita informações em formulários. Exemplo: campo de nome, e-mail ou telefone.

CSS (Cascading Style Sheets): linguagem usada para definir a aparência visual de um site ou aplicativo. É o CSS que controla cores, tamanhos, posição dos elementos e aparência geral da página.

Codificação: parte técnica da construção de um site ou sistema, onde desenvolvedores escrevem o código que faz tudo funcionar.

Conteúdo responsivo / responsividade: capacidade de um site ou aplicativo se adaptar a diferentes tamanhos de tela. Por exemplo: funcionar bem tanto no celular quanto no computador sem esconder informações.

Controle visual do foco: indicação visual que mostra onde a pessoa está navegando na página usando teclado ou tecnologias assistivas.

DDD: código numérico usado antes do telefone para identificar regiões do Brasil. Exemplo: 11 para São Paulo, 21 para Rio de Janeiro.

Elemento HTML: parte que compõe a estrutura de uma página na internet. Títulos, botões, links e imagens são exemplos de elementos HTML.

Elemento semântico / marcação semântica: uso correto dos elementos HTML de acordo com sua função real. Por exemplo: usar um botão como botão e um título como título, em vez de apenas deixar algo “parecendo” um botão visualmente.

Emoji: pequenos símbolos usados para representar emoções, objetos ou ideias.

Foco: indicação de qual elemento da tela está selecionado naquele momento durante a navegação por teclado. Exemplo: saber em qual botão você está antes de apertar Enter.

Foco visível: destaque visual que mostra claramente onde o foco está na tela. Pode ser uma borda colorida, um contorno ou um pontilhado ao redor do elemento selecionado.

Formulário: área usada para preencher informações. Exemplos: cadastro de usuário, login ou formulário de contato.

Holerite: documento que mostra informações do salário da pessoa trabalhadora, como pagamento, descontos e benefícios.

HTML: linguagem usada para estruturar páginas da internet. É ela que organiza textos, títulos, imagens, tabelas e outros elementos do site.

Leitor de telas: tecnologia assistiva usada principalmente por pessoas cegas. O programa lê em voz alta tudo o que aparece na tela do computador ou celular.

Layout: forma como os elementos estão organizados visualmente em uma página ou aplicativo.

Orientação da tela: posição em que a tela é usada. Modo retrato: tela na vertical. Modo paisagem: tela na horizontal.

Rótulo: nome ou descrição que identifica claramente um elemento. Exemplo: um botão escrito “Baixar arquivo” em vez de apenas um ícone sem explicação.

Semântica: organização do conteúdo com significado correto para que tecnologias assistivas entendam o que cada elemento realmente é.

Sistema corporativo: sistema usado dentro de empresas para atividades de trabalho. Exemplos: sistemas de RH, folha de pagamento ou controle de ponto.

Tabela: estrutura usada para organizar informações em linhas e colunas. Exemplo: tabela de horários, preços ou resultados.

Tag HTML: código usado para identificar elementos em uma página web. Por exemplo: existe uma tag específica para botão e outra para título.

Template: modelo pronto usado para organizar a aparência e estrutura de páginas e conteúdos.

Tecnologia assistiva: ferramenta que ajuda pessoas com deficiência a usar tecnologias digitais. Exemplos: leitores de tela, ampliadores de tela, teclados adaptados e comandos por voz.

TP (teleprompter): ferramenta usada para mostrar textos na tela enquanto uma pessoa apresenta um conteúdo, como em vídeos e programas.

UX (User Experience): sigla em inglês para “experiência da pessoa usuária”. Refere-se à forma como as pessoas interagem e se sentem ao usar um sistema ou aplicativo.

Zoom: recurso usado para ampliar o conteúdo da tela. Pode aumentar letras, imagens e botões para facilitar a leitura e a navegaçã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.