WCAG 1.1.1: Conteúdo não textual

O que Esta Regra Significa

O Critério de Sucesso 1.1.1 Conteúdo Não Textual das WCAG é um requisito de Nível A sob o princípio Perceptível. Ele estabelece que todo conteúdo não textual apresentado ao usuário deve ter uma alternativa em texto que sirva ao propósito equivalente. “Conteúdo não textual” é definido de forma ampla: abrange imagens raster (JPEG, PNG, GIF, WebP), gráficos vetoriais (SVG), botões e campos de formulário baseados em imagem, mapas de imagem, elementos canvas, clipes de áudio, vídeo, animações, CAPTCHAs e elementos decorativos.

Uma alternativa em texto pode assumir várias formas dependendo do tipo de elemento: um atributo alt em um elemento <img>, um aria-label ou aria-labelledby em um SVG ou elemento com função (role), um elemento title dentro de um <object>, ou um <figcaption> associado a uma figura. O requisito principal é que o texto alternativo comunique a mesma informação ou função que o próprio conteúdo visual — não é simplesmente um nome de arquivo ou um marcador genérico.

O critério define vários casos específicos que determinam como deve ser uma alternativa em texto adequada:

• Controles e entradas: Se o conteúdo não textual é um controle ou aceita entrada do usuário (como um botão de imagem ou uma imagem usada como link), a alternativa em texto deve descrever seu propósito ou função, não apenas sua aparência.
• Mídia temporal: Conteúdo apenas de áudio ou apenas de vídeo usado como apresentação independente exige, no mínimo, um rótulo descritivo que o identifique; transcrições completas e legendas são tratadas por critérios posteriores (1.2.x).
• Testes e experiências sensoriais: Se o conteúdo é um teste ou exercício que não pode ser apresentado em texto sem prejudicar seu propósito (como um quebra-cabeça visual), a alternativa em texto precisa apenas identificar e descrever o conteúdo não textual.
• CAPTCHAs: As alternativas em texto devem descrever o propósito do CAPTCHA, e uma forma alternativa de CAPTCHA usando uma modalidade sensorial diferente deve ser fornecida.
• Decoração, formatação e conteúdo invisível: Se uma imagem é puramente decorativa, usada para espaçamento ou não é apresentada aos usuários, ela deve ser implementada de forma que possa ser ignorada por tecnologias assistivas — normalmente por meio de um atributo alt="" vazio ou role="presentation".

Um aprovado é alcançado quando todo elemento não textual significativo expõe uma alternativa em texto programática que transmite de forma equivalente seu propósito, ou é explicitamente marcado como decorativo para que as tecnologias assistivas possam ignorá-lo. Uma falha ocorre quando uma imagem não tem atributo alt algum, quando o valor de alt é o nome do arquivo (por exemplo, alt="img_header_logo_v2.png"), quando um SVG usado como conteúdo significativo não tem nem um elemento <title> nem um rótulo acessível, ou quando uma imagem decorativa tem incorretamente um texto alternativo descritivo que adiciona ruído para usuários de leitores de tela.

Por Que Isso Importa

De acordo com a Organização Mundial da Saúde, aproximadamente 2,2 bilhões de pessoas no mundo têm algum tipo de deficiência visual ou cegueira. Usuários de leitores de tela — que dependem de fala sintetizada ou de linhas Braille atualizáveis para consumir conteúdo digital — dependem inteiramente de alternativas em texto para entender imagens, ícones, gráficos e controles gráficos. Sem texto alternativo preciso, uma página de produto em um site de e-commerce se reduz a uma lista de preços sem contexto visual; a navegação de um banco repleta de logotipos se torna uma fileira de botões sem rótulo; o diagrama de verificação de sintomas de um hospital é invisível para a pessoa que tenta fazer uma autoavaliação.

Considere um cenário concreto: uma pessoa cega visita uma plataforma de e-commerce turca para comprar um casaco. O carrossel de produtos contém seis imagens mostrando diferentes ângulos e variantes de cor do casaco. Se nenhuma dessas imagens tiver texto alternativo significativo, o leitor de tela da pessoa anuncia apenas “imagem, imagem, imagem” — seis vezes. Ela não consegue determinar qual variante é azul-marinho versus preta, não consegue entender qual imagem mostra o bolso traseiro e pode abandonar a compra completamente. Uma colega vidente com o mesmo link de produto conclui a compra em menos de dois minutos. Essa diferença é ao mesmo tempo uma falha de acessibilidade e uma perda de negócio.

Além da cegueira, esse critério também beneficia pessoas com deficiências cognitivas que dependem de ferramentas de texto para fala para complementar a leitura, pessoas com deficiências motoras que navegam por teclado e voz e precisam de rótulos claros em controles interativos, e pessoas com baixa largura de banda para as quais as imagens podem não carregar — nesses casos, o texto alternativo serve como um substituto funcional. Além disso, texto alternativo bem elaborado melhora a indexação por mecanismos de busca porque rastreadores tratam atributos alt de imagens como sinais textuais relevantes, apoiando diretamente resultados de SEO.

Regras Relacionadas do Axe-core

O mecanismo de acessibilidade axe-core aplica a WCAG 1.1.1 por meio de sete regras automatizadas distintas. Entender o que cada regra verifica — e onde estão seus limites — é essencial para uma estratégia de testes completa.

• image-alt: Verifica se todo elemento <img> tem um atributo alt (que pode estar vazio para imagens decorativas) ou um nome acessível fornecido via aria-label, aria-labelledby ou title. Ela sinaliza imagens que não têm atributo alt algum, já que o navegador então expõe o caminho do arquivo como o nome acessível.
• input-image-alt: Verifica se elementos <input type="image"> têm um atributo alt não vazio. Entradas de imagem atuam como botões de envio e devem transmitir sua função, não apenas sua aparência visual. Um alt ausente ou vazio em uma entrada de imagem torna o botão efetivamente inutilizável com um leitor de tela.
• area-alt: Verifica se todo elemento <area> dentro de um mapa de imagem tem uma alternativa em texto não vazia via alt, aria-label ou aria-labelledby. Mapas de imagem são um padrão legado ainda usado em algumas aplicações corporativas e portais do setor público, e cada área clicável deve descrever de forma independente seu destino de link ou função.
• object-alt: Verifica se elementos <object> têm um nome acessível. O elemento <object> é historicamente usado para incorporar conteúdo Flash, PDFs ou outras mídias; sem um rótulo, leitores de tela não têm como identificar o conteúdo incorporado.
• svg-img-alt: Verifica se elementos <svg> inline com role="img" têm um nome acessível, normalmente fornecido por um elemento filho <title> (com um aria-labelledby correspondente) ou um atributo aria-label na raiz do SVG. Interfaces modernas usam SVG extensivamente para ícones e ilustrações; essa regra captura SVGs sem rótulo que carregam significado.
• role-img-alt: Verifica se qualquer elemento com role="img" — que pode ser aplicado a elementos não-SVG como <div> ou <span> usados como contêineres de imagem — tem um nome acessível. Esse padrão é comum em sistemas de ícones personalizados e implementações com imagens de fundo em CSS em que nenhum elemento de imagem nativo é usado.
• image-redundant-alt: Sinaliza situações em que o texto alternativo de uma imagem duplica texto visível adjacente, normalmente quando uma imagem aparece dentro de um link junto com um rótulo em texto. Embora não seja uma falha grave, texto alternativo redundante faz com que leitores de tela anunciem a mesma informação duas vezes, degradando a experiência de escuta. Essa regra exige julgamento humano para ser resolvida corretamente porque só uma pessoa pode determinar se a duplicação é realmente redundante ou intencionalmente adicional.

É importante observar que ferramentas automatizadas, incluindo o axe-core, não conseguem avaliar a qualidade do texto alternativo — apenas sua presença e estrutura básica. Uma regra pode ser aprovada para uma imagem com alt="photo" ou alt="decorative border", embora nenhuma das duas seja significativa. A revisão manual é, portanto, sempre necessária junto com a varredura automatizada para confirmar que o texto alternativo descreve com precisão o conteúdo e o propósito de cada imagem.

Como Testar

1. Varredura automatizada com axe DevTools ou Lighthouse: Instale a extensão de navegador axe DevTools (disponível para Chrome e Firefox). Abra a página em teste, ative a extensão e execute uma análise de página inteira. Filtre os resultados pelos IDs de regra listados acima: image-alt, input-image-alt, area-alt, object-alt, svg-img-alt, role-img-alt e image-redundant-alt. Para cada elemento sinalizado, a ferramenta destaca o nó problemático no DOM e explica a violação. O Lighthouse (embutido no Chrome DevTools na auditoria de Acessibilidade) também apresenta violações de image-alt com detalhes em nível de elemento. Registre todas as violações com seus seletores de elemento e contexto ao redor para repasse à equipe de desenvolvimento.
2. Inspeção manual do DOM: Abra o painel Elements das DevTools do navegador e pesquise por todas as tags <img>, <input type="image">, <area>, <object> e <svg>. Para cada uma, verifique se há um atributo alt apropriado ou um rótulo ARIA e se seu valor é significativo no contexto. Preste atenção especial a imagens carregadas dinamicamente por meio de frameworks JavaScript como React ou Vue, que podem não aparecer em um snapshot HTML estático.
3. Teste com leitor de tela usando NVDA e Firefox: Inicie o NVDA (gratuito, Windows) e abra a página no Firefox. Navegue usando a tecla G para pular entre gráficos. O NVDA anuncia o nome acessível de cada imagem; ouça anúncios de caminhos de arquivo, “image” ou anúncios vazios — todos indicam falha. Para botões de imagem e links, use a tecla Tab para alcançar cada controle e verifique se o rótulo falado transmite a ação que o controle executa.
4. Teste com leitor de tela usando VoiceOver e Safari (macOS/iOS): Ative o VoiceOver (Command+F5 no macOS). Use VO+Seta para a direita para percorrer o conteúdo elemento por elemento, ou abra o Item Chooser (VO+U) e selecione Images no rotor para ver uma lista de todas as imagens e seus rótulos de uma vez. No iOS, deslize para a direita pela página e ouça como cada imagem é anunciada.
5. Teste com leitor de tela usando JAWS e Chrome: No JAWS, pressione G para navegar por gráficos. Cada imagem deve produzir uma descrição clara e significativa. Use o visualizador virtual do JAWS (Insert+F1) para ver o nome acessível calculado e a função de qualquer elemento em questão.
6. Verificar o tratamento de imagens decorativas: Para imagens que você considera decorativas, confirme se elas têm alt="" e nenhum atributo title ou rótulo ARIA que as reexponha. Com um leitor de tela, navegue até esses elementos e confirme que eles são completamente ignorados na ordem de leitura.

Como Corrigir

Imagem informativa sem alt — Incorreto

<!-- Image conveys product information but has no alt attribute -->
<img src='jacket-navy-front.jpg'>

Imagem informativa sem alt — Correto

<!-- alt text describes the visual content and its purpose in context -->
<img src='jacket-navy-front.jpg' alt='Navy blue wool jacket, front view, with double-breasted buttons'>

Imagem decorativa rotulada incorretamente — Incorreto

<!-- Decorative divider image exposes a descriptive alt that adds noise -->
<img src='divider-ornament.png' alt='Decorative ornamental divider with scrollwork pattern'>

Imagem decorativa corretamente ocultada de tecnologia assistiva — Correto

<!-- Empty alt tells screen readers to skip this image entirely -->
<img src='divider-ornament.png' alt=''>

Ícone SVG sem nome acessível — Incorreto

<!-- SVG used as a meaningful icon has role="img" but no label -->
<svg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

Ícone SVG com nome acessível — Correto

<!-- title element provides the accessible name; aria-labelledby associates it -->
<svg role='img' aria-labelledby='icon-account-title' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <title id='icon-account-title'>My Account</title>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

Botão de input de imagem sem alt — Incorreto

<!-- Image submit button has no alt; screen reader announces only "image" -->
<input type='image' src='btn-search.png'>

Botão de input de imagem com alt descritivo — Correto

<!-- alt describes the button's function, not its appearance -->
<input type='image' src='btn-search.png' alt='Search'>

Erros Comuns

• Usar o nome do arquivo como texto alternativo: Escrever alt="hero_banner_v3_final.jpg" expõe o caminho do arquivo a leitores de tela sem conteúdo significativo. Sempre escreva texto alternativo que descreva o que a imagem mostra ou qual propósito ela serve.
• Definir o texto alternativo como "image" ou "photo": Valores genéricos como alt="image" ou alt="photo" passam em verificações automatizadas porque não estão vazios, mas não transmitem informação. Leitores de tela já anunciam a função do elemento como “image”, então repetir essa palavra desperdiça o tempo da pessoa usuária.
• Esquecer o alt em imagens injetadas dinamicamente: Imagens inseridas no DOM via JavaScript (por exemplo, um carrossel de produtos construído com React) podem não ter atributos alt no HTML inicial. Garanta que o componente JavaScript renderize o atributo alt ao mesmo tempo em que renderiza o src.
• Aplicar role="presentation" a imagens significativas: Usar role="presentation" ou role="none" em imagens que carregam conteúdo as remove completamente da árvore de acessibilidade. Isso é apropriado apenas para imagens puramente decorativas; usá-lo em imagens informativas causa perda total de conteúdo para usuários de leitores de tela.
• Omitir o atributo alt em imagens de fundo CSS usando role="img": Quando um <div> é estilizado com uma imagem de fundo e recebe role="img", desenvolvedores às vezes esquecem de adicionar aria-label. Sem um rótulo, o elemento está na árvore de acessibilidade como uma imagem sem nome — tão ruim quanto um alt ausente.
• Escrever texto alternativo que descreve a aparência em vez do significado: Para um gráfico, escrever alt="A blue bar chart" descreve o estilo visual, mas não os dados. O texto alternativo deve transmitir o insight principal, como alt="Bar chart showing Q3 revenue grew 18% year-over-year".
• Texto alternativo duplicado em várias imagens de um conjunto: Quando uma listagem de produto mostra seis miniaturas do mesmo item, atribuir a todas o mesmo texto alternativo (por exemplo, alt="Running shoe") falha em distingui-las. Cada imagem em um conjunto deve descrever seu conteúdo ou ângulo específico.
• Ausência de alt em elementos <area> em mapas de imagem: Desenvolvedores que usam mapas de imagem frequentemente adicionam texto alternativo à <img> pai, mas esquecem que cada área <area> também exige seu próprio atributo alt descrevendo aquele destino de link específico.
• Usar texto de tooltip como substituto para texto alternativo: O atributo title produz um tooltip visual e é lido por alguns leitores de tela, mas o suporte do navegador é inconsistente e ele não é exposto em todos os contextos de acessibilidade. Ele deve complementar, não substituir, um atributo alt adequado.
• Deixar de testar ícones SVG entregues via sprite sheets ou elementos <use>: Sprites SVG referenciados via <use href="#icon-id"> podem não expor seu <title> interno a todos os leitores de tela devido a limites de shadow DOM. Sempre teste ícones baseados em sprites com leitores de tela reais e complemente com aria-label no elemento <svg> externo quando necessário.

Relação com os Regulamentos de Acessibilidade da Turquia

A Circular Presidencial 2025/10 da Turquia, publicada no Diário Oficial nº 32933 em 21 de junho de 2025, estabelece requisitos obrigatórios de acessibilidade digital para uma ampla gama de entidades públicas e privadas que operam na Turquia. A circular faz referência às WCAG 2.2 como seu padrão técnico, tornando todos os critérios de sucesso de Nível A — incluindo WCAG 1.1.1 Conteúdo Não Textual — obrigações legalmente exigíveis em vez de recomendações de boas práticas.

As entidades abrangidas incluem: todas as instituições públicas e órgãos governamentais, bancos e instituições financeiras, hospitais e prestadores de serviços de saúde, empresas de telecomunicações com 200.000 ou mais assinantes, plataformas de e-commerce, agências de viagem, empresas de transporte privado e escolas privadas autorizadas pelo Ministério da Educação Nacional (MoNE). Para instituições públicas, a conformidade deve ser alcançada em até um ano a partir da data de vigência da circular. Entidades do setor privado têm um prazo de implementação de dois anos.

A WCAG 1.1.1 é particularmente relevante no cenário digital turco porque muitos setores de alto tráfego abrangidos pela circular — incluindo marketplaces de e-commerce, portais bancários e plataformas de serviços governamentais — são fortemente dependentes de imagens. Fotografias de produtos em sites de e-commerce, anúncios públicos baseados em infográficos em portais governamentais, painéis financeiros repletos de gráficos em aplicações bancárias e interfaces baseadas em formulários em portais de pacientes de hospitais se enquadram diretamente no escopo desse critério.

A não conformidade com requisitos de Nível A sob a circular expõe as entidades abrangidas a escrutínio regulatório e possíveis sanções. Como a WCAG 1.1.1 é um dos critérios mais frequentemente violados e mais facilmente testados — detectável tanto por ferramentas automatizadas quanto por percursos básicos com leitores de tela — é provável que figure com destaque em auditorias de conformidade. Organizações sujeitas à circular devem tratar a correção de todas as violações de image-alt como um item de ação imediato e de alta prioridade, não como uma melhoria adiada. A implantação de um SDK de overlay de acessibilidade como o Accsible pode ajudar a identificar e corrigir parcialmente alternativas em texto ausentes em tempo real, mas uma correção completa no nível do código-fonte continua sendo o caminho mais robusto e duradouro para a conformidade.