a11y/require-datetime · `datetime` 属性がない

time 要素のテキストは機械可読であるか、datetime 属性で機械可読な値を補う必要があります。

重大度: info · カテゴリ: a11y

warning ではなく info としています。これは HTML の適合性要件であって、アクセシビリティの達成基準ではないためです。「先週の火曜日」はスクリーンリーダーも目で見るのと同じように読み上げます。失われるのは機械可読な値です。

チェック内容

datetime 属性を持たない <time> 要素について、そのリテラルなテキスト内容自体が機械可読でない場合を検出します。コンポーネントのソースを解析します。

テキストが次のいずれかの HTML の日時形式に一致すれば機械可読とみなします: 年/月/日（2026-08-14）、時刻（14:30）、日時（2026-08-14T14:30）、年なしの日付（08-14）、週（2026-W33）、タイムゾーンオフセット（+09:00、Z）、そして期間の 2 つの書き方（P3D と 4h 18m 3s）。年は 4 桁以上を認めます。

検出しないもの:

何らかの形（リテラルでも式でも）の datetime 属性: <time datetime="2026-08-14">Aug 14</time>
すでに機械可読なリテラルテキスト: <time>2026-08-14</time>
純粋なテキストではない内容。{式}、コンポーネント、ブロックなど（描画結果のテキストが静的にはわからないため）: <time>{d}</time>
<time> へのスプレッド属性。それ自体が datetime を供給しうるため、要素ごとスキップします: <time {...props}>last Tuesday</time>

<time>last Tuesday</time>

なぜ重要か

datetime 属性を持たない <time> は、テキスト内容だけが唯一の機械可読な値になり、HTML 仕様はそのテキストが妥当な日時文字列であることを要求します。「先週の火曜日」のようなテキストは誰にとっても普通に読めますし、スクリーンリーダーも目で見るのと同じようにそのまま読み上げます。しかし妥当な日時文字列ではないため、この要素は標準化された日付を一切公開しません。日付を得たい側は、値を読む代わりに散文を推測するしかなくなります。失われるのは読み手にとってではなく、機械にとってです。このルールが問題にしているのも、スクリーンリーダーの読み上げではなく要素のセマンティクスです。

修正方法

機械可読な値を持つ datetime 属性を追加します。

<time datetime="2026-08-14">last Tuesday</time>

モードによる違い

ありません。このルールが読むのは同じ .svelte / .ts のソースファイルなので、CLI、Vite プラグインのビルド、ライブダッシュボードの静的ベースラインのいずれでも結果は同一で、レンダリング済み HTML の解析で再評価されることもありません。--route で実行範囲を絞ると、このルールは動きません。コンポーネントスコープのルールには、検出を紐づけるルートが無いためです。

無効化

テキストが意図的に機械可読でない場合は、 で個別の要素を抑制するか、ルールを無効化してください。

export default {
  rules: {
    'a11y/require-datetime': 'off'
  }
};