その``、本当にクリックさせるつもり？インライン要素とARIAの「正しい距離感」
現場のコードレビューをしていると、必ずと言っていいほど遭遇するのが「本来の用途とは違うタグに、無理やりボタンの役割を詰め込んでいる」ケースです。
「CSSで見た目を整えればいいじゃん」――その気持ち、痛いほど分かります。``タグのデフォルトのアンダーラインや、`
ですが、フロントエンドエンジニアとして一歩先へ行くなら、その「手っ取り早さ」がアクセシビリティという地雷原を歩いていることを自覚しなければなりません。今回は、インライン要素とARIAロールの付き合い方について、ブラウザの裏側の挙動を交えて深掘りします。
—
なぜ「本来のタグ」を使うことが最強のアクセシビリティなのか
まず大前提ですが、「HTMLは、それ自体が最強のアクセシビリティ」です。
ブラウザのアクセシビリティツリーを構築する際、`
これらを``で再現しようとすると、`tabindex=”0″`を付与し、`keydown`イベントでEnterキーを検知し……と、数行で済むはずの処理が数十行のボイラープレートに化けます。これが「セマンティクスを損なう」というリスクです。
現場で使える「妥協の許容範囲」とARIAの作法
どうしてもデザインの都合上、非インタラクティブな要素（``や`
1. `role=”button”` を付与する際の必須セット
`role=”button”` を使うなら、最低限以下の3つを揃えるのが「プロの最低ライン」です。
- `tabindex=”0″`: キーボードでフォーカスを当てるため。
- `keydown`イベントのハンドリング: EnterとSpaceキーでクリックイベントをトリガーさせるため。
- `aria-label` または中身のテキスト: ボタンが何をするものか、スクリーンリーダーに伝えるため。
2. 実践的なサンプルコード
以下に、現場でもそのまま使える「堅牢なカスタムボタン」の雛形を用意しました。
陥りやすい罠：``タグと`role=”button”`の混同
よくあるミスが、「ページ遷移はしないけど見た目がリンクっぽいから、``に`role=”button”`をつける」というパターンです。これは完全に逆効果です。
- ``タグは「場所（URL）への移動」を意味します。
- `role=”button”`は「アクション（処理）の実行」を意味します。
この二つを混同すると、スクリーンリーダーのユーザーは「リンクだと思って押したのに、画面が変わらないぞ？」と混乱します。もし`href`属性を持たない``タグがあるなら、それは``を使うべき場所ではありません。``はリンクに使い、ボタンが必要なら迷わず`
まとめ：フロントエンドエンジニアの矜持
最近のフレームワーク（ReactやVueなど）は、`onClick`を簡単に付与できるため、要素のセマンティクスを忘れがちです。しかし、私たちが書いているのは「ただ動くコード」ではなく「誰にとっても使いやすいインターフェース」です。
1. まずは標準のタグ（`
2. どうしても変えるなら、ブラウザが標準で提供している機能を自前で実装する覚悟を持つ。
3. `role`や`aria-`は魔法の杖ではない。まずはHTMLの構造を見直す。
この視点を持つだけで、あなたのコードの品質は一段上のレベルへと引き上げられます。明日からの実装で、ぜひ一度「このタグで本当に正しいのか？」と自分に問いかけてみてください。その小さな疑問こそが、世界最高峰のフロントエンドへの第一歩です。
コメント