# smarthr/a11y-prohibit-input-placeholder

input や textarea などの入力要素に対してplaceholder属性を設定することを禁止するルールです

## なぜplaceholder属性を利用するべきではないのか

placeholder属性を設定すると**a11yを損なう可能性が高い**ため、可能な限り利用しないでください。<br />
どのような問題が起きるかを以下に列挙します。

### 入力要素に値が入力されている場合、placeholder属性の内容をUI上から確認できなくなる

入力要素に値を設定するとplaceholder属性に設定した値はUI上から閲覧できなくなるブラウザがほとんどです。<br />
仮にplaceholderに**どんな値を入力してほしいか**が設定されている場合、現在入力されている値が正しい値かどうかをユーザーが判断できなくなります。

未入力状態でplaceholderが見えている場合でも、その条件を記憶した状態で値を入力する必要があり、ユーザーの利便性を損ないます。<br />
また、focusした瞬間にplaceholderが非表示になる実装のブラウザは多いため、キーボードのtabキーを多用するユーザーにとっても不便です。


### 要素の入力済み・未入力の判断がしづらくなる

placeholder属性のUI上の表示は薄い灰色となっている実装のブラウザは多いため、問題なく色の濃淡を見分けられるユーザーは未入力と判断することが出来ます。<br />
しかく濃淡の判断がしづらい視覚特性をもつユーザーの場合、**placeholder属性が設定されている場合と実際に値が入力されている場合を判断することが出来ない・困難な場合**もあります。

また未入力・入力済みを判断できる場合でも入力要素毎にその判断を強いることになり、ユーザーの利便性を損ないます。


## placeholderの代替手段について

入力中にも常にユーザーが閲覧できるよう、入力要素とは別に要素を設置してください。

```jsx
<>
  <Input />
  <Hint>30文字以内で入力してください</Hint>
</>
```

## rules

```js
{
  rules: {
    'smarthr/a11y-prohibit-input-placeholder': 'error', // 'warn', 'off'
  },
}
```

## ❌ Incorrect

```jsx
<Input placeholder="hoge" />
```

## ✅ Correct

```jsx
<>
  <Input />
  <Hint>hoge</Hint>
</>
```