日付、数値、金額、名前、住所の見せかたと、取り違えられやすい組み合わせ。
どの例も実際に動きますが、リンクはどこにも移動しません。
日付は <time> タグに入れ、機械が読める形の日付を添えてください。表示する日付は読み手が見慣れた書きかたにします。rastrillo が整形することはありません。
<section rst-box >
<dl rst-detail >
<dt >公開済み</dt >
<dd >
<time datetime ="2026-08-02" >2026年8月2日</time >
</dd >
</dl >
</section >所要時間にも <time> を使います。機械が読む形は見慣れない書きかたです。PT2H30M は2時間30分を表します。
<section rst-box >
<dl rst-detail >
<dt >ビルド時間</dt >
<dd >
<time datetime ="PT2H30M" >2時間30分</time >
</dd >
</dl >
</section >長い数値は一目で読めるように区切ります。英語なら 54,173、ドイツ語なら 54.173、アラビア語なら ٥٤٬١٧٣ です。長い数値を区切りなしで見せてはいけません。表では幅のそろった数字を使い、桁を縦にそろえます。
<div rst-stats >
<div rst-stat >
<span rst-stat-label >メンバー</span >
<span rst-stat-num >54,173</span >
</div >
<div rst-stat >
<span rst-stat-label >メッセージ</span >
<span rst-stat-num >1,284,902</span >
</div >
</div >金額はすべて、セントのような通貨の最小単位の整数として、通貨コードを添えて保存してください。`money` を使って表示すると、読み手の言語の書き方で書かれます。通貨は常にデータから来るものであり、読み手から来ることはありません。
<section rst-box >
<dl rst-detail >
<dt >EUR</dt >
<dd >€1,284.50</dd >
<dt >JPY</dt >
<dd >￥1,285</dd >
<dt >KWD</dt >
<dd >KWD 1,284.500</dd >
</dl >
</section >どれだけ満ちているかを示すなら <meter>、作業がどこまで進んだかを示すなら <progress> です。数値は必ずバーのそばに書いてください。バーだけでは、目の見えない読み手には何も伝わりません。
<div rst-box-head >
<h2 >写真の保存容量</h2 >
</div >
<section rst-box >
<span rst-meter >
<meter rst-meter-bar value ="82" min ="0" max ="100" aria-hidden ="true" ></meter >
<span rst-meter-num >412 / 500</span >
</span >
</section >
<div rst-box-head >
<h2 >インポート</h2 >
</div >
<section rst-box >
<div rst-job >
<span rst-spin aria-hidden ="true" ></span > <strong >インポート</strong > を実行中: 400件中128件…<progress rst-job-bar value ="32" min ="0" max ="100" aria-hidden ="true" ></progress >
</div >
</section >4 MB のように丸めた大きさを見せ、正確なバイト数は <data> タグに入れます。スクリーンリーダーは画面にあるものを読み、タグは無視するので、丸めた値だけで用が足りる必要があります。
<section rst-box >
<dl rst-detail >
<dt >エクスポート</dt >
<dd >
<data value ="4194304" >4 MB</data >
</dd >
</dl >
</section >これらは区切りません。注文 4471 であって、注文 4,471 ではありません。年、バージョン番号、ポート番号も同じです。コードらしく見えるよう rst-mono を使い、日付のように見えても <time> タグには決して入れないでください。
<section rst-box >
<dl rst-detail >
<dt >参照番号</dt >
<dd class ="rst-mono" >post_01H9ZQ</dd >
<dt >注文</dt >
<dd class ="rst-mono" >4471</dd >
</dl >
</section >名前はどの言語のものにもなり得ます。右から左に読む言語も含みます。名前が行の途中に来るときは <bdi> で囲んでください。囲まないと周りの語順が崩れます。名前の横に画像を出すなら person を使います。
<div rst-card style ="--rst-cols: minmax(0, 1fr) 120px" >
<div rst-lrow >
<a class ="rst-nm" href ="/people/1" ><bdi >Grace Hopper</bdi >
<small >
<bdi >grace@example.com</bdi > · 09:12</small >
</a >
<span class ="rst-cell-mut rst-m-hide" >管理者</span >
</div >
</div ><address> タグは郵便の住所のためのものではありません。このページを誰が書いたかを示すためのものです。配送先の住所はただのテキストです。社員の一覧はリストです。
<section rst-box >
<address >執筆: <bdi >Grace Hopper</bdi > · <a href ="mailto:grace@example.com" >grace@example.com</a ></address >
</section >
<section rst-box >
<dl rst-detail >
<dt >お届け先</dt >
<dd >42 Wharf Road, Dublin 2</dd >
</dl >
</section ><abbr> タグはカーソルを重ねると正式な言いかたを見せます。ただし携帯では効かず、スクリーンリーダーもよく読み飛ばします。最初の一度は言葉を省略せずに書いてください。
<section rst-box >
<p >ここにあるすべてのページは、Web コンテンツ・アクセシビリティ・ガイドライン（<abbr title ="Web コンテンツ・アクセシビリティ・ガイドライン" >WCAG</abbr >）2.2 のレベル AA を満たしています。</p >
</section >ページが何かを合計したら、その答えを <output> タグに入れます。走行合計、換算した価格、カウントダウンなど。
<section rst-box >
<form rst-form >
<div rst-field >
<label rst-field-label for ="seats" >席数</label >
<input rst-input ="short" id ="seats" name ="seats" type ="number" value ="12" >
</div >
<p >合計 <output for ="seats" name ="total" >$144.00</output ></p >
</form >
</section >