日付と時刻
日付は <time> タグに入れ、機械が読める形の日付を添えてください。表示する日付は読み手が見慣れた書きかたにします。rastrillo が整形することはありません。
<section rst-box>
<dl rst-detail>
<dt>Published</dt>
<dd><time datetime="2026-08-02">2 August 2026</time></dd>
</dl>
</section>rastrillo デザインシステム
デザインシステムが提供するものの概要。テーマ: plain。言語: 日本語。
日付・数値・名前
日付、数値、金額、名前、住所の見せかたと、取り違えられやすい組み合わせ。
どれだけ時間がかかったか
所要時間にも <time> を使います。機械が読む形は見慣れない書きかたです。PT2H30M は2時間30分を表します。
<section rst-box>
<dl rst-detail>
<dt>Build time</dt>
<dd><time datetime="PT2H30M">2h 30m</time></dd>
</dl>
</section>数値
長い数値は一目で読めるように区切ります。英語なら 54,173、ドイツ語なら 54.173、アラビア語なら ٥٤٬١٧٣ です。長い数値を区切りなしで見せてはいけません。表では幅のそろった数字を使い、桁を縦にそろえます。
<div rst-stats>
<div rst-stat><span rst-stat-label>Members</span><span rst-stat-num>54,173</span></div>
<div rst-stat><span rst-stat-label>Messages</span><span rst-stat-num>1,284,902</span></div>
</div>金額
rastrillo が書けるのは米ドルだけです。それ以外は自分で整形してください。どちらの場合も、金額はセントの整数で保存し、小数では保存しないでください。
<section rst-box>
<dl rst-detail>
<dt>Payout</dt>
<dd>$1,284.50</dd>
</dl>
</section>割合とバー
どれだけ満ちているかを示すなら <meter>、作業がどこまで進んだかを示すなら <progress> です。数値は必ずバーのそばに書いてください。バーだけでは、目の見えない読み手には何も伝わりません。
<div rst-box-head><h2>Photo storage</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>Import</h2></div>
<section rst-box>
<div rst-job><span rst-spin aria-hidden="true"></span> <strong>Import</strong> is running — 128 of 400…<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>Export</dt>
<dd><data value="4194304">4 MB</data></dd>
</dl>
</section>参照番号とコード
これらは区切りません。注文 4471 であって、注文 4,471 ではありません。年、バージョン番号、ポート番号も同じです。コードらしく見えるよう rst-mono を使い、日付のように見えても <time> タグには決して入れないでください。
<section rst-box>
<dl rst-detail>
<dt>Reference</dt>
<dd class="rst-mono">post_01H9ZQ</dd>
<dt>Order</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">Admin</span>
</div>
</div>住所
<address> タグは郵便の住所のためのものではありません。このページを誰が書いたかを示すためのものです。配送先の住所はただのテキストです。社員の一覧はリストです。
<section rst-box>
<address>Written by <bdi>Grace Hopper</bdi> · <a href="mailto:grace@example.com">grace@example.com</a></address>
</section>
<section rst-box>
<dl rst-detail>
<dt>Deliver to</dt>
<dd>42 Wharf Road, Dublin 2</dd>
</dl>
</section>WCAG のような略語
<abbr> タグはカーソルを重ねると正式な言いかたを見せます。ただし携帯では効かず、スクリーンリーダーもよく読み飛ばします。最初の一度は言葉を省略せずに書いてください。
<section rst-box>
<p>Every page here meets the Web Content Accessibility Guidelines
(<abbr title="Web Content Accessibility Guidelines">WCAG</abbr>) 2.2 at level AA.</p>
</section>ページが計算して出す数値
ページが何かを合計したら、その答えを <output> タグに入れます。走行合計、換算した価格、カウントダウンなど。
<section rst-box>
<form rst-form>
<div rst-field>
<label rst-field-label for="seats">Seats</label>
<input rst-input="short" id="seats" name="seats" type="number" value="12">
</div>
<p>Total <output for="seats" name="total">$144.00</output></p>
</form>
</section>