<output>タグ は、計算結果やユーザー操作の結果を表示するための HTML5の要素。 スクリーンリーダー に自動で結果を通知し、アクセシビリティ向上に貢献。多くの開発者が知らないが、 divやARIAの代替 として最適。 for属性 で入力要素との関連付けが可能。 幅広いブラウザ・支援技術で対応 しており、ReactやVueとも相性抜群。

<output>タグの再発見

<input>タグ は誰もが使うが、 <output>タグ はほとんど使われていない現状
<output>タグ はHTML5仕様で、アプリケーションによる計算結果やユーザー操作の結果表示用
アクセシビリティツリー上では role="status" にマッピング
値が変化した際に 自動でスクリーンリーダーに通知、aria-live="polite" aria-atomic="true"と同等の動作
ユーザーの操作を妨げず、変更内容全体を読み上げる設計

使い方と利点

基本的な使い方：
- <output>ここに動的な値</output> のみで完結
追加属性や複雑な設定不要、HTMLだけで動作
for属性 で関連する<input>のidをスペース区切りで指定可能
視覚的には変化しないが、 支援技術上は意味的なリンク を生成
フォーム外でも利用可能、動的テキストの出力に最適
デフォルトはインライン表示、必要に応じて CSSでスタイリング
2008年から仕様に存在、主要ブラウザ・スクリーンリーダーで幅広くサポート
ReactやVueなどのフレームワークとも親和性良好

注意点と補足

一部のスクリーンリーダーで 更新通知が行われない場合 があるため、必要に応じて role="status" を明示的に指定推奨
グローバル通知 （トースト等）は<output>ではなく、role="status"やrole="alert"を持つ汎用要素を推奨
<output>は ユーザー入力や操作に紐づく結果表示専用

実例紹介

簡易計算アプリ
- 入力値の計算結果を<output>に表示、スクリーンリーダーが自動で読み上げ
スライダー値のフォーマット表示 （Volvo Cars事例）
- スライダーと<output>をコンテナでまとめ、role="group"とaria-labelledbyでラベル付与
- ユーザーに分かりやすい形式（例：10,000 miles/year）で表示
フォームバリデーションフィードバック
- パスワード強度やリアルタイムバリデーション結果を<output>で通知
サーバー計算結果の表示
- APIから取得した送料などを<output>で動的表示、ユーザーに即時伝達

なぜ使われないのか

チュートリアルやライブラリで紹介されることが少ない ため、認知度が低い
視覚的に目立たず、 開発者が存在を忘れがち
GitHub等の公開リポジトリでも利用例が少ない ことが普及の妨げ

まとめ：HTMLの隠れた名脇役

<output>タグ は、設計意図通り使うだけで アクセシビリティ向上 と 保守性向上 を両立
divやaria-liveによるパッチ的な実装よりもシンプル
仕様に潜む便利な要素を活用することで、 より良いUIとユーザー体験 を実現
最適なツールは意外と身近にある という発見

Hackerたちの意見

どうやら、ウェブページのスクリーンリーダーサポートについての話みたいだね。それと「ARIA」っていうのは、アクセシブルリッチインターネットアプリケーションの略で、障害のある人たちにウェブコンテンツをもっとアクセスしやすくするためのHTML属性のセットなんだ。

└

これは、Reactに関する投稿の下でJavaScriptが何かを説明してるみたいなもんだ。アクセシビリティの基本を知らないことに恥じる必要はないけど、読者にそれを知ってることを期待するのが馬鹿らしいなんて思う必要もないよ。

└

ありがとう、説明してくれて。ググればよかったけど、曇りの土曜日の午後にあなたのコメントをダラダラ読む方が楽だしね。再度感謝、助かりました。;)

2008年からある便利なHTMLタグが、誰も使わないし知らないなんてどういうこと？タグが多すぎるから？みんなドキュメントを読まないから？それとも、メリットがわかりにくいから？

└

いくつかのケースでは、HTMLがすべてのブラウザで使われていなかった時期があって、その代わりにJavaScriptが使われてたんだよね。それからHTMLが使われるようになったけど、誰も確認しなかったし、JavaScriptの流れはすでに進んでた。

└

僕の予想では、ほとんどの人は既存のものをコピー（模倣）するだけだと思う。時々フリーランスのウェブ管理者として働くけど、ウェブサイトを作る仕事をしている人の95%はHTMLタグのリストを一度も読んだことがなく、セマンティックウェブについてもほんの少ししか理解していない。結局、既存のものを寄せ集めているだけで、すぐに手に負えなくなっちゃうんだ。これが問題だとは思わないけど、みんなそれぞれのペースで学んでいるしね。でも、もし彼らに出力タグについて話したら、重要性がわからないかもしれない。

└

特定の方法で問題を解決する習慣がある人は、新しい解決策が登場しても、かなり簡単でない限り切り替えないことが多いよ。すぐに簡単じゃなければ、根付いた習慣を続ける方が楽に感じるからね。

└

たぶん、ほとんどのHTMLタグがブラウザであまりサポートされていないからだと思う。開発者が望むことの半分しかできていないし、スタイルを適用するのも難しいし、ネイティブの動作を強化するのも大変なんだ。最近追加されたタグにはそういう問題がある（例: ）、2008年のこのタグはさらにいい例だね。

└

現代のJavaScriptやDOM操作ツールを使うと、実際に必要なのはdivタグだけだよ。コメントが来る前に言っておくけど、divだけの開発を推奨してるわけじゃない。ただ、WWWの性質がHTMLと少しのJSから、今では…ほぼJSだけになったってこと。

└

ウェブフロントエンド開発者の多くが、スープやおしゃれなCSS、JavaScriptライブラリにハマってるからだよね。

└

HTMLなんて、実際のウェブサイトのペイロードキャリアとしてしか誰も気にしてないからだよね。React/Tailwind/TypeScriptのコンパイルから出力されるJavaScriptが本体なんだ。覚えておいてほしいのは、業界はXHTMLにおいて構文エラーのないコードを求めるのが無理だと思ってるから、divやせいぜい他の十数個のタグ以上のことを知ってるとは期待できないってこと。

└

今のほとんどのサイトは、HTMLを元々想定されていた使い方で使ってないよ。代わりに「DHTML」って呼ばれるものを使ってる。DはDIVのDで、他のタグはほとんど使われないからね。例えば、普通のHTMLではTABLE、TR、TDタグを使ってテーブルを作るけど、現代のDHTML（別名DIV-HTML）では、固定サイズのDIVからテーブルを作って、JavaScriptで列のサイズを計算するんだ。

└

気になる人のために、全部で112個あるよ：abbr, address, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, link, main, map, mark, menu, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, picture, pre, progress, q, rp, rt, ruby, s, samp, script, search, section, select, slot, small, source, span, strong, style, sub, summary, sup, table, tbody, td, template, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr。

└

2025年10月7日更新：いくつかのスクリーンリーダーがタグの更新を通知しないことがわかったので、サポートが改善されるまでの間、role属性を明示的に強調するのは価値があるかもしれないね。多分、HTML/CSS関連のほとんどのものと同じように、半端な機能の半端な実装だからかな？

この記事に来た時、誤用を期待してたんだけど、意外と良かったよ。:-) （実際、最初にあった怪しいGenAI計算機の画像が、もっとひどい内容を予想させてたから、その後の素晴らしい内容がさらに驚きだった。でも、すぐにそのことは忘れて、特に理由もなく戻ってきた時に思い出した。）

└

あの怪しいGenAI計算機の画像。人間って、AIがその怪しさを減らす手助けをする前に、私たちが作ったもっと怪しい画像をすでに忘れちゃってるみたいだね。実際、恥ずかしすぎずに投稿できる画像を手に入れることができたわけだし。:) それにしても、この画像にはレトロなテクノロジーの魅力がたっぷり詰まってると思う。AIの使い方がすべてプロのアーティストを置き換えるわけじゃないよね。

└

この怪しいGenAI計算機、面白いね… 足し算、掛け算、割り算しかできない。引き算は禁止！

20年前にはこれがすごく価値があったのが分かる。あの頃は、非同期でデータを取得するのに1分以上かかることもあったし、ページ上のどのコンテンツが変わったかを伝える必要があった。でも今は、ボトルネックは完全にデータベースが最初で、フレームワークがその次。フレームワークのコードがひどければ、これらは入れ替え可能だよ。これらを考慮しないと、ユーザーの操作に対してローカルサーバーで実行が必要な場合、約5〜15msで画面が更新されるのが見える。ネットワークサーバーだと45msくらい。そんなスピードなら、ユーザーにコンテンツの変更を知らせる必要はないよ。コンテンツを構造化して、DOMを歩いて、スクリーンリーダーを使って、インタラクションのポイントから出力エリアまでが直接的で論理的、期待される形にすればいいんだ。

└

最近のLLMsでは、レスポンスを得るのにまた1分以上かかるようになってるよね…

2025年10月7日更新: 一部のスクリーンリーダーがタグの更新をアナウンスしないことが分かったので、サポートが改善されるまで、役割属性を明示的に強調するのが良いかもしれないね。17年前のほとんど使われていないタグのサポートが改善されるのを待ってるの？

└

スクリーンリーダーの使い方を改善するために、17年間も標準の一部として存在しているタグを無視するのは明らかにスクリーンリーダーのせいだね。

└

Windowsを使ってるなら、NVDAのリポジトリにチケットを開くのがすごくうまくいくよ。彼らがそれを有効と認めればね。https://github.com/nvaccess/nvda

例えば、for=""属性があるよ。ここでは、結果が依存する要素のIDをリストするんだ。スクリーンリーダーを使ってる人たち、これをやる価値があるかコメントできる人いる？これがオンラインでは珍しいから、スクリーンリーダーのユーザーはこれに慣れてないんじゃないかな。でも、ソフトウェアのUXによるね。

スクリーンリーダーと一緒に動かすためにrole=statusを使わなきゃいけないなら、その意味がよくわからないな。もしかしたら私が疲れちゃってるのかも。HTML5が出る前はセマンティックXHTMLやマイクロフォーマットに夢中だったけど、これは単に形式主義のための形式主義に見えるよ。

└

鶏と卵の関係だね。もっと多くのウェブサイトがそのタグを使い始めたら、スクリーンリーダーも追いついて、role=statusは必要なくなるよ。

アクセシビリティを重視したウェブサイトなのに、スクロールに関してはすごく悪いし、イライラすることをしてるよね。ネイティブブラウザのスクロールを使ってない気がする。マウスの中ボタンで上下にスクロールしようとすると、時々突然そのコマンドを無視したり、カクカクしたり、ちょっと戻ったりして、スムーズに下に行かないことがあるんだ。タッチパッドで2本指でスクロールしても、微妙にラグやカクつきを感じるよ。

これは理由もなく無視されたり、単に忘れられたわけじゃないと思う。inputタグと比べて、特別な機能や価値をもたらすとは思えないし。値を設定するためのロジックをスクリプトで書く必要があるから、他のコンテナタグと同じだよ。出力をフォームに含めるために、ほぼ読み取り専用のinputタグを使うこともできるしね。

ハクソク

タグ

概要