こんにちは！Web制作の世界へようこそ。HTMLを書き始めたばかりの頃って、`` や `` といったインライン要素に「一体何をどこまで書けばいいの？」と迷ってしまうこと、ありますよね。
今日は、そんなインライン要素に「役割（role）」を与える魔法、`role`属性について、ちょっと裏側をのぞいてみましょう。難しい理論は一旦置いておいて、身近な例えから紐解いていきますね。
—
1. なぜ「名札」が必要なの？（セマンティクスの話）
HTMLのタグは、それぞれが「自分は何者か」を主張しています。
例えば、`` タグは「僕はリンクです」、`
でも、たまにデザインの都合で `` タグにクリックイベントを仕込んで、無理やりボタンのように動かしたい場面ってありますよね？
そんな時、ブラウザやスクリーンリーダー（視覚障がいの方が使う読み上げソフト）は混乱してしまいます。
「君は `` なのに、なんでクリックできるの？ ボタンなの？ それともただの文字なの？」
ここで登場するのが `role`属性 です。これは、「タグ本来の役割とは違うけれど、今回はこういう風に振る舞ってね！」と伝えるための「後付けの名札」なんです。
2. 大原則：HTML5には勝てない
ここで一つ、絶対に覚えておいてほしい「鉄の掟」があります。
「HTMLのネイティブな要素（`button`や`a`など）をそのまま使うのが最強」
例えば、ボタンを作りたいときに、`` に `role=”button”` を付けるよりも、最初から `
`role`属性は、あくまで「どうしてもHTMLの標準タグでは表現しきれないとき」に使う、最後の切り札だと思ってくださいね。
3. 実践！ `role`属性を正しく使ってみよう
では、実際に `` をボタンのように見立てる場合の例を見てみましょう。
クリックしてね
クリックしてね
ここがポイント！
- `role=”button”`: これでブラウザに「これはボタンとして扱ってね」と伝えています。
- `tabindex=”0″`: これがすごく大事！ これを付けないと、キーボードのTabキーでその要素にフォーカスを当てることができません。これを忘れると、マウスを使えない人にとって「存在しないボタン」になってしまいます。
4. 他のインライン要素での活用例
他にも、インライン要素をより分かりやすくするために `role` を使う場面があります。
- `role=”link”`: `` タグを使いたいけれど、href属性が書けない特殊な事情がある場合。
- `role=”code”`: プログラムのコードであることを強調したい場合（`
`タグが使えないとき）。 - `role="time"`: 日付や時刻であることを明示したい場合。
でも、これらは `` タグや `
---
最後に：完璧を目指さなくて大丈夫
ここまで読んで「うわ、覚えることがたくさんある…」と不安になった方もいるかもしれません。でも、大丈夫ですよ。
最初は 「あ、このタグは本来の用途と違う使い方をしてるな」と気づくだけで100点満点 です。その違和感に気づけるようになったら、`role`属性や `tabindex` を調べて、そっと補強してあげればいいんです。
Web制作は、誰かに届けるための「お手紙」のようなものです。読み手が迷わないように、少しだけ気配りをしてあげる。その「ちょっとした優しさ」が、あなたの書くコードを世界一素敵なものにしていきます。
また次の記事でお会いしましょう！分からないことがあれば、いつでもコメントしてくださいね。
コメント