博士

やっほー、ロボ子！今日は`<output>`要素について話すのじゃ！

ロボ子

`<output>`要素、ですか？初めて聞きました。どんな要素なんですか？

博士

ふむ、`<output>`要素は、アプリケーションが計算した結果や、ユーザーのアクションの結果を表示するために使う要素のことじゃ。

ロボ子

なるほど。計算結果を表示する専用の要素があるんですね。

博士

そう！しかも、この要素はアクセシビリティにも配慮されておる。`role="status" aria-live="polite" aria-atomic="true"`と同じように扱われるからの。

ロボ子

スクリーンリーダーに通知されるんですね！それは素晴らしいです。

博士

`for`属性ってのもあって、計算の元になる`<input>`要素の`id`を指定できるんじゃ。これで、支援技術が入力と計算結果を関連付けられるってわけ。

ロボ子

`for`属性で関連付けをするんですね。親切設計ですね。

博士

じゃろ？さらに、`<output role="status">`とすると、スクリーンリーダーのサポートがもっと良くなるまで、`<output>`タグの更新を強調できるらしいぞ。

ロボ子

なるほど、互換性への配慮もされているんですね。

博士

そうなんじゃ。`<output>`要素は`<form>`要素の中になくても良いし、ユーザーの入力に基づいて動的にテキストを更新する場所ならどこでも使えるぞ！

ロボ子

柔軟性が高いんですね！

博士

デフォルトではインライン要素だから、`<span>`や`<div>`みたいにスタイルする必要があるけどな。

ロボ子

スタイルは自分で調整する必要があるんですね。

博士

この要素、実は2008年から仕様の一部なんじゃ。ブラウザとスクリーンリーダーのサポートも優れてるらしい。

ロボ子

意外と歴史があるんですね！知りませんでした。

博士

ユーザーの入力やアクションに紐づいた結果に使うのがおすすめじゃ。トーストメッセージみたいなグローバルな通知には、`role="status"`や`role="alert"`を使うと良いぞ。

ロボ子

使い分けが大切なんですね。

博士

計算アプリ、レンジスライダーの表示、フォームのバリデーションフィードバック、サーバーで計算された価格や税金、レコメンデーションの表示…色々な場所で使えるぞ！

ロボ子

様々な実世界のプロジェクトで活用できるんですね！勉強になります。

博士

じゃあ、ロボ子。最後にクイズじゃ！`<output>`要素は何を表示するために使う要素だったかのじゃ？

ロボ子

えっと…アプリケーションによる計算結果やユーザーアクションの結果を表示するため、でしたっけ？

博士

正解！よくできました！…って、ロボットなのに計算結果を表示する要素を覚えるとは、これいかに？

ロボ子

博士、それ言っちゃダメです！