13 ms·

The <output> Tag

840 points by todsacerdoti 1y ago

eps 1y ago
Apparently, it's about screen reader support in web pages. Also "ARIA" stands for Accessible Rich Internet Applications and it's "a set of HTML attributes that make web content more accessible to people with disabilities."
- skrebbel 1y ago
  This is like explaining what JavaScript is under a post about React. There’s no shame in not knowing accessibility basics, but there’s also no need to act like it’s ridiculous to expect the reader to know some.
  - akk0 1y ago
    I think "act like it's ridiculous" is pretty hyperbolic here. I didn't know what ARIA stood for until now (though I knew what it was). You'd be surprised how many people barely know it exists... I was a TA for my uni's Web Engineering and Ethics in CS courses and accessibility never even came up in either course.
    - bena 1y ago
      Yeah, I knew “aria” was “accessibility stuff”, but I couldn’t tell you what it stood for.
      - ChrisSD 1y ago
        Tbh I really don't think it matters what the letters stand for.
        kaoD 1y ago
        You made me realize it's like NASA: a good chunk of the worlds knows it, but I bet most don't know what it stands for (at least outside the US I bet 99.9% don't know -- me included haha)
        skrebbel 1y ago
        North American Space Astronauts!
    - acka 1y ago
      > I was a TA for my uni's Web Engineering and Ethics in CS courses and accessibility never even came up in either course. That is genuinely baffling to me. How does a university teach web engineering without even mentioning accessibility? It’s not just best practice—it’s often a legal requirement for public-sector sites in many countries. Even outside government work, major companies (FAANG included) publicly invest in accessibility to avoid both reputational and legal fallout. Ignoring it entirely sends the wrong message to students about professional responsibility and real-world standards.
      - lazide 1y ago
        Many schools are not very good at teaching real world skills. Always been this way. It’s why ‘self taught’ in many disciplines is very doable too, if someone focuses on what people actually want/need. They might not be good at articulating the differences between fizzbuzz and bubble sort, but they can get shit done that works. Every PhD that I know that went from Academia to Industry immediately had their stress levels decrease 10x and their pay roughly double too - because they could finally do a thing, see if it worked or not, and if it did, get paid more. Instead of insane constant bullshitting and reputation management/politics with a hint of real application maybe sprinkled in. Few ‘knives’ have to be as sharp as the academics, in my experience.
      - kayodelycaon 1y ago
        Didn’t come up in my ethics course either. Unless you actually know someone with an accessibility issue, it’s unlikely you have encountered it or recognized it if you did. For example: You don’t realize how absolutely abysmal voice control is for computers until you have to use it. There are so many assumptions about the world that causes things like neurodivergence to become a disability instead of a difference.
    - ajjahs 1y ago
      [dead]
    - skrebbel 1y ago
      > * I think "act like it's ridiculous" is pretty hyperbolic here.* Fair. I might’ve read more snark in the “Apparently,” than the commenter intended to convey. For what it’s worth, the comment you read is the toned down version of what I had initially come up with. I really don’t think being dismissive of accessibility concerns is good style.
    - Muromec 1y ago
      Not knowing about ARIA is like not knowing about requirements for ramp slopes when designing a building. You just... can't.
- rambambram 1y ago
  Hey thanks for clarifying. I could have googled it, but lazily reading your comment on a cloudy Saturday afternoon is easier. Thanks again, appreciate it. ;)
- skeeter2020 1y ago
  MDN has decent docs on this, including (and echoed by the author) this top-level guidance: >> The first rule of ARIA use is "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so." https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
  - small_scombrus 1y ago
    The top of a lot of the ARIA docs pages say "No ARIA is better than bad ARIA"
    - Muromec 1y ago
      I really like (not) when people read about accessibility and the first thing they decide to do is adding keydown handlers on all the buttons that have clicks handlers. Like, please, treat it like the rest of UX and design for it, instead of going with a checklist over all the places linter flagged.
froobius 1y ago
So there's useful html tags from 2008 that no one uses or knows about... How can that be the case? Because there's just so many tags? Because people don't read the docs? Because the benefits are not obvious?
- j45 1y ago
  In some cases, because there was a period of time where it might not have been in HTML in all browsers, and javascript was used instead, and then HTML had it. Then no one checked, and the javascript train had already left the station.
- atoav 1y ago
  My guess would be that most people just copy (mimic) what is already there. I sometimes work as a freelance web administrator and I can assure you 95% of people who create websites for a living have never read through a list of HTML tags, have only a slight idea of the semantic web and in the end they are more like people who cobble existing things together and are out of their depth pretty quickly. Not that this is problematic per se, everybodies milage may vary and we're all out there to learn. But if I told one of them about the output tag thry probably wouldn't even understand why that would be important.
- Timwi 1y ago
  People who already have a habit of solving a problem a specific way are generally unlikely to switch when a new solution appears unless it is considerably easier. If it's not immediately easier, it will feel easier to continue the ingrained habit.
- gregoriol 1y ago
  Maybe because most HTML tags are not well supported by browsers, because they are doing by themselves only half of what a developer would want, hard to style, hard to enhance the native behavior, ... most recently-added tags have those problems (ex: <progress>), this one from 2008 is an even better example
  - em-bee 1y ago
chrismorgan 1y ago
I came to this article expecting to see <output> misused, and was pleasantly surprised. :-) (Actually, the dodgy GenAI calculator image at the top primed me for even more failure, making the excellent content that followed even more surprising. But I soon forgot about it and only remembered when I scrolled back to the start for no particular reason when done.)
- Nevermark 1y ago
  > the dodgy GenAI calculator image It appears human beings are already forgetting the even more dodgy images some of us created before AI allowed us to reduce said dodginess. Or actually get a picture we could post without too much shame. :) And in this case, IMHO, the image has a significant amount of dodgy vintage tech charm. Not every use of AI replaces a professional artist.
  - Kudos 1y ago
    > Not every use of AI replaces a professional artist. It normalises it.
    - llbbdd 1y ago
      There is no reality past or present where someone would have been paid to make this
  - uonr 1y ago
    I love those handmade bad sketch
    - Nevermark 1y ago
      I did/do too. I think it is possible to value: 1. The techniques, inspiration and creativity of skilled human artists. 2. The personality of art by unskilled artists. 3. The use of generative AI to replace generic clip art. A little whimsy to dress up plain text. Is anyone really crusading to protect generic clip art? No? There should be something like rule 34 for social and cultural movements. For every movement, the ideological version will get performatively or knee jerk expressed, with shame throwing, in benign situations. > Actually, the dodgy GenAI calculator image at the top primed me for even more failure, making the excellent content that followed even more surprising. This was poor spirited, personal itch scratching. We can just compliment a writer on their writing, if they are a writer, presenting themselves as a writer, not a visual artist.
deleted 1y ago
[deleted]
austin-cheney 1y ago
I can see this having extreme value 20 years ago. Then it could take more than a minute to asynchronously get data back and you needed to tell people what content on the page changed. Now, the bottleneck is entirely the database first and the framework second. Those can be switched if the framework code is extra garbage. When those are taken out of the equation I am seeing text update to the screen in about 5-15ms in response to a user interaction that requires execution on the localhost server, 45ms for networked server. At that speed you don’t need to alert the user of any content changes. You only need to structure the content such that walking the DOM, using a screen reader, from point of interaction to area of output is direct and logical, expected, for a human.
- arccy 1y ago
  these days with llms we're back to over a minute to get a response...
NoahZuniga 1y ago
> 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: <output role="status">. Waiting for support to improve on a 17 year old tag that is barely used anymore?
- croes 1y ago
  To improve the usage of screen readers that don’t respect a tag that’s parts of the standard for 17 years. It’s obviously the screen readers’ fault.
  - wizzwizz4 1y ago
    If adding the ARIA role fixes the problem, then it's not the fault of screen readers: it's browsers not exposing the semantics properly (unless explicitly instructed to). Please don't assign blame to the "obvious" target unless you actually know who's at fault.
    - cluckindan 1y ago
      The output tag has an implicit aria-role=”status”. This is 100% on the particular screen reader(s) that don’t support it. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
      - wizzwizz4 1y ago
        If the screen reader were at fault, then explicitly specifying the implicit role (something that should be a no-op) would not fix the problem. It's the responsibility of web browsers to implement and expose implicit ARIA roles (see https://www.w3.org/TR/html-aam-1.0/#mapping-html-to-accessibility-apis https://www.w3.org/TR/html-aam-1.0/#mapping-html-to-accessib...). Screen readers do not (in general) speak HTML, just like computer monitors do not (in general) speak CSS.
lelandfe 1y ago
> Like <label>, <output> has a for="" attribute. Here you list the ids of any <input> elements the result depends on Any screen reader users able to comment on whether this is worth doing? I suspect this would be such a rarity online that screen reader users wouldn’t be familiar with it, but it depends on the UX of the software
- WickyNilliams 1y ago
  Not a screen reader user but I have used them a lot in testing. I'd be surprised if it's meaningfully exposed to assistive tech. Not at the computer right now so I can't test. That said, I imagine it's more useful to do the opposite, label the output itself e.g. <label for="output">Total</label> <output id="output">£123.45</output> That way it will be announced like "Total, £123.45" rather than a random number with no context
  - skeeter2020 1y ago
    For static scenarios this works well with screen readers. On the output tag the "for" property helps screen readers deal with dynamic values, essentially adding reactivity to the element. I use it so infrequently I've never explored how it works but screen readers will catch that the value has been updated. This is handy for testing with screen readers, and includes links to the appropriate spec (for output and all elements): https://stevefaulkner.github.io/AT-browser-tests/test-files/output.html https://stevefaulkner.github.io/AT-browser-tests/test-files/...
    - WickyNilliams 1y ago
      It's often the case that screen readers do not support the more exotic aspects of html (hell even some basics, unfortunately). The browser may add a reference from one to the other in the accessibility tree, but whether a screenreader announces it is another matter. I'd be surprised if it's supported in any meaningful way here. Happy to be shown otherwise!
    - deleted 1y ago
      [deleted]
pbhjpbhj 1y ago
If you have to use `role=status` to make it work with screenreaders, I'm not sure I see the point. Maybe I'm jaded, I was all in on semantic xhtml and microformats before we got HTML5, but this seems like being overly-pedantic for the sake of pedantry rather than for a11y.
- rglullis 1y ago
  Chicken-and-egg. As soon as more websites start using the tag, screenreaders will catch up and role=status will not be needed.
andai 1y ago
>When I searched GitHub public repos, it barely showed up at all. Is there a way to search by code?
- Etheryte 1y ago
  That's literally what search does on Github?
  - ameliaquining 1y ago
    Only if you're signed in.
  - andai 1y ago
    Turns out there is a Code Search option, but it's not the default (default is repo names and descriptions). Neat!
greatgib 1y ago
For a website speaking accessibility, it does something very bad and annoying with scrolling. Not using the native browser scrolling I think. When I use the middle wheel of my mouse to go up or down, sometimes it suddenly it ignore the command or stutter or go back a little bit instead of continue going down or some random movement. Even with using 2 fingers scroll with the touchpad, I can feel very slightly that there a subtle lag or stutter.
zkmon 1y ago
I don't think this was ignored for no reason or simply forgotten. I don't see it bringing a great feature or value compared to input tag. You still need to code up the logic for setting its value, via a script, like any other container tags. You could pretty much use a read-only input tag to include the output with the form.
- swiftcoder 1y ago
  > You could pretty much use a read-only input tag to include the output with the form. You could, but then you wouldn't be gaining any of the accessibility wins the article is discussing...
moffkalast 1y ago
> dynamic results that are announced to screen readers by default. > It’s been in the spec for years. Yet it’s hiding in plain sight. Almost as if we're... blind to it? No? Too on the nose?
redbell 1y ago
> But <output>? Most have never touched it. Some don’t even know it exists. Yeah, count me on with those who don't even know it exists. I'm adding this to my TIL. > When I searched GitHub public repos, it barely showed up at all. > That absence creates a feedback loop: if no one teaches it, no one uses it. This has triggered an instant question in my head: Do LLMs actually use it when generating code or they are not well-trained for this specific tag?
- deleted 1y ago
  [deleted]
- mcdonje 1y ago
  I, too, am concerned about AIs not reading the docs. What happens when a new W3C spec comes out and most people are vibe coding? If AIs don't take current specs into account and just regurgitate old code patterns, then disseminating spec updates or new specs will be harder than it already is.
  - nashashmi 1y ago
    Yeah llms don’t read docs. They repeat the info in docs. And swap letters around the code to make it fit.
  - Devasta 1y ago
    Most people don't care about W3C specs as it is, nevermind with vibe coding. The React release notes are the important web standards they follow.
    - abnercoimbre 1y ago
      I was filled with a definite sadness after reading your comment. It is what it is.
  - qingcharles 1y ago
    Alternate problem. I was trying to fix up an old repo I found which used some pdf tool, but when trying an LLM it insisted on reading all the documentation, but the docs were woefully out of date and didn't match the actually binaries, so it got terribly twisted up.
ford 1y ago
Interestingly I've often seen this in Claude outputs, especially on long prompts. I've assumed this is because of Claude's XML-based instruction format, but this does make me wonder how related the two are. And if Claude may have a harder time using <output> given it's related to both accessibility and its instructions
- stefvw93 1y ago
  I suppose claude is trained on the spec and docs like MDN
IshKebab 1y ago
I think the lesson here is if you want to provide an accessibility feature, you have to also make it do something useful for people that don't care about accessibility.
c-smile 1y ago
Problem with <output> is that it is half-baked making its usage almost useless. It would be significantly more practical for the output to have "type" attribute in the same way as in the input. I did experiment with oputput|type in my Sciter and added these: type="text" - default value, no formating type="number" - formats content as a number using users locale settings, type="currency" - formats content as a currency using users locale settings, type="date" - as a date, no TZ conversion, type="date-local" - as a date in users format, UTC datetime to local, type="time" - as a time type="time-local" - as a local time, value treated as UTC datetime. This way server can provide data without need to know users locale.
- zdragnar 1y ago
  I would be on board with most of these, but...Why on earth would the server send a currency value without knowing the users locale? Are you expecting the browser to be constantly pinging services to see exchange rates?
  - c-smile 1y ago
    Not sure I understand why do you need exchange rates with it. <output type="currency"> uses the same convention as "Intl.NumberFormat/style=currency": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
    - dclowd9901 1y ago
      You're talking about currency formatting while they are talking about currency value. In essence, you're both correct. They are correct in that if you're displaying a currency value, you have to know which currency it is in, right? It wouldn't make sense for the server to be "unaware" of the locale of the value. That said, your comment sidesteps that issue and addresses how the number itself is displayed, since ultimately the value itself is a number, but different locales display numbers differently. So the person you're responding to is asking: since the server ostensibly already knows which currency it's in, shouldn't it already be formatting the value appropriately, and that's more a question of where one thinks localization formatting should ultimately live in web app context.
bdcravens 1y ago
I have no idea if it was based on the HTML tag, but ColdFusion/CFML has (always?) had the <cfoutput> tag for displaying and parsing dynamic data.
hn_throw_bs 1y ago
> So why don’t we use it? Because we don’t need another fucking tag, that’s why.
ty_2k 1y ago
I have completed multiple courses on front-end web accessibility and never run into <output>, somehow. Thanks so much for the awesome share.
throw_m239339 1y ago
The article was all good until he started to use react for implementation. I would not have done that for an article about web standards, and I use react all the time.
hollowturtle 1y ago
Hell html in 2025 feels so underdeveloped, semantic html should just be declared dead and we should just move on. How many years we wasted by having "experts" underlining the semantic meaning of aside, article, main etc? Good lord, perhaps we should just totally skip the dom and use a graphics, input and accessibility api the way we want
- sefrost 1y ago
  It seems to me that most semantic HTML has helped third parties extract data from web pages for their own use. Perhaps if you are an important primary source of information like a government service that could be useful if it helps you advance your cause of sharing data, but I don’t think it is in the interest of most website operators if it reduces traffic to your site. I understand that their are some accessibility benefits to some semantic HTML tags.
  - hollowturtle 1y ago
    The discussion of past years instead of being focused on "what we could do next to make developing apps for the web better?" has been focused on which semantic meaning the x tag has and where it should be used, creating just a lot of confusion and disagreements, vs the reality: people just use divs, you can still specify aria attributes there, why not giving us an api to specify semantic meaning as well the way we want? I'd like to have something like flash back, html5 was a step back, partially has already been achieved by flutter and react native. Please Browser vendors just give us a goddman drawing api that doesn't feel limited as canvas is with a semantic, accessibility and input apis that don't suck!
    - skrebbel 1y ago
      I feel like you’re worked up about a hype that began in 2005 and fizzled out in 2015.
      - hollowturtle 1y ago
        Please tell me then what I've been missing. Modals/Dialogs?
Hadimns57 1y ago
Okay
didip 1y ago
I honestly don't know what is it for. Why is it important to have an output tag. The output of any actions will be shoved into any N random elements. So every `<div>` will have `<output>`? Why? Waste of payload size and CPU cycles in parsing. The designers of semantic tags truly live in ivory towers.
mgraczyk 1y ago
Semantic html is a novice trap, just do the thing that works and that browsers expect (aria-live) It's fun to play around with things like this, but if you're a developer you have a responsibility to build things that work for your users using the existing tools and ecosystem. Don't use semantic HTML tags that aren't widely used, just do the thing that works.
- NoMoreNicksLeft 1y ago
  > Semantic html is a novice trap, just do the thing that works and that browsers expect (aria-live) html isn't just "browsers". I've been doing alot of epub work, and semantic pages make everything easier and better.
- niek_pas 1y ago
  In the article: > 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. So what makes you think this isn’t a “thing that works”?
  - lol768 1y ago
    > Update 7 Oct 2025: Some screen readers have been found not to announce updates to the tag
hk1337 1y ago
It’s nice seeing stuff like this. Another is structuring your form names to help align with how it’s going to be used in the backend so you don’t have to use JavaScript to gather all the data or be doing a lot of restructuring of the request data. This is an oversimplified example but now even if you submit with JS, you just have to submit the form and the form data is already there. <input name=“entity[id]”> <input name=“entity[relation]”>
freejoe76 1y ago
If you're interested in learning how much HTML you actually know, I wrote this quiz to test you (and at the end it shows you how many of the hundred-plus elements you missed, and what each are for). https://joemurph.com/article/detail/html5-elements-quiz/ https://joemurph.com/article/detail/html5-elements-quiz/
zeroq 1y ago
Imagine a world where you don't have to deal with legacy js, css and html stuff and you could opt-in for an alternative, better solution that just works on every single computer, the very same way it works on your own. Imagine you place a textfield in precise spot on a screen, with your choice of font and it renders the way it renders on your screen on every client device, everywhere. Oh wait, we had, it was called Flash.
miki123211 1y ago
As a screen reader user, I think aria live regions (and hence the output tag) were actually a mistake. What we should have had instead is a `document.speak(text, priority)` method, which would just pass the text straight through to the screen reader. Sure, that approach is less pure, yet it is far more pragmatist and practical, as you only need aria when you heavily use js anyway. Aria live regions, as they currently stand, basically encourage three anti-patterns: First is the "if it changes, it should be announced" anti-pattern, think e.g. a constantly changing stock ticker on a news website. People make these into aria live regions because "it's live, we want to be good citizens and do semantics, right?". Sites that do this are almost impossible to use, as you're constantly distracted by the ticker. Another instance of this are timers that change every second. With a `document.speak` method, it would be far more obvious that you don't want the screen reader to announce the ticker every time it changes. The second anti-pattern is the one of outputting the same message twice. Think a calculator where the user executes two different expressions which both produce a result of 0. The result of the second expression won't be announced, as there will be no change to the live region contents. With `document.speak`, this wouldn't be a problem, as the method would just be executed twice. The third anti-pattern is actually somewhat specific to the `output` tag. It's very tempting to use it for terminal, log and chat outputs, and that is a mistake. Those processes append to the output instead of replacing it, but with the aria status of atomic, the entire output area would be announced every time the output changes.
- lelandfe 1y ago
  Just wanted to say thanks for some practical feedback, this is great.

840 points by todsacerdoti 1y ago

eps 1y ago

Apparently, it's about screen reader support in web pages. Also "ARIA" stands for Accessible Rich Internet Applications and it's "a set of HTML attributes that make web content more accessible to people with disabilities."

skrebbel 1y ago
This is like explaining what JavaScript is under a post about React. There’s no shame in not knowing accessibility basics, but there’s also no need to act like it’s ridiculous to expect the reader to know some.
- akk0 1y ago
  I think "act like it's ridiculous" is pretty hyperbolic here. I didn't know what ARIA stood for until now (though I knew what it was). You'd be surprised how many people barely know it exists... I was a TA for my uni's Web Engineering and Ethics in CS courses and accessibility never even came up in either course.
  - bena 1y ago
    Yeah, I knew “aria” was “accessibility stuff”, but I couldn’t tell you what it stood for.
    - ChrisSD 1y ago
      Tbh I really don't think it matters what the letters stand for.
      - kaoD 1y ago
        You made me realize it's like NASA: a good chunk of the worlds knows it, but I bet most don't know what it stands for (at least outside the US I bet 99.9% don't know -- me included haha)
        skrebbel 1y ago
        North American Space Astronauts!
  - acka 1y ago
    > I was a TA for my uni's Web Engineering and Ethics in CS courses and accessibility never even came up in either course. That is genuinely baffling to me. How does a university teach web engineering without even mentioning accessibility? It’s not just best practice—it’s often a legal requirement for public-sector sites in many countries. Even outside government work, major companies (FAANG included) publicly invest in accessibility to avoid both reputational and legal fallout. Ignoring it entirely sends the wrong message to students about professional responsibility and real-world standards.
    - lazide 1y ago
      Many schools are not very good at teaching real world skills. Always been this way. It’s why ‘self taught’ in many disciplines is very doable too, if someone focuses on what people actually want/need. They might not be good at articulating the differences between fizzbuzz and bubble sort, but they can get shit done that works. Every PhD that I know that went from Academia to Industry immediately had their stress levels decrease 10x and their pay roughly double too - because they could finally do a thing, see if it worked or not, and if it did, get paid more. Instead of insane constant bullshitting and reputation management/politics with a hint of real application maybe sprinkled in. Few ‘knives’ have to be as sharp as the academics, in my experience.
    - kayodelycaon 1y ago
      Didn’t come up in my ethics course either. Unless you actually know someone with an accessibility issue, it’s unlikely you have encountered it or recognized it if you did. For example: You don’t realize how absolutely abysmal voice control is for computers until you have to use it. There are so many assumptions about the world that causes things like neurodivergence to become a disability instead of a difference.
  - ajjahs 1y ago
    [dead]
  - skrebbel 1y ago
    > * I think "act like it's ridiculous" is pretty hyperbolic here.* Fair. I might’ve read more snark in the “Apparently,” than the commenter intended to convey. For what it’s worth, the comment you read is the toned down version of what I had initially come up with. I really don’t think being dismissive of accessibility concerns is good style.
  - Muromec 1y ago
    Not knowing about ARIA is like not knowing about requirements for ramp slopes when designing a building. You just... can't.
rambambram 1y ago
Hey thanks for clarifying. I could have googled it, but lazily reading your comment on a cloudy Saturday afternoon is easier. Thanks again, appreciate it. ;)
skeeter2020 1y ago
MDN has decent docs on this, including (and echoed by the author) this top-level guidance: >> The first rule of ARIA use is "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so." https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
- small_scombrus 1y ago
  The top of a lot of the ARIA docs pages say "No ARIA is better than bad ARIA"
  - Muromec 1y ago
    I really like (not) when people read about accessibility and the first thing they decide to do is adding keydown handlers on all the buttons that have clicks handlers. Like, please, treat it like the rest of UX and design for it, instead of going with a checklist over all the places linter flagged.

froobius 1y ago

So there's useful html tags from 2008 that no one uses or knows about... How can that be the case? Because there's just so many tags? Because people don't read the docs? Because the benefits are not obvious?

j45 1y ago
In some cases, because there was a period of time where it might not have been in HTML in all browsers, and javascript was used instead, and then HTML had it. Then no one checked, and the javascript train had already left the station.
atoav 1y ago
My guess would be that most people just copy (mimic) what is already there. I sometimes work as a freelance web administrator and I can assure you 95% of people who create websites for a living have never read through a list of HTML tags, have only a slight idea of the semantic web and in the end they are more like people who cobble existing things together and are out of their depth pretty quickly. Not that this is problematic per se, everybodies milage may vary and we're all out there to learn. But if I told one of them about the output tag thry probably wouldn't even understand why that would be important.
Timwi 1y ago
People who already have a habit of solving a problem a specific way are generally unlikely to switch when a new solution appears unless it is considerably easier. If it's not immediately easier, it will feel easier to continue the ingrained habit.
gregoriol 1y ago
Maybe because most HTML tags are not well supported by browsers, because they are doing by themselves only half of what a developer would want, hard to style, hard to enhance the native behavior, ... most recently-added tags have those problems (ex: <progress>), this one from 2008 is an even better example
- em-bee 1y ago

chrismorgan 1y ago

I came to this article expecting to see <output> misused, and was pleasantly surprised. :-) (Actually, the dodgy GenAI calculator image at the top primed me for even more failure, making the excellent content that followed even more surprising. But I soon forgot about it and only remembered when I scrolled back to the start for no particular reason when done.)

Nevermark 1y ago
> the dodgy GenAI calculator image It appears human beings are already forgetting the even more dodgy images some of us created before AI allowed us to reduce said dodginess. Or actually get a picture we could post without too much shame. :) And in this case, IMHO, the image has a significant amount of dodgy vintage tech charm. Not every use of AI replaces a professional artist.
- Kudos 1y ago
  > Not every use of AI replaces a professional artist. It normalises it.
  - llbbdd 1y ago
    There is no reality past or present where someone would have been paid to make this
- uonr 1y ago
  I love those handmade bad sketch
  - Nevermark 1y ago
    I did/do too. I think it is possible to value: 1. The techniques, inspiration and creativity of skilled human artists. 2. The personality of art by unskilled artists. 3. The use of generative AI to replace generic clip art. A little whimsy to dress up plain text. Is anyone really crusading to protect generic clip art? No? There should be something like rule 34 for social and cultural movements. For every movement, the ideological version will get performatively or knee jerk expressed, with shame throwing, in benign situations. > Actually, the dodgy GenAI calculator image at the top primed me for even more failure, making the excellent content that followed even more surprising. This was poor spirited, personal itch scratching. We can just compliment a writer on their writing, if they are a writer, presenting themselves as a writer, not a visual artist.

deleted 1y ago

[deleted]

austin-cheney 1y ago

I can see this having extreme value 20 years ago. Then it could take more than a minute to asynchronously get data back and you needed to tell people what content on the page changed. Now, the bottleneck is entirely the database first and the framework second. Those can be switched if the framework code is extra garbage. When those are taken out of the equation I am seeing text update to the screen in about 5-15ms in response to a user interaction that requires execution on the localhost server, 45ms for networked server. At that speed you don’t need to alert the user of any content changes. You only need to structure the content such that walking the DOM, using a screen reader, from point of interaction to area of output is direct and logical, expected, for a human.

arccy 1y ago
these days with llms we're back to over a minute to get a response...

NoahZuniga 1y ago

> 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: <output role="status">. Waiting for support to improve on a 17 year old tag that is barely used anymore?

croes 1y ago
To improve the usage of screen readers that don’t respect a tag that’s parts of the standard for 17 years. It’s obviously the screen readers’ fault.
- wizzwizz4 1y ago
  If adding the ARIA role fixes the problem, then it's not the fault of screen readers: it's browsers not exposing the semantics properly (unless explicitly instructed to). Please don't assign blame to the "obvious" target unless you actually know who's at fault.
  - cluckindan 1y ago
    The output tag has an implicit aria-role=”status”. This is 100% on the particular screen reader(s) that don’t support it. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
    - wizzwizz4 1y ago
      If the screen reader were at fault, then explicitly specifying the implicit role (something that should be a no-op) would not fix the problem. It's the responsibility of web browsers to implement and expose implicit ARIA roles (see https://www.w3.org/TR/html-aam-1.0/#mapping-html-to-accessibility-apis https://www.w3.org/TR/html-aam-1.0/#mapping-html-to-accessib...). Screen readers do not (in general) speak HTML, just like computer monitors do not (in general) speak CSS.

lelandfe 1y ago

> Like <label>, <output> has a for="" attribute. Here you list the ids of any <input> elements the result depends on Any screen reader users able to comment on whether this is worth doing? I suspect this would be such a rarity online that screen reader users wouldn’t be familiar with it, but it depends on the UX of the software

WickyNilliams 1y ago
Not a screen reader user but I have used them a lot in testing. I'd be surprised if it's meaningfully exposed to assistive tech. Not at the computer right now so I can't test. That said, I imagine it's more useful to do the opposite, label the output itself e.g. <label for="output">Total</label> <output id="output">£123.45</output> That way it will be announced like "Total, £123.45" rather than a random number with no context
- skeeter2020 1y ago
  For static scenarios this works well with screen readers. On the output tag the "for" property helps screen readers deal with dynamic values, essentially adding reactivity to the element. I use it so infrequently I've never explored how it works but screen readers will catch that the value has been updated. This is handy for testing with screen readers, and includes links to the appropriate spec (for output and all elements): https://stevefaulkner.github.io/AT-browser-tests/test-files/output.html https://stevefaulkner.github.io/AT-browser-tests/test-files/...
  - WickyNilliams 1y ago
    It's often the case that screen readers do not support the more exotic aspects of html (hell even some basics, unfortunately). The browser may add a reference from one to the other in the accessibility tree, but whether a screenreader announces it is another matter. I'd be surprised if it's supported in any meaningful way here. Happy to be shown otherwise!
  - deleted 1y ago
    [deleted]

pbhjpbhj 1y ago

If you have to use `role=status` to make it work with screenreaders, I'm not sure I see the point. Maybe I'm jaded, I was all in on semantic xhtml and microformats before we got HTML5, but this seems like being overly-pedantic for the sake of pedantry rather than for a11y.

rglullis 1y ago
Chicken-and-egg. As soon as more websites start using the tag, screenreaders will catch up and role=status will not be needed.

andai 1y ago

>When I searched GitHub public repos, it barely showed up at all. Is there a way to search by code?

Etheryte 1y ago
That's literally what search does on Github?
- ameliaquining 1y ago
  Only if you're signed in.
- andai 1y ago
  Turns out there is a Code Search option, but it's not the default (default is repo names and descriptions). Neat!

greatgib 1y ago

For a website speaking accessibility, it does something very bad and annoying with scrolling. Not using the native browser scrolling I think. When I use the middle wheel of my mouse to go up or down, sometimes it suddenly it ignore the command or stutter or go back a little bit instead of continue going down or some random movement. Even with using 2 fingers scroll with the touchpad, I can feel very slightly that there a subtle lag or stutter.

zkmon 1y ago

I don't think this was ignored for no reason or simply forgotten. I don't see it bringing a great feature or value compared to input tag. You still need to code up the logic for setting its value, via a script, like any other container tags. You could pretty much use a read-only input tag to include the output with the form.

swiftcoder 1y ago
> You could pretty much use a read-only input tag to include the output with the form. You could, but then you wouldn't be gaining any of the accessibility wins the article is discussing...

moffkalast 1y ago

> dynamic results that are announced to screen readers by default. > It’s been in the spec for years. Yet it’s hiding in plain sight. Almost as if we're... blind to it? No? Too on the nose?

redbell 1y ago

> But <output>? Most have never touched it. Some don’t even know it exists. Yeah, count me on with those who don't even know it exists. I'm adding this to my TIL. > When I searched GitHub public repos, it barely showed up at all. > That absence creates a feedback loop: if no one teaches it, no one uses it. This has triggered an instant question in my head: Do LLMs actually use it when generating code or they are not well-trained for this specific tag?

deleted 1y ago
[deleted]
mcdonje 1y ago
I, too, am concerned about AIs not reading the docs. What happens when a new W3C spec comes out and most people are vibe coding? If AIs don't take current specs into account and just regurgitate old code patterns, then disseminating spec updates or new specs will be harder than it already is.
- nashashmi 1y ago
  Yeah llms don’t read docs. They repeat the info in docs. And swap letters around the code to make it fit.
- Devasta 1y ago
  Most people don't care about W3C specs as it is, nevermind with vibe coding. The React release notes are the important web standards they follow.
  - abnercoimbre 1y ago
    I was filled with a definite sadness after reading your comment. It is what it is.
- qingcharles 1y ago
  Alternate problem. I was trying to fix up an old repo I found which used some pdf tool, but when trying an LLM it insisted on reading all the documentation, but the docs were woefully out of date and didn't match the actually binaries, so it got terribly twisted up.

ford 1y ago

Interestingly I've often seen this in Claude outputs, especially on long prompts. I've assumed this is because of Claude's XML-based instruction format, but this does make me wonder how related the two are. And if Claude may have a harder time using <output> given it's related to both accessibility and its instructions

stefvw93 1y ago
I suppose claude is trained on the spec and docs like MDN

IshKebab 1y ago

I think the lesson here is if you want to provide an accessibility feature, you have to also make it do something useful for people that don't care about accessibility.

c-smile 1y ago

Problem with <output> is that it is half-baked making its usage almost useless. It would be significantly more practical for the output to have "type" attribute in the same way as in the input. I did experiment with oputput|type in my Sciter and added these: type="text" - default value, no formating type="number" - formats content as a number using users locale settings, type="currency" - formats content as a currency using users locale settings, type="date" - as a date, no TZ conversion, type="date-local" - as a date in users format, UTC datetime to local, type="time" - as a time type="time-local" - as a local time, value treated as UTC datetime. This way server can provide data without need to know users locale.

zdragnar 1y ago
I would be on board with most of these, but...Why on earth would the server send a currency value without knowing the users locale? Are you expecting the browser to be constantly pinging services to see exchange rates?
- c-smile 1y ago
  Not sure I understand why do you need exchange rates with it. <output type="currency"> uses the same convention as "Intl.NumberFormat/style=currency": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
  - dclowd9901 1y ago
    You're talking about currency formatting while they are talking about currency value. In essence, you're both correct. They are correct in that if you're displaying a currency value, you have to know which currency it is in, right? It wouldn't make sense for the server to be "unaware" of the locale of the value. That said, your comment sidesteps that issue and addresses how the number itself is displayed, since ultimately the value itself is a number, but different locales display numbers differently. So the person you're responding to is asking: since the server ostensibly already knows which currency it's in, shouldn't it already be formatting the value appropriately, and that's more a question of where one thinks localization formatting should ultimately live in web app context.

bdcravens 1y ago

I have no idea if it was based on the HTML tag, but ColdFusion/CFML has (always?) had the <cfoutput> tag for displaying and parsing dynamic data.

hn_throw_bs 1y ago

> So why don’t we use it? Because we don’t need another fucking tag, that’s why.

ty_2k 1y ago

I have completed multiple courses on front-end web accessibility and never run into <output>, somehow. Thanks so much for the awesome share.

throw_m239339 1y ago

The article was all good until he started to use react for implementation. I would not have done that for an article about web standards, and I use react all the time.

hollowturtle 1y ago

Hell html in 2025 feels so underdeveloped, semantic html should just be declared dead and we should just move on. How many years we wasted by having "experts" underlining the semantic meaning of aside, article, main etc? Good lord, perhaps we should just totally skip the dom and use a graphics, input and accessibility api the way we want

sefrost 1y ago
It seems to me that most semantic HTML has helped third parties extract data from web pages for their own use. Perhaps if you are an important primary source of information like a government service that could be useful if it helps you advance your cause of sharing data, but I don’t think it is in the interest of most website operators if it reduces traffic to your site. I understand that their are some accessibility benefits to some semantic HTML tags.
- hollowturtle 1y ago
  The discussion of past years instead of being focused on "what we could do next to make developing apps for the web better?" has been focused on which semantic meaning the x tag has and where it should be used, creating just a lot of confusion and disagreements, vs the reality: people just use divs, you can still specify aria attributes there, why not giving us an api to specify semantic meaning as well the way we want? I'd like to have something like flash back, html5 was a step back, partially has already been achieved by flutter and react native. Please Browser vendors just give us a goddman drawing api that doesn't feel limited as canvas is with a semantic, accessibility and input apis that don't suck!
  - skrebbel 1y ago
    I feel like you’re worked up about a hype that began in 2005 and fizzled out in 2015.
    - hollowturtle 1y ago
      Please tell me then what I've been missing. Modals/Dialogs?

Hadimns57 1y ago

Okay

didip 1y ago

I honestly don't know what is it for. Why is it important to have an output tag. The output of any actions will be shoved into any N random elements. So every `<div>` will have `<output>`? Why? Waste of payload size and CPU cycles in parsing. The designers of semantic tags truly live in ivory towers.

mgraczyk 1y ago

Semantic html is a novice trap, just do the thing that works and that browsers expect (aria-live) It's fun to play around with things like this, but if you're a developer you have a responsibility to build things that work for your users using the existing tools and ecosystem. Don't use semantic HTML tags that aren't widely used, just do the thing that works.

NoMoreNicksLeft 1y ago
> Semantic html is a novice trap, just do the thing that works and that browsers expect (aria-live) html isn't just "browsers". I've been doing alot of epub work, and semantic pages make everything easier and better.
niek_pas 1y ago
In the article: > 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. So what makes you think this isn’t a “thing that works”?
- lol768 1y ago
  > Update 7 Oct 2025: Some screen readers have been found not to announce updates to the tag

hk1337 1y ago

It’s nice seeing stuff like this. Another is structuring your form names to help align with how it’s going to be used in the backend so you don’t have to use JavaScript to gather all the data or be doing a lot of restructuring of the request data. This is an oversimplified example but now even if you submit with JS, you just have to submit the form and the form data is already there. <input name=“entity[id]”> <input name=“entity[relation]”>

freejoe76 1y ago

If you're interested in learning how much HTML you actually know, I wrote this quiz to test you (and at the end it shows you how many of the hundred-plus elements you missed, and what each are for). https://joemurph.com/article/detail/html5-elements-quiz/ https://joemurph.com/article/detail/html5-elements-quiz/

zeroq 1y ago

Imagine a world where you don't have to deal with legacy js, css and html stuff and you could opt-in for an alternative, better solution that just works on every single computer, the very same way it works on your own. Imagine you place a textfield in precise spot on a screen, with your choice of font and it renders the way it renders on your screen on every client device, everywhere. Oh wait, we had, it was called Flash.

miki123211 1y ago

As a screen reader user, I think aria live regions (and hence the output tag) were actually a mistake. What we should have had instead is a `document.speak(text, priority)` method, which would just pass the text straight through to the screen reader. Sure, that approach is less pure, yet it is far more pragmatist and practical, as you only need aria when you heavily use js anyway. Aria live regions, as they currently stand, basically encourage three anti-patterns: First is the "if it changes, it should be announced" anti-pattern, think e.g. a constantly changing stock ticker on a news website. People make these into aria live regions because "it's live, we want to be good citizens and do semantics, right?". Sites that do this are almost impossible to use, as you're constantly distracted by the ticker. Another instance of this are timers that change every second. With a `document.speak` method, it would be far more obvious that you don't want the screen reader to announce the ticker every time it changes. The second anti-pattern is the one of outputting the same message twice. Think a calculator where the user executes two different expressions which both produce a result of 0. The result of the second expression won't be announced, as there will be no change to the live region contents. With `document.speak`, this wouldn't be a problem, as the method would just be executed twice. The third anti-pattern is actually somewhat specific to the `output` tag. It's very tempting to use it for terminal, log and chat outputs, and that is a mistake. Those processes append to the output instead of replacing it, but with the aria status of atomic, the entire output area would be announced every time the output changes.

lelandfe 1y ago
Just wanted to say thanks for some practical feedback, this is great.