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

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

## チェック内容

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

```svelte
<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` だけではタッチ操作・キーボード操作のユーザーや多くの支援技術ユーザーに届きません):

```svelte
<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 -->` で個別の要素を抑制するか、ルールを無効化してください。

```js svelte-vitals.config.js
export default {
  rules: {
    'a11y/pattern-title': 'off'
  }
};
```