The <output> Tag

HTML’s Best Kept Secret: The Tag Den Odell 1 October 2025 · ⏱️ 5 min read

We keep changing how we style the web, but the real problem isn’t CSS. It’s how we build around it.

Enjoyed this? Get more like it to your inbox. No spam. Just occasional deep dives on frontend engineering and developer experience.

That’s a shame, because it solves something we’ve been cobbling together with

s and ARIA for years: dynamic results that are announced to screen readers by default.

In practice, that means updates do not interrupt the user. They are read shortly after, and the entire content is spoken rather than just the part that changed. You can override this behavior by setting your own ARIA properties if needed.

That’s it. Built-in assistive technology support. No attributes to memorize. Just HTML doing what it was always meant to do.

I discovered on an accessibility project with a multi-step form. The form updated a risk score as fields changed. It looked perfect in the browser, but screen reader users had no idea the score was updating.

Adding an ARIA live region fixed it. But I’ve always believed in reaching for semantic HTML first, and live regions often feel like a patch.

That’s when I scoured the spec and jumped out. It understands forms without requiring one, and it announces its changes natively. Turns out the simplest fix had been in the spec all along.

Because we forgot. It’s not covered in most tutorials. It doesn’t look flashy. When I searched GitHub public repos, it barely showed up at all.

Like

For most users, nothing changes visually. But in the accessibility tree it creates a semantic link, letting assistive technology users connect the inputs with their calculated result.

Update 7 Oct 2025: Some screen readers have been found not to announce updates to the tag, so explicitly emphasising the role attribute might be worthwhile for now until support improves: .

It doesn’t require a

either. You can use it anywhere you are updating dynamic text on the page based on the user’s input.

By default is inline, so you’ll usually want to style it for your layout, just as you would a or

.

And because it has been part of the spec since 2008, support is excellent across browsers and screen readers. It also plays nicely with any JavaScript framework you might be using, like React or Vue.

During a recent 20-minute coding challenge, I used to display calculation results. Without adding a single ARIA role, the screen reader announced each result as it updated. No hacks required.

At Volvo Cars, we displayed user-friendly versions of slider values. Internally the slider might hold 10000, but the output showed 10,000 miles/year. We wrapped the slider and in a container with role=”group” and a shared label, creating a cohesive React component:

I found that password strength indicators and real-time validation messages work beautifully with .

The tag even fits modern patterns where you might fetch prices from APIs, show tax calculations, or display server-generated recommendations.

Here, a shipping cost calculator updates an tag, informing users once the cost has been calculated:

might be HTML’s best kept secret, and discovering gems like this shows how much value is still hiding in the spec.

No spam. Just occasional deep dives on frontend engineering and developer experience.

The element represents the result of a calculation performed by the application, or the result of a user action.

We Keep Reinventing CSS, but Styling Was Never the Problem 6 August 2025 We keep changing how we style the web, but the real problem isn’t CSS. It’s how we build around it. Read more →

Enjoyed this? Get more like it to your inbox. No spam. Just occasional deep dives on frontend engineering and developer experience.

Enjoyed this? Get more like it to your inbox. No spam. Just occasional deep dives on frontend engineering and developer experience.

Enjoyed this? Get more like it to your inbox. No spam. Just occasional deep dives on frontend engineering and developer experience.

Every developer knows . It’s the workhorse of the web.

It’s been in the spec for years. Yet it’s hiding in plain sight.

I’ve personally reached for in multiple real-world projects since discovering it:

Sometimes the best tool for the job is the one you didn’t even know you had.

💬 Comments? Join the discussion on Dev.to →

But ? Most have never touched it. Some don’t even know it exists.

What happens when accessibility stops being a best practice and starts being the law? We’re about to find out.

This is the xdefiance Online Web Shop.

A True Shop for You and Your Higher, Enlightnened Self…

Welcome to the xdefiance website, which is my cozy corner of the internet that is dedicated to all things homemade and found delightful to share with many others online and offline.

You can book with Jeffrey, who is the Founder of the xdefiance store, by following this link found here.

Visit the paid digital downloads products page to see what is all available for immediate purchase & download to your computer or cellphone by clicking this link here.

Find out more by reading the FAQ Page for any questions that you may have surrounding the website and online sop and get answers to common questions. Read the Returns & Exchanges Policy if you need to make a return on a recent order. You can check out the updated Privacy Policy for xdefiance.com here,

If you have any unanswered questions, please do not hesitate to contact a staff member during office business hours:

Monday-Friday 9am-5pm, Saturday 10am-5pm, Sun. Closed

You can reach someone from xdefiance.online directly at 1(419)-318-9089 via phone or text.

If you have a question, send an email to contact@xdefiance.com for a reply & response that will be given usually within 72 hours of receiving your message.

Browse the shop selection of products now!

Reaching Outwards