ハンバーガーアイコンには「メニュー」、必須の「*」には「必須」の文字を添える
アイコンや記号だけだと見落とされる。短い文字を1つ添えるだけでタップ率や入力漏れが変わる。
どんな問題を解決するか / いつ使うか
スマホのハンバーガーメニューが気づかれずに素通りされる、フォームの必須項目を飛ばされる、といった問題に効く。AIに作らせたUIはアイコンだけ・記号だけになりやすいので、レビュー時のチェック項目にも入れておく。
やり方
- ハンバーガーアイコンの横（または下）に「メニュー」と書く。
- 必須項目は「*」だけでなく「必須」の文字（バッジなど）を付ける。逆に任意項目が少ないフォームなら「任意」を付けるほうが読みやすいこともある。
- ルールファイルに入れる例：
アイコンだけのボタン・記号だけの印を作らない。意味が伝わる短い文字を添える
注意点
- 文字を添えても、ボタンとして読み上げられる名前（
aria-labelや見えるラベル）は別途必要。「*」は読み上げで意味が伝わらないので、required属性も付ける。 - AGENTS.md に「キャッチコピー・補足文・サブラベルは削る。必要ならレイアウトを直す」の1行を足す と矛盾しないよう、「操作の意味を伝える文字は残す」と例外に書いておく。