{
  "$type": "site.standard.document",
  "canonicalUrl": "https://brunopulis.com/blog/2026/2026-06-02",
  "description": "Algumas informações relevantes sobre um atributo tão mal interpretado",
  "path": "/blog/2026/2026-06-02",
  "publishedAt": "2026-06-02T00:00:00.000Z",
  "site": "at://did:plc:jtwk3253wycggbzl3sr7b6gi/site.standard.publication/3mpu4cswflk2h",
  "tags": [
    "100DaysToOffLoad",
    "A11y",
    "TIL"
  ],
  "textContent": "Ontem, estava navegando no curso de Acessibilidade Web da Google e deparei com uma informação que nunca tinha percebido.\n\nO que você precisa saber: a maioria dos desenvolvedores conhece apenas true e false.\nExiste um terceiro estado, e ignorá-lo gera comportamento imprevisível em leitores de tela.\n\nPor que isso importa: usar aria-hidden incorretamente cria barreiras reais para usuários de tecnologia assistiva. Um detalhe de valor de atributo pode tanto ocultar conteúdo necessário quanto expor ruído desnecessário.\n\nOs três estados\n\n- true: remove o elemento da API de acessibilidade. Leitores de tela ignoram completamente.\n- false: força a exposição do elemento, mesmo que não esteja renderizado.\n- undefined (padrão): o navegador decide, com base na renderização via CSS.\n\nO que muda na prática\n\nSem valor declarado o comportamento imprevisível:\n\nCom true, o ícone é removido da API de acessibilidade:\n\nA regra mais importante\n\n> Nunca use aria-hidden=\"true\" em elementos que podem receber foco.\n\nReferências\n\n- WAI-ARIA spec — aria-hidden\n- MDN — aria-hidden\n\nSDG,\nPulis.",
  "title": "O atributo aria-hidden tem três estados, não dois"
}