Codificação e marcação semântica

Neste episódio, falamos sobre codificação e marcação semântica e como o código pode facilitar ou impedir o acesso à informação. Com a participação dos especialistas Cláudia Martin Nascimento e Sidney Tobias, trazemos exemplos práticos para mostrar como aplicar boas práticas de desenvolvimento que eliminam barreiras e tornam o conteúdo compreensível para leitores de tela e outras tecnologias assistivas.

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-14/

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:

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

Ampliação (zoom): recurso que aumenta o tamanho do conteúdo exibido na tela para facilitar a leitura.

 Atributos ARIA (Accessible Rich Internet Applications): conjunto de atributos que adiciona informações de acessibilidade a elementos da página, principalmente quando eles não possuem significado suficiente no HTML. Ajuda tecnologias assistivas a entenderem a função, o estado e o comportamento dos componentes. Exemplo: informar que um botão abre um menu ou que um carrossel está pausado.

Atributo: informação adicionada a um elemento do HTML para definir alguma característica ou comportamento. Exemplo: o atributo “disabled” informa que um botão está desabilitado.

Atributo “lang”: atributo do HTML usado para informar o idioma de uma página ou de um trecho específico de texto. Essa informação ajuda navegadores, leitores de tela e outras tecnologias a interpretar e apresentar o conteúdo corretamente. Exemplo: uma página em português pode conter uma frase em inglês. Nesse caso, apenas esse trecho recebe o atributo lang em inglês para que o leitor de tela faça a pronúncia correta.

Barra de rolagem horizontal: barra que permite mover a página para os lados. Em conteúdos comuns, ela deve ser evitada quando a página é ampliada, pois dificulta bastante a leitura. Exemplo: ao ampliar um site em 400%, a pessoa precisa apenas rolar a página para baixo, sem ficar indo também para a esquerda e para a direita.

Codificação: forma como uma página é construída por meio de código para definir sua estrutura, funcionamento e comportamento. Exemplo: criar corretamente um formulário para que todos consigam preenchê-lo.

Comunicação alternativa: forma de apresentar uma informação de maneiras diferentes para facilitar sua compreensão por pessoas com necessidades distintas. Em ambientes digitais, tecnologias podem transformar textos, ícones, números ou outros conteúdos em representações mais fáceis de entender. Exemplo: um sistema pode substituir um ícone pouco conhecido por outro mais familiar ou complementar uma temperatura de "5 °C" com a imagem de uma pessoa agasalhada.

Componentes customizados: elementos de interface criados pelo desenvolvedor ou por bibliotecas, que não existem de forma nativa no HTML e, por isso, exigem cuidados extras para serem acessíveis. Exemplo: carrosséis de imagens, abas, acordeões, menus expansíveis, janelas modais e tooltips.

Contêiner: elemento que serve para agrupar outros elementos da página. Exemplo: uma caixa que reúne um título, um texto e um botão.

CSS: linguagem utilizada para definir a aparência visual de uma página, como cores, tamanhos, espaçamentos e posicionamento dos elementos.

Elemento nativo: elemento que já existe no HTML e possui significado e comportamento próprios, reconhecidos pelos navegadores e pelas tecnologias assistivas. Exemplo: usar um elemento de botão (“<button>”) para executar uma ação, em vez de transformar um elemento genérico em botão.

Frame (iframe): área dentro de uma página que exibe conteúdo vindo de outra página ou serviço, como vídeos, mapas ou formulários incorporados. Frames também precisam de um título descritivo para que tecnologias assistivas identifiquem seu conteúdo. Exemplo: incorporar um vídeo do YouTube utilizando um iframe.

Funcionalidade: recurso que permite ao usuário realizar uma ação em um sistema. Exemplo: pesquisar um conteúdo, enviar um formulário ou assistir a um vídeo.

HTML: linguagem utilizada para estruturar o conteúdo das páginas da web. Exemplo: é o código que define títulos, parágrafos, listas, tabelas, links e outros elementos de uma página.

Ícone: imagem simples utilizada para representar uma ação ou informação. Exemplo: um desenho de casa indicando a página inicial.

Janela modal (modal): janela que aparece sobre o conteúdo principal da página para apresentar informações ou solicitar uma ação do usuário antes de continuar. Exemplo: uma janela de confirmação antes de excluir um arquivo.

Layout responsivo: forma de organizar uma página para que ela se adapte a diferentes tamanhos de tela e níveis de ampliação. Exemplo: um site que continua fácil de usar tanto no celular quanto no computador.

Leitor de tela: tecnologia assistiva que identifica os elementos exibidos na tela, por exemplo, de um computador ou celular e apresenta essas informações por voz ou de forma tátil em um dispositivo braille. É utilizado principalmente por pessoas cegas ou com baixa visão. Exemplo: NVDA, JAWS, Talkback e VoiceOver.

Marcação semântica: uso correto dos elementos HTML para indicar o significado de cada parte do conteúdo, e não apenas sua aparência. Exemplo: usar um título como título, uma lista como lista e um botão como botão.

Medidas relativas e medidas absolutas: são formas diferentes de definir o tamanho de textos e elementos de uma página. As medidas absolutas são fixas e não se adaptam às preferências da pessoa usuária. Já as medidas relativas permitem que o conteúdo aumente ou diminua de forma mais flexível, facilitando o uso do zoom e da ampliação da tela. Exemplo: definir um texto sempre com 16 pixels é uma medida absoluta. Utilizar unidades relativas permite que esse texto aumente quando a pessoa amplia a página.

Mensagem de status: mensagem apresentada pelo sistema para informar o resultado de uma ação realizada pelo usuário. Exemplo: "Cadastro realizado com sucesso", "Nenhum resultado encontrado" ou "Sua senha foi alterada".

Nome acessível: nome que tecnologias assistivas utilizam para identificar um elemento da interface. Nem sempre ele aparece visualmente na tela. Exemplo: um botão representado apenas por um "X" pode ter como nome acessível "Fechar janela".

NVDA: leitor de telas gratuito para computadores com Windows. Ele transforma em voz as informações que aparecem na tela, permitindo que pessoas cegas ou com baixa visão utilizem computadores, naveguem na internet e acessem documentos e aplicativos. Também é amplamente utilizado por profissionais que realizam testes de acessibilidade para verificar se um site ou aplicação pode ser usado por pessoas que dependem desse tipo de tecnologia.

Ordem de leitura: sequência em que o conteúdo é apresentado às tecnologias assistivas. Ela deve corresponder à ordem lógica em que o conteúdo aparece visualmente. Exemplo: um leitor de telas não deve anunciar primeiro o rodapé e depois o início da página.

Pop-up: pequena janela que aparece sobre o conteúdo principal para apresentar uma informação ou solicitar alguma ação. Exemplo: um aviso de confirmação ou uma mensagem de erro.

Pronúncia: forma como um leitor de telas fala uma palavra ou frase. A pronúncia depende da configuração correta do idioma. Exemplo: uma expressão em inglês como “Open Source” será lida corretamente quando o idioma desse trecho estiver identificado como inglês (<span lang="en">Open Source</span>).

Rótulo: texto que identifica claramente a função de um elemento da interface. Exemplo: o texto "Buscar" em um botão de pesquisa.

Semântica: significado que cada elemento possui dentro da estrutura de uma página. Exemplo: um botão representa uma ação, enquanto um link representa uma navegação para outro local

Sintetizador de voz: programa que transforma texto em fala. É utilizado pelos leitores de tela para ler o conteúdo de páginas, aplicativos e documentos. Quando o idioma está corretamente identificado, o sintetizador ajusta automaticamente a pronúncia e, em alguns casos, até a voz utilizada. Exemplo: ao encontrar um trecho em inglês em uma página em português, o sintetizador passa a pronunciar esse trecho corretamente.

Tecnologia assistiva: produto, equipamento ou software que auxilia pessoas com deficiência a acessar computadores, celulares e conteúdos digitais. Exemplo: leitores de tela, ampliadores de tela, teclados adaptados e comandos por voz.

Título da página: texto que identifica uma página e aparece na aba do navegador. Também costuma ser a primeira informação anunciada por leitores de tela ao abrir uma página. Exemplo: "Trabalhe Conosco – Empresa X".

Tooltip: pequena mensagem que aparece quando o usuário posiciona o cursor do mouse ou o foco do teclado sobre um elemento, oferecendo uma informação complementar. Exemplo: ao parar o cursor sobre um ícone de ajuda, aparece uma pequena explicação sobre sua função.

Zoom: recurso do navegador ou do dispositivo que amplia o conteúdo da página para facilitar a leitura. Exemplo: aplicar zoom de 200% significa exibir o conteúdo com o dobro do tamanho original.

 

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.