Accessibility Checker (WCAG AAA)

Proposito

Garantir que o app Nossa Maternidade seja acessivel para todas as maes, incluindo aquelas com deficiencias visuais ou motoras.

Padroes WCAG AAA

1. Touch Targets - Minimo 44pt (iOS) / 48dp (Android)

// ❌ ERRADO - muito pequeno
<TouchableOpacity style={{ width: 30, height: 30 }}>

// ✅ CORRETO - tamanho minimo
import { Tokens } from '@/theme/tokens';
<TouchableOpacity
  style={{
    minWidth: Tokens.touchTargets.min,  // 44
    minHeight: Tokens.touchTargets.min, // 44
  }}
>

Token disponivel: Tokens.touchTargets.min = 44

2. Contraste de Cores - 7:1 (Nivel AAA)

Cores do tema ja sao WCAG AAA compliant:

• text.primary sobre background.canvas = 15.8:1 ✅
• text.secondary sobre background.card = 8.6:1 ✅
• text.tertiary sobre fundos = 8.6:1 ✅

3. Accessibility Labels - OBRIGATORIO em Interativos

// ❌ ERRADO - sem label
<TouchableOpacity onPress={handleLike}>
  <HeartIcon />
</TouchableOpacity>

// ✅ CORRETO - com labels
<TouchableOpacity
  onPress={handleLike}
  accessibilityLabel="Curtir publicacao"
  accessibilityRole="button"
  accessibilityHint="Toque duas vezes para curtir"
>
  <HeartIcon />
</TouchableOpacity>

4. Accessibility Roles

// Roles comuns:
accessibilityRole = 'button'; // Botoes
accessibilityRole = 'link'; // Links
accessibilityRole = 'image'; // Imagens
accessibilityRole = 'text'; // Texto simples
accessibilityRole = 'header'; // Titulos de secao
accessibilityRole = 'search'; // Campo de busca
accessibilityRole = 'tab'; // Abas
accessibilityRole = 'checkbox'; // Checkboxes
accessibilityRole = 'switch'; // Toggles

5. Accessibility State

<TouchableOpacity
  accessibilityState={{
    selected: isSelected,
    disabled: isDisabled,
    checked: isChecked,
    expanded: isExpanded,
  }}
>

6. Imagens Decorativas vs Informativas

// Decorativa - esconder do screen reader
<Image
  source={decorativeImage}
  accessibilityElementsHidden={true}
  importantForAccessibility="no-hide-descendants"
/>

// Informativa - descrever
<Image
  source={chartImage}
  accessibilityLabel="Grafico mostrando aumento de 20% no bem-estar"
/>

Checklist de Acessibilidade

Touch Targets

• Todos os botoes tem minimo 44x44pt
• Areas de toque nao sobrepoem
• Espacamento adequado entre elementos clicaveis

Labels e Roles

• Todos elementos interativos tem accessibilityLabel
• accessibilityRole definido corretamente
• accessibilityHint para acoes complexas

Contraste

• Texto sobre fundos tem contraste 7:1+
• Icones tem contraste 3:1+
• Funciona em light e dark mode

Navegacao

• Ordem logica de foco (tab order)
• Headings marcados com accessibilityRole="header"
• Conteudo agrupado logicamente

Estados

• Estados disabled comunicados
• Estados selected/checked comunicados
• Feedback de erro acessivel

Patterns a Detectar com Grep

# TouchableOpacity sem accessibilityLabel
grep -r "TouchableOpacity" --include="*.tsx" | grep -v "accessibilityLabel"

# Pressable sem accessibilityLabel
grep -r "Pressable" --include="*.tsx" | grep -v "accessibilityLabel"

# Button sem accessibilityLabel
grep -r "<Button" --include="*.tsx" | grep -v "accessibilityLabel"

# width/height menores que 44
grep -rE "(width|height):\s*[1-3][0-9]" --include="*.tsx"

Ferramentas de Teste

iOS

• VoiceOver: Settings > Accessibility > VoiceOver
• Accessibility Inspector (Xcode)

Android

• TalkBack: Settings > Accessibility > TalkBack
• Accessibility Scanner app

Comandos do Projeto

# Rodar lint de acessibilidade
npm run lint -- --rule react-native-a11y/has-accessibility-props:error

Tokens de Acessibilidade

import { Tokens } from '@/theme/tokens';

// Touch targets
Tokens.touchTargets.min; // 44 (minimo WCAG)
Tokens.touchTargets.medium; // 44
Tokens.touchTargets.large; // 56
Tokens.touchTargets.xl; // 64

// Emoji sizes (garantir legibilidade)
Tokens.emojiSizes.lg; // 44 (WCAG compliant)

Severidade de Violacoes