a11y/pattern-title · 形式の説明がない pattern 入力欄

input に pattern を指定するときは、期待する形式を説明する title を含めるべきと仕様が述べています。それがないと、送信に失敗しても「値が違う」ことしか伝わりません。

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

チェック内容

リテラルの pattern を持ちながら、期待する形式を説明する title のない <input> を検出します。

<input pattern="[A-Za-z]+-[0-9]+" />

判定するのは pattern が実際に効く入力欄だけです: type なし(既定で Text 状態)、またはリテラルの type が仕様の適用対象（text・search・url・tel・email・password、大文字小文字を区別せず照合）の場合です。空のリテラル title="" は何も説明しないため検出し、式値の title={expr} は存在ありとみなします。

検出しないもの:

• 適用対象外のリテラル type(type="number" など)。そこでは pattern が無効なので、title を要求するのは誤りです。
• 式値の type や pattern。静的には判定不能です。
• スプレッド属性を持つ入力欄、および <svg> 内の入力欄(そこではフォームコントロールとしてレンダリングされません)。

なぜ重要か

仕様は、pattern 属性を指定するときは、そのパターンの説明を与える title を含めるべきだと述べています。ブラウザはその title をバリデーションエラーに表示するため、無いと送信に失敗したユーザーには「値が違う」ことしか伝わらず、何が正しいのかは分かりません。

修正方法

期待する形式を平易な言葉で説明し、可視のヘルプテキストにも同じ内容を書きます(title だけではタッチ操作・キーボード操作のユーザーや多くの支援技術ユーザーに届きません):

<input pattern="[A-Za-z]+-[0-9]+" title="Letters, a dash, then digits" />

制限事項

未知の type キーワード(type="txet")は仕様上 Text 状態にフォールバックし、そこでは pattern が効きます。しかしこのルールはタイポを推測せず、既知の集合の外の type をスキップします。意図的で保守的な偽陰性です。

正規表現の量指定子の波括弧({3})は、テンプレートの属性内では Svelte の式として解釈されます。そのため波括弧を使う pattern は通常 pattern={'[A-Za-z]{3}[0-9]{4}'} のように式として書くことになり、このルールは判定不能としてスキップします。波括弧を含まない素のリテラルの pattern は漏れなくカバーされます。

モードによる違い

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

無効化

このルールから見えない別の方法(aria-describedby で結びつけた可視のヘルプテキストなど)で形式を説明している場合は、<!-- svelte-vitals-disable-next-line a11y/pattern-title --> で個別の要素を抑制するか、ルールを無効化してください。

export default {
  rules: {
    'a11y/pattern-title': 'off'
  }
};