Termos e expressões – Episódio 15: Regiões – Podcast Todos na Web

Agente de usuário: software (programa) utilizado para acessar conteúdos da Web. Exemplo: navegadores (browsers), leitores de tela e alguns assistentes digitais podem atuar como agentes de usuário.

ARIA (Accessible Rich Internet Applications): conjunto de atributos que adicionam informações de acessibilidade a elementos de uma página quando o HTML, sozinho, não consegue fornecer todas as informações necessárias para as tecnologias assistivas. Exemplo: um menu pode receber um atributo ARIA para informar ao leitor de telas que se trata de uma área de navegação.

Área de navegação: região da página que reúne links usados para navegar pelo próprio site ou aplicação. Exemplo: o menu principal de um site, com links como "Início", "Produtos" e "Contato".

Cabeçalho (header): área localizada normalmente no topo da página, onde costumam ficar elementos como logotipo, menu principal e mecanismo de busca. Exemplo: a faixa superior de um site que aparece em praticamente todas as páginas.

Código HTML: linguagem utilizada para estruturar o conteúdo de páginas da web. Exemplo: o HTML define que determinado trecho é um título, um parágrafo, um formulário ou uma imagem.

Conteúdo principal (main): região da página que contém o conteúdo mais importante daquele documento. Exemplo: em uma notícia, o conteúdo principal é o texto da reportagem, enquanto menus e rodapé ficam em outras regiões.

HTML5: versão da linguagem HTML que trouxe diversos elementos semânticos próprios, facilitando a construção de páginas mais organizadas e acessíveis. Exemplo: em vez de usar apenas elementos genéricos, o HTML5 permite utilizar elementos como header, main, nav e footer.

Landmark (região da página): nome dado às regiões semânticas de uma página que ajudam usuários, especialmente quem utiliza leitores de tela, a navegar rapidamente entre diferentes partes do conteúdo. Exemplo: uma pessoa pode ir diretamente para o conteúdo principal, para o menu ou para o rodapé sem precisar percorrer toda a página.

Leitor de telas: software (programa) utilizado principalmente por pessoas cegas ou com baixa visão para acessar conteúdos digitais. Ele interpreta o código da página e transforma as informações em áudio ou em uma linha Braille. Exemplo: em vez de enxergar um botão, a pessoa ouve "Botão: Enviar".

Marcação semântica: forma de estruturar o código utilizando elementos que representam corretamente o significado de cada parte da página. Exemplo: usar um elemento de título para um título e um elemento de navegação para um menu, em vez de utilizar apenas elementos genéricos.

Navegação: forma como uma pessoa percorre uma página ou um site para encontrar informações e executar ações. Exemplo: ir do menu principal para uma página de produtos ou utilizar atalhos do leitor de telas para chegar diretamente ao conteúdo principal.

Página robusta: página construída de forma que diferentes navegadores, dispositivos e tecnologias assistivas consigam interpretar corretamente seu conteúdo. Exemplo: uma página que funciona adequadamente tanto para quem usa mouse quanto para quem utiliza teclado ou leitor de telas.

Plugin: pequeno complemento instalado em um programa para adicionar novas funcionalidades. Exemplo: um plugin do navegador pode destacar as regiões semânticas de uma página para facilitar sua avaliação.

Região semântica: área da página identificada de forma que seu papel seja compreendido por navegadores e tecnologias assistivas. Exemplo: identificar corretamente o cabeçalho, a navegação, o conteúdo principal e o rodapé.

Rodapé (footer): área localizada normalmente na parte inferior da página, onde costumam ficar informações complementares. Exemplo: contatos, política de privacidade, direitos autorais e links institucionais.

Role: atributo do ARIA que informa qual é a função de um elemento quando essa informação não pode ser transmitida apenas pelo HTML. Exemplo: um elemento pode receber o valor navigation (role=”navigation”) para indicar que representa uma área de navegação.

Semântica: forma de organizar o código para que cada elemento represente corretamente sua função e significado. Isso ajuda navegadores, tecnologias assistivas e outros programas a entenderem a estrutura da página. Exemplo: marcar um título como título, um botão como botão e um menu como área de navegação.

Tecnologia assistiva: produto, equipamento, software ou recurso utilizado para ampliar a autonomia de pessoas com deficiência no uso de tecnologias. Exemplos: leitores de telas, ampliadores de tela, teclados adaptados e comandos por voz.

Wireframe: desenho simples que representa a estrutura de uma página ou aplicação antes da definição do visual final. Ele ajuda a planejar onde cada elemento ficará e como as pessoas irão navegar pelo conteúdo. Exemplo: um esboço mostrando a posição do cabeçalho, do menu, do conteúdo principal e do rodapé, sem cores nem identidade visual.

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.