A tag `<output>`

• A tag <output> é pouco conhecida entre desenvolvedores web, mas oferece por padrão exibição de resultados dinâmicos e acessibilidade para leitores de tela
• Ela existe há muito tempo na especificação HTML e é mapeada automaticamente para role="status", anunciando mudanças para tecnologias assistivas usadas por pessoas com deficiência visual
• <output> é usada para informar resultados calculados com base em valores de entrada e é ignorada pela maioria dos tutoriais e bibliotecas
• Oferece excelente acessibilidade, incluindo suporte ao atributo for="", e também é altamente compatível com frameworks JavaScript
• Em vários projetos reais, pode ser útil em calculadoras, formatação de valores de sliders e feedback de validação de formulários

---

A joia escondida do HTML: a tag <output>

Todo desenvolvedor conhece bem o elemento <input>, que é um dos principais meios de entrada da web

Mas a maioria nunca usou o elemento <output>, e em muitos casos nem sabe que ele existe

Isso é uma pena, porque o <output> resolve nativamente a exibição de resultados dinâmicos e a acessibilidade que por muito tempo foram improvisadas com <div> e ARIA

Essa tag existe há muito tempo na especificação HTML, mas ainda continua pouco conhecida

Definição na especificação HTML5

Segundo a especificação HTML5

O elemento <output> representa o resultado de um cálculo feito pela aplicação ou o resultado de uma ação do usuário

Na árvore de acessibilidade, ele é mapeado para role="status", então sempre que seu valor muda o leitor de tela anuncia automaticamente todo o conteúdo ao usuário
Isso funciona como se aria-live="polite" aria-atomic="true" estivesse aplicado por padrão

Esse comportamento tem a característica de ler o conteúdo completo de forma tranquila, sem interromper o fluxo do usuário
Se necessário, o desenvolvedor pode definir atributos ARIA separadamente para alterar esse comportamento

Como usar <output>

De forma simples, ele pode ser usado assim

<output>여기에 동적 값 표시</output>

Só isso já garante suporte embutido para tecnologias assistivas, sem precisar de atributos extras nem APIs difíceis de decorar, tornando possível alcançar acessibilidade apenas com HTML puro

O momento da descoberta

O autor descobriu o valor do <output> durante a exibição de pontuação em um formulário de múltiplas etapas em um projeto de acessibilidade

A mudança na pontuação aparecia visualmente na tela, mas usuários de leitores de tela não conseguiam perceber essa alteração
Isso foi resolvido com uma região ARIA live, mas parecia mais adequado usar HTML com semântica clara

Ao examinar a especificação, ele encontrou o <output>, que pode ser usado independentemente do formulário e anuncia resultados automaticamente, percebendo que a solução mais simples já estava incluída na especificação

Por que quase ninguém usa

É uma tag esquecida: a maioria dos tutoriais e bibliotecas de componentes não a cobre, e quase não há exemplos de uso nem mesmo em repositórios públicos do Github

Com isso, a lacuna de conhecimento se repete, alimentando o ciclo de pouco uso

Pontos úteis para saber

• <output> também tem o atributo for="", assim como <label>
  • É possível indicar de quais valores de entrada o resultado depende, listando esses id separados por espaços
• Visualmente nada muda, mas na árvore de acessibilidade a ligação entre entrada e resultado passa a ser semântica
• Mesmo sem um elemento <form>, ele pode ser usado em qualquer lugar em que o texto mude dinamicamente conforme a entrada do usuário
• Por padrão é um elemento inline, então pode precisar de estilização como <span> ou <div> dependendo do layout
• Está na especificação desde 2008, então o suporte em navegadores e leitores de tela é muito bom
• Excelente compatibilidade com todos os frameworks JS, como React e Vue
• Em outubro de 2025, alguns leitores de tela ainda podem não ler atualizações; nesse caso, recomenda-se adicionar o atributo role="status"

Importante:
<output> é adequado para resultados de cálculo ou resultados de ações claramente ligados à entrada do usuário,
e não deve ser usado para notificações globais, como mensagens toast; para feedback do sistema, o ideal é usar role="status" ou role="alert"

Exemplos de uso real

Aplicação de calculadora

Ao criar uma calculadora simples, usar <output> para mostrar o resultado traz a vantagem de anunciar automaticamente o valor resultante sem precisar de papéis ARIA adicionais

Formatação de valor de slider (caso da Volvo Cars)

Um slider ajusta um valor interno, por exemplo 10000, e o <output> o exibe em um formato mais legível, como 10,000 miles/year
Ao atribuir role="group" e um rótulo compartilhado ao contêiner, isso pode ser aproveitado tanto para acessibilidade quanto para composição de componentes em React

Feedback de validação de formulário

Mensagens de validação em tempo real, como força de senha, também podem ser transmitidas via <output> para informar imediatamente usuários de tecnologias assistivas

Exibição de resultados calculados no servidor

<output> também é adequado para valores calculados no servidor, como custo de frete, impostos ou recomendações obtidas por uma API

Como no exemplo em React abaixo, é possível receber um valor do servidor e exibi-lo imediatamente em <output>

A satisfação de usar elementos nativos

Ao usar um elemento HTML puro da forma como a especificação pretendia,
é possível melhorar a acessibilidade e simplificar o código,
ao mesmo tempo em que se redescobre o valor e os usos da pouco conhecida tag <output>

Isso sugere que ainda existem muitos elementos escondidos no HTML que são verdadeiras joias

Atualização mais recente: Bob Rudis publicou uma página de exemplo funcional adequada a este texto

[GN⁺]

Comentários do Hacker News

• O problema do elemento <output> é que ele parece quase inútil na prática por ter só metade da funcionalidade implementada
  Acho que seria muito mais prático se tivesse um atributo type, como input
  Eu experimentei output|type no meu Sciter e adicionei vários tipos assim

  • type="text": padrão, sem formatação
  • type="number": formata números de acordo com a localidade do usuário
  • type="currency": formata moeda de acordo com a localidade do usuário
  • type="date": exibe como data, sem conversão de fuso horário
  • type="date-local": formato de data local, convertendo datetime UTC para local
  • type="time": exibe como hora
  • type="time-local": hora local, tratando o valor como datetime UTC
    Desse jeito, o servidor poderia enviar os dados sem precisar saber a localidade do usuário

  • Como no artigo e na especificação, <output> serve para mostrar o resultado de um cálculo no app ou o resultado de uma ação do usuário
    A semântica ARIA é a parte importante, e o leitor de tela lê o resultado quando a página é atualizada
    Dentro de <output>, você pode colocar diretamente a representação do tipo que quiser
    "text" é o padrão, e para data ou hora dá para usar a tag <time>
    No momento não existe uma tag dedicada só para formatação de números, mas desde a chegada do Intl isso vem sendo bastante pedido
    Por exemplo:
    <output>The new date is <time datetime="2025-10-11">Oct 11</time></output>
    Ou seja, <output> não precisa lidar com todos os tipos; o HTML como um todo é que deveria expressar os tipos

  • Concordo com a ideia de que isso fica quase inútil por ser uma funcionalidade pela metade
    É uma pena que, mesmo em 2025, ainda existam tantos casos assim
    Acho que boa parte da culpa é do Safari
    O exemplo mais extremo é <input type="date">
    Dizem que já dá para usar em produção, mas por causa dos problemas entre navegadores eu acabo usando mais um date picker em JS, o que é meio estranho

  • Meu desejo pessoal é que <output> pudesse se conectar diretamente a um <input> e mostrar o resultado
    Por exemplo: <input type="range" id="example_id" name="example_nm" min="0" max="50"> <output name="example_result" for="example_id"></output> Seria ótimo se algo assim já exibisse o valor do input diretamente
    Também seria bom adicionar um especificador "type" e permitir que o conteúdo mudasse via content: em CSS com ::before ou ::after
    Acho que esse tipo de formatação seria útil para vários tipos de <input>
    Especialmente em type="tel", onde seria conveniente mostrar o valor de entrada com uma formatação mais bonita
    Daria para usar com 'checkbox, color, date, datetime-local, file, month, number, radio, range, tel, time, url, week' e outros
    Até os tipos de texto poderiam ser úteis em certas condições
    E eu gostaria que o atributo for="" pudesse ter funções mais variadas
    Hoje, a maioria dos exemplos acaba usando alguma variação de <output name="result"><form oninput="result.value=...">

  • Pensar em <output> como tendo tipos em simetria com <input> é a abordagem errada
    output não é algo com tipo como um valor de entrada; o conceito é o de um contêiner cujo conteúdo muda dentro da página

  • Eu prefiro algo neste formato <output for=input> <!-- insere um componente customizado time-locale --> <time is=time-locale datetime=2001-02-03>2001-02-03</time> </output> Seria legal se esse componente alterasse o valor de acordo com a localidade
    Criar conteúdo falso com HTML/CSS tende a causar vários problemas
    Por exemplo, ao copiar algo injetado por CSS ::before/:after, ou nas diferenças entre .innerText e o texto interno real
    Dá para tomar decisões sobre essas questões, mas colocar funcionalidade demais numa única tag acaba transformando aquilo num DSL só dela
    O tipo do valor (absoluto/relativo), dados associados (tipo de moeda etc.) e parte do processamento de HTML acabam ficando presos ali, em vez de poderem ser ajustados com flexibilidade em JS

• <output>? Eu também nunca tinha usado
  Descobri hoje pela primeira vez e já adicionei à minha lista de TIL (today I learned)
  Mesmo procurando em repositórios públicos do GitHub, quase não aparece, porque se ninguém ensina, ninguém usa
  O que me veio à cabeça aqui é se os LLMs realmente usam essa tag ao gerar código, ou se ela nem foi absorvida no treinamento

  • Eu também me preocupo com o fato de a IA não ler a documentação (spec)
    E se surgir uma nova especificação do W3C e a maioria só fizer "vibe coding"?
    Se a IA não refletir as especificações mais novas e só repetir padrões antigos de código, espalhar atualizações de specs pode ficar ainda mais difícil do que hoje

  • Eu conheci a tag <output> pela primeira vez porque o Claude gerou código com ela

  • LLMs não leem diretamente os documentos dos padrões; eles geram código com base em padrões estatísticos extraídos de uma enorme massa de dados de projetos existentes
    Na prática, se essa tag quase não aparece em código real, ela também quase não vai aparecer na saída gerada por LLMs

• Atualização de 7 de outubro de 2025: alguns leitores de tela ainda não reconhecem atualizações da tag <output>, então por enquanto talvez seja melhor usar o atributo role explicitamente: <output role="status">
  Fico me perguntando se a situação é simplesmente esperar melhorar o suporte a uma tag antiga de 17 anos

  • No Windows, em geral eles lidam bem com issues abertas no repositório do NVDA
    https://github.com/nvaccess/nvda

  • Apesar de ser um padrão com 17 anos, ainda é preciso esforço para melhorar o problema de leitores de tela ignorarem a tag
    Acho que isso é claramente um problema do lado dos leitores de tela

• Já fiz vários cursos de acessibilidade web front-end, mas nunca tinha visto a tag <output> nem uma vez
  Obrigado por compartilhar essa informação útil

• <output> também tem o atributo for="", como <label>, e fico curioso se isso realmente faz diferença para quem usa leitor de tela
  Como quase não é usado na web atual, talvez usuários de leitor de tela também não estejam acostumados, mas no fim acho que depende da UX do software

  • Eu não uso leitor de tela no dia a dia, mas já mexi bastante com eles para testes
    Tenho dúvidas se isso é realmente exposto corretamente às tecnologias assistivas
    Não estou no computador agora, então não consigo testar de imediato
    Pessoalmente, acho muito melhor rotular o valor do output de forma explícita
    Por exemplo: <label for="output">Total</label> <output id="output">£123.45</output> Assim o leitor de tela diria "Total, £123.45", o que facilita entender o contexto

• Na minha opinião, HTML semântico é só uma armadilha para iniciantes
  Melhor nem perder tempo pensando nisso e usar uma solução que realmente funcione, como aria-live
  Dá para se divertir com esses elementos, mas acho que a responsabilidade do desenvolvedor é entregar uma estrutura que de fato funcione para o usuário
  Em vez de tags semânticas pouco usadas, o certo é usar o que o navegador e o ecossistema existente já esperam

  • HTML não é só para navegadores
    Pela minha experiência com EPUB, uma estrutura de página semântica deixa tudo mais fácil e melhor no geral

• Descobri que <output> é uma tag voltada à acessibilidade em páginas web, especialmente para suporte a leitores de tela
  "ARIA" é a sigla de Accessible Rich Internet Applications, um conjunto de atributos HTML que aumenta a acessibilidade para pessoas com deficiência

  • Isso soa como explicar o que é JavaScript embaixo de React
    Não é motivo de vergonha não conhecer o básico de acessibilidade, mas também não acho que faça sentido reagir como se fosse estranho o leitor não saber disso

  • A MDN tem uma documentação bem organizada sobre isso
    (o autor do artigo também enfatiza a mesma orientação)
    "A primeira regra do uso de ARIA é: se existe um elemento ou atributo HTML nativo com a semântica e o comportamento de que você precisa, em vez de reaproveitar um elemento e adicionar um role, state ou property de ARIA para torná-lo acessível, use o elemento ou atributo nativo apropriado."
    https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

  • Obrigado pela explicação
    Na verdade eu poderia ter pesquisado no Google, mas foi mais confortável ler seu comentário nesta tarde de sábado meio sonolenta
    Obrigado de novo

• Só de ver o título deste artigo, achei que <output> estivesse sendo usado errado, mas ao ler fiquei realmente surpreso
  (principalmente depois de ver a imagem suspeita do calculador GenAI no topo, achei que seria um fracasso bem pior, mas o conteúdo era tão bom que só voltei a pensar naquela imagem depois de terminar de ler tudo)

  • Aquela imagem suspeita do calculador GenAI é engraçadíssima
    Faz adição, multiplicação e divisão, mas não consegue fazer subtração

  • Falando daquela imagem suspeita do calculador GenAI
    Parece que esquecemos das imagens ainda mais toscas que nós, humanos, fazíamos antes da IA
    Graças à IA, agora pelo menos dá para produzir rapidamente imagens que não sejam constrangedoras
    Neste caso, (subjetivamente) acho que ela transmite bem uma estética vintage retrô de TI, então faz sentido
    Nem todo uso de IA substitui o trabalho de artistas profissionais

• Eu gosto de ver esse tipo de conteúdo
  Outra dica é nomear os campos do formulário de forma alinhada com a estrutura de dados do backend, porque assim você reduz a necessidade de pegar valores com JS ou remontar os dados
  Por exemplo: <input name=“entity[id]”> <input name=“entity[relation]”> Assim, em vez de montar dados manualmente em JS, basta enviar o formulário e você já recebe exatamente o formato desejado