こんにちは！Web制作の世界へようこそ。HTMLを書き始めたばかりの頃って、`
今日は、そんな皆さんが必ず一度は迷う「インライン要素にARIAロールを付与する」という少し専門的なテーマを、身近な例え話で紐解いていこうと思います。難しいことは一つもないので、肩の力を抜いてお付き合いくださいね。
—
HTMLは「Webサイトの住所録」のようなもの
まず、HTMLのタグには「意味」があることを思い出してみましょう。
例えば、``タグは「ここをクリックすると別の場所に飛びますよ」という案内板、``タグは「ここは特に大事ですよ」というマーカーペンです。
ところが、デザインの都合で「どうしてもボタンのような見た目にしたいけれど、``や`
悪い例：中身が空っぽの「ボタン」
例えば、こんなコードを見かけたことはありませんか？
見た目はボタンでも、パソコンの読み上げソフト（スクリーンリーダー）から見ると、これはただの「文字」です。目が見えない方にとっては、どこがクリックできる場所なのか全く分かりませんよね。これでは、お店に入ったのに「出口」がどこか分からないのと同じくらい不親切です。
—
魔法の呪文「role=”button”」を唱えてみよう
ここで登場するのが`role`属性です。「君は見た目は``だけど、役割としては`button`なんだよ！」とHTMLに教えてあげるわけです。
ここで大切なポイントが2つあります。
1. `role=”button”`: 「私はボタンとして振る舞います」という宣言です。
2. `tabindex=”0″`: これが一番重要！これがないと、キーボードの「Tabキー」でボタンを選択できません。マウスが使えない人にとって、Tabキーは命綱のようなものです。
「role」を使う際の注意点：まずは「正しいタグ」を探そう
ここで、ベテランエンジニアからのアドバイスを一つ。
「role属性で補う前に、その目的を果たす正しいタグはないか？」をまずは探してみてください。
- ページ移動なら ``
- フォームの送信やアクションなら `
- 大事な強調なら ``
これらが一番、ブラウザにとっても、それを使うユーザーにとっても「一番分かりやすい」からです。`role`はあくまで、どうしても他のタグが使えない時の「最後の切り札」だと思っておいてくださいね。
—
現場でよく使う「お役立ちパターン」
最後に、よくあるケースをいくつか紹介します。これを知っておくだけで、あなたのマークアップの質がグッと上がりますよ！
1. タブメニューを作るとき
複数のコンテンツを切り替えるタブは、`role=”tab”`を使います。
- ニュース
- ブログ
2. 時刻を正しく伝えるとき
``で囲った時刻も、`
—
まとめ：HTMLは「誰かのための優しさ」
インライン要素に`role`を付与するというのは、一見するとテクニックのように見えます。でも、本質は「あらゆる人がWebサイトを快適に使えるようにするための、作り手の優しさ」なんです。
- まずは`
- どうしても使うなら、`role`で役割を教える。
- キーボード操作も忘れない（`tabindex`を忘れずに！）。
最初から完璧にできなくても大丈夫です。まずは「この要素は何のためにあるんだろう？」と一瞬だけ考えてみる。その小さな積み重ねが、いつか世界中の誰かを助ける素晴らしいサイトを作る第一歩になります。
またいつでも、迷ったときはここへ戻ってきてくださいね。応援しています！
コメント