Acessibilidade web e imagens: muito além do texto alternativo

A acessibilidade web não é opcional: é um direito fundamental. Cerca de 15% da população mundial vive com algum grau de deficiência visual, e imagens mal otimizadas tornam a navegação impossível para milhões de pessoas. Em 2025, acessibilidade é requisito ético e, em muitos países, obrigação legal.

Entendendo necessidades visuais

Principais tipos de deficiência visual

1. Cegueira total

• Necessidade: descrição textual completa do conteúdo visual
• Ferramentas: leitores de tela (NVDA, JAWS, VoiceOver)
• Implementação: alt text detalhado e suporte ARIA

2. Baixa visão

• Necessidade: alto contraste, escalabilidade, fontes grandes
• Ferramentas: ampliadores, temas de alto contraste
• Implementação: contraste 7:1 (AAA), zoom até 200%

3. Daltonismo (8% homens, 0,5% mulheres)

• Necessidade: informação além das cores
• Tipos: protanopia, deuteranopia, tritanopia
• Implementação: padrões, formas, textos complementares

4. Fotossensibilidade

• Necessidade: controle de brilho, modo escuro
• Ferramentas: filtros, ajustes do sistema
• Implementação: respeito a prefers-color-scheme

Além do alt text: acessibilidade completa

1. Alt text estratégico e contextual

<!-- ❌ Alt text decorativo -->
<img src="grafico-vendas.jpg" alt="Gráfico">

<!-- ❌ Alt text redundante -->
<img src="grafico-vendas.jpg" alt="Imagem de um gráfico de vendas">

<!-- ✅ Alt text funcional -->
<img src="grafico-vendas.jpg"
     alt="As vendas cresceram 35% no 4º trimestre de 2024, de 2,1M para 2,8M de euros">

<!-- ✅ Conteúdo decorativo -->
<img src="detalhe-floral.jpg" alt="" role="presentation">

2. Descrições longas para conteúdo complexo

<img src="infografico-sustentabilidade.jpg"
     alt="Infográfico sobre impacto ambiental de formatos de imagem"
     longdesc="#descricao-detallhada">

<div id="descricao-detallhada" class="sr-only">
  <h3>Descrição detalhada da infografia:</h3>
  <p>Comparação de três formatos de imagem:</p>
  <ul>
    <li>JPEG: 45% mais emissões de CO₂ por transferência extra</li>
    <li>WebP: Redução de 30% no tamanho, 25% menos emissões</li>
    <li>AVIF: Redução de 50% no tamanho, 40% menos emissões</li>
  </ul>
  <p>Conclusão: formatos modernos reduzem significativamente o impacto ambiental.</p>
</div>

3. Elementos ARIA em imagens interativas

<button type="button"
        aria-label="Comprimir imagem enviada"
        aria-describedby="ajuda-compressao">
  <img src="compress-icon.svg" alt="" role="presentation">
  Comprimir
</button>
<div id="ajuda-compressao" class="sr-only">
  Reduz o tamanho do arquivo mantendo qualidade visual
</div>

<div role="img"
     aria-labelledby="titulo-galeria"
     aria-describedby="descricao-galeria">
  <h3 id="titulo-galeria">Portfólio 2024</h3>
  <p id="descricao-galeria">
    Coleção com 12 fotografias profissionais organizadas por data
  </p>
  <!-- Imagens individuais ... -->
</div>

Contraste de cor na prática

Níveis WCAG 2.1

Nível	Contraste mínimo	Uso
AA	4,5:1 texto normal	Requisito legal mínimo
AA	3:1 texto grande	Títulos e botões
AAA	7:1 texto normal	Inclusão máxima
AAA	4,5:1 texto grande	Conteúdo crítico

Cálculo automático de contraste

function calculateContrast(color1, color2) {
  const getLuminance = (r, g, b) => {
    const [rs, gs, bs] = [r, g, b].map((component) => {
      component /= 255;
      return component <= 0.03928
        ? component / 12.92
        : Math.pow((component + 0.055) / 1.055, 2.4);
    });
    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
  };

  const luminancia1 = getLuminance(...color1);
  const luminancia2 = getLuminance(...color2);
  const maisClaro = Math.max(luminancia1, luminancia2);
  const maisEscuro = Math.min(luminancia1, luminancia2);

  return (maisClaro + 0.05) / (maisEscuro + 0.05);
}

CSS para alto contraste e preferências do usuário

@media (prefers-contrast: high) {
  .image-overlay-text {
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    border: 2px solid #fff;
  }

  .interactive-image-button {
    border: 3px solid currentColor;
    background: rgba(255, 255, 255, 0.95);
    color: #000;
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-carousel,
  .parallax-image {
    animation: none;
    transform: none;
  }

  .hover-image-effect {
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .image-overlay,
  .glassmorphism-effect {
    backdrop-filter: none;
    background: rgba(0, 0, 0, 0.95);
  }
}

Escalabilidade sem barreiras

Imagens que suportam zoom

.responsive-image-container {
  max-width: 100%;
  height: auto;
  overflow: hidden;
}

.responsive-image {
  width: 100%;
  height: auto;
  max-width: none;
}

.image-with-text {
  position: relative;
}

.image-text-overlay {
  position: absolute;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  line-height: 1.4;
  padding: 0.5em;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
}

@media (max-width: 768px) {
  .image-text-overlay {
    font-size: clamp(0.875rem, 3vw, 1.25rem);
  }
}

Gestão de foco em imagens interativas

class AccessibleImageGallery {
  constructor(container) {
    this.container = container;
    this.currentIndex = 0;
    this.images = container.querySelectorAll('[role="img"]');
    this.setupKeyboardNavigation();
  }

  setupKeyboardNavigation() {
    this.container.addEventListener('keydown', (e) => {
      switch (e.key) {
        case 'ArrowRight':
        case 'ArrowDown':
          e.preventDefault();
          this.navigate(1);
          break;
        case 'ArrowLeft':
        case 'ArrowUp':
          e.preventDefault();
          this.navigate(-1);
          break;
        case 'Home':
          e.preventDefault();
          this.goToImage(0);
          break;
        case 'End':
          e.preventDefault();
          this.goToImage(this.images.length - 1);
          break;
      }
    });
  }

  navigate(direction) {
    const newIndex = this.currentIndex + direction;
    if (newIndex >= 0 && newIndex < this.images.length) {
      this.goToImage(newIndex);
    }
  }

  goToImage(index) {
    this.images[this.currentIndex]?.setAttribute('tabindex', '-1');

    this.currentIndex = index;
    const currentImage = this.images[this.currentIndex];
    currentImage.setAttribute('tabindex', '0');
    currentImage.focus();

    this.announceImageChange(index + 1, this.images.length);
  }

  announceImageChange(current, total) {
    const announcement = document.createElement('div');
    announcement.setAttribute('aria-live', 'polite');
    announcement.setAttribute('aria-atomic', 'true');
    announcement.className = 'sr-only';
    announcement.textContent = `Imagem ${current} de ${total}`;

    document.body.appendChild(announcement);
    setTimeout(() => announcement.remove(), 1000);
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const galerias = document.querySelectorAll('[data-gallery="accessible"]');
  galerias.forEach((galeria) => new AccessibleImageGallery(galeria));
});

Carga progressiva acessível

Placeholder semântico

<div class="progressive-image-container"
     aria-live="polite"
     aria-label="Carregando imagem: Gráfico de desempenho Q4 2024">
  <div class="image-placeholder"
       role="img"
       aria-label="Imagem carregando: gráfico mostra aumento de 35% nas vendas">
    <svg viewBox="0 0 400 300" aria-hidden="true">
      <rect width="400" height="300" fill="#f0f0f0" />
      <text x="200" y="150" text-anchor="middle" fill="#666">
        Carregando gráfico...
      </text>
    </svg>
  </div>

  <img src="grafico-desempenho-q4.jpg"
       alt="Gráfico de barras com vendas trimestrais: T1 2,1M€, T2 2,3M€, T3 2,5M€, T4 2,8M€. Tendência de crescimento acelerado no último trimestre."
       class="progressive-image"
       loading="lazy"
       onload="this.parentElement.classList.add('loaded')">
</div>

.progressive-image-container {
  position: relative;
  overflow: hidden;
}

.image-placeholder {
  display: block;
  transition: opacity 0.3s ease;
}

.progressive-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.progressive-image-container.loaded .image-placeholder {
  opacity: 0;
}

.progressive-image-container.loaded .progressive-image {
  opacity: 1;
}

@keyframes loading-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
}

.image-placeholder {
  animation: loading-pulse 1.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .image-placeholder {
    animation: none;
    opacity: 0.6;
  }
}

Testes de acessibilidade automatizados

Ferramentas de validação contínua

function auditarAcessibilidadeDeImagens() {
  const problemas = [];

  document.querySelectorAll('img').forEach((img, index) => {
    const alt = img.getAttribute('alt');

    if (!alt && alt !== '') {
      problemas.push({
        tipo: 'alt-ausente',
        elemento: img,
        mensagem: `Imagem ${index + 1} sem atributo alt`,
        severidade: 'erro',
      });
    }

    if (alt && alt.length > 125) {
      problemas.push({
        tipo: 'alt-extenso',
        elemento: img,
        mensagem: `Alt text muito longo (${alt.length} caracteres)`,
        severidade: 'aviso',
      });
    }

    if (img.getAttribute('role') === 'presentation' && alt !== '') {
      problemas.push({
        tipo: 'decorativo-com-alt',
        elemento: img,
        mensagem: 'Imagem decorativa deve usar alt vazio',
        severidade: 'aviso',
      });
    }
  });

  document.querySelectorAll('.image-text-overlay').forEach((overlay) => {
    const style = getComputedStyle(overlay);
    const contraste = calculateContrast(style.color, style.backgroundColor);

    if (contraste < 4.5) {
      problemas.push({
        tipo: 'contraste-baixo',
        elemento: overlay,
        mensagem: `Contraste insuficiente: ${contraste.toFixed(2)}:1`,
        severidade: 'erro',
      });
    }
  });

  return problemas;
}

function executarAuditoriaA11y() {
  const problemas = auditarAcessibilidadeDeImagens();

  if (problemas.length === 0) {
    console.log('✅ Imagens em conformidade com critérios A11y');
    return;
  }

  console.group('🔍 Problemas de acessibilidade em imagens:');
  problemas.forEach((problema) => {
    const icone = problema.severidade === 'erro' ? '❌' : '⚠️';
    console.log(`${icone} ${problema.mensagem}`, problema.elemento);
  });
  console.groupEnd();

  if (process.env.NODE_ENV === 'development') {
    exibirProblemasA11y(problemas);
  }
}

if (process.env.NODE_ENV === 'development') {
  window.addEventListener('load', executarAuditoriaA11y);
}

Conformidade legal e regulatória

Principais normas por região

Estados Unidos — ADA (Americans with Disabilities Act)

• Abrange: empresas e serviços públicos
• Padrão recomendado: WCAG 2.1 nível AA
• Penalidades: multas entre US$ 75.000 e US$ 150.000 por ocorrência

União Europeia — EN 301 549

• Abrange: setor público (desde 2018) e privado (desde 2025)
• Padrão recomendado: WCAG 2.1 nível AA
• Penalidades: até 4% do faturamento anual

Brasil — Decreto 5.296/2004 e Lei Brasileira de Inclusão

• Abrange: portais públicos e privados com grande audiência
• Padrão recomendado: WCAG 2.1 nível AA
• Penalidades: advertências, multas e ações civis

Checklist essencial WCAG 2.1 AA

## ✅ Imagens acessíveis em produção

### Perceptível
- [ ] Alt text significativo em imagens informativas
- [ ] Imagens decorativas com alt="" ou role="presentation"
- [ ] Contraste mínimo 4,5:1 para texto sobre imagem
- [ ] Conteúdo crítico não depende apenas de cor

### Operável
- [ ] Interações funcionam apenas com teclado
- [ ] Conteúdos animados possuem pausa e controle
- [ ] Foco visível em todos os elementos interativos

### Compreensível
- [ ] Alt text contextualiza propósito da imagem
- [ ] Gráficos possuem descrições complementares
- [ ] Mensagens de erro claras e acionáveis

### Robusto
- [ ] HTML válido e semântico
- [ ] Marcadores ARIA aplicados corretamente
- [ ] Compatibilidade testada com leitores de tela

Ferramentas e recursos úteis

Extensões de navegador

• WAVE Web Accessibility Evaluator: visualização de barreiras
• axe DevTools: auditoria granular dentro do DevTools
• Lighthouse: relatório integrado no Chrome DevTools
• Colour Contrast Analyser: checagem precisa de contraste

Leitores de tela para testes

• NVDA (Windows) — gratuito e popular entre QA
• JAWS (Windows) — referência corporativa
• VoiceOver (macOS/iOS) — nativo em dispositivos Apple
• TalkBack (Android) — padrão em smartphones Android

APIs e snippets que aceleram o trabalho

import { generateAltText } from '@microsoft/cognitive-services-vision';

async function gerarAltTextContextual(urlDaImagem, contexto) {
  const descricaoIA = await generateAltText(urlDaImagem);
  const altContextual = `${contexto}: ${descricaoIA}`;

  return altContextual.length > 125
    ? `${altContextual.substring(0, 120)}...`
    : altContextual;
}

function detectarPreferenciasDoUsuario() {
  return {
    movimentoReduzido: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
    altoContraste: window.matchMedia('(prefers-contrast: high)').matches,
    transparenciaReduzida: window.matchMedia('(prefers-reduced-transparency: reduce)').matches,
    esquemaDeCores: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
  };
}

function adaptarInterfaceParaUsuario() {
  const preferencias = detectarPreferenciasDoUsuario();

  if (preferencias.movimentoReduzido) {
    document.documentElement.classList.add('reduced-motion');
  }

  if (preferencias.altoContraste) {
    document.documentElement.classList.add('high-contrast');
  }

  if (preferencias.transparenciaReduzida) {
    document.documentElement.classList.add('low-transparency');
  }
}

Conclusão: acessibilidade é vantagem competitiva

Sites acessíveis ampliam o alcance, evitam processos, fortalecem SEO e reforçam valores de inclusão. Ao otimizar imagens com acessibilidade em mente, você melhora a experiência de todos os usuários — não apenas de quem depende de tecnologias assistivas.