divタグをボタンにするのは避けよう

NG

Click

フォーカスできず、アクセシビリティ上もインタラクティブな要素として認識されない

Good

フォーカスでき、アクセシビリティ上もインタラクティブな要素として認識される

適切なクリッカブルエリアの確保

NG

アイコンの周りピッタリしか反応しない

Good

アイコンの周囲も反応する

途切れないリンクエリア

NG

外部リンク

外部リンクを示すアイコンと文字の間に反応しない部分がある

Good

外部リンク

外部リンクを示すアイコンと文字の間に反応しない部分がない

ハンバーガーメニューの領域

NG

文字部分にしかリンクエリアがない

Good

項目全域にリンクエリアがある

インプット要素をラベル要素で紐付ける

NG

個人情報保護方針に同意する

紐付けられていない。文字列部分をクリックしてもチェックされない

Good

label要素で囲って紐付けられている。文字列部分をクリックしてもチェックされる

Good

label要素のfor属性とinput要素のid属性で紐付けられている。文字列部分をクリックしてもチェックされる

placeholderをラベル代わりにしない

NG

ラベルがない状態

Good

ラベルがあり、入力例が提示されている

インタラクションを重ねない

NG

チェックボックスのクリッカブルエリアとリンクのクリッカブルエリアが重なっている

Good

個人情報保護方針

チェックボックスとリンクが別々になっている

アイコンのみのボタンには適切なラベルを付与する

NG

ボタンに適切なラベルが示されていない

Good

ボタンに適切なラベルが示されている（aria-labelで実装）

Good

ボタンに適切なラベルが示されている（不可視テキストで実装）

ボタンにはcursor:pointerをつけよう

NG

ホバーしてもカーソルが変わらない

Good

ホバーしたらカーソルがポインターになる

タッチデバイスでのホバーアニメーションの回避

NG

ホバーで色が変わるリンク

タッチでも色が変わる

Good

ホバーで色が変わるリンク

タッチでは色が変わらない

※タッチデバイスで確認してください

インタラクション要素へのフォーカス時にoutline:noneをつけるのは避けよう

NG

フォーカスしてもわからない

Good

フォーカスしたらわかる

アコーディオンを作るときはsummary・detailsタグが便利

NG

概要
折りたたまれている部分です。

特別なケアをしないと、タブフォーカスやキーボード操作、読み上げなどが行われない

Good

概要
折りたたまれている部分です。

特別なケアなしに、タブフォーカスやキーボード操作、読み上げなどが行われる

大きくしたり、移動したりする場合はtransformを使おう

NG

Hover

他の領域に影響を与え、アニメーションがやや滑らかでない

Good

Hover

他の領域に影響を与えず、アニメーションが滑らか

境界でのホバーに注意

NG

境界付近にホバーするとアニメーションが荒ぶる

Good

境界付近にホバーしてもアニメーションが荒ぶらない

input要素をカスタムするときにdisplay:noneにしない

NG

フォーカスできない

Good

フォーカスできる

input要素にautocomplete属性を設置してあげると便利

NG

オートコンプリートできない

Good

オートコンプリートできる

※NG例とOK例を併記するとSafariが両方ともオートコンプリート可能になってしまうので、切り替えて表示しています

input要素のフォントサイズが16px未満だとズームしてしまう

NG

ズームしてしまう

Good

ズームしない

※iOS端末で確認してください

装飾系Videoタグのコントロール非表示

NG

ピクチャーインピクチャーができてしまう

Good

ピクチャーインピクチャーができない