「ただの飾り」に意味を宿す。インライン要素とARIAロールで、Webに「優しさ」を実装しよう
こんにちは！フロントエンドの世界へようこそ。
HTMLを書き始めると、`` や `` といったインライン要素にたくさん出会いますよね。「とりあえず文字を囲んで色を変えようかな」「リンクだから `` にしとこう」なんて、軽い気持ちで使っている方も多いはず。
でも、実はその「ちょっとした選択」が、目に見えないところでWebの使い心地を大きく左右しているんです。今日は、「スクリーンリーダーを使っている人にも、あなたのWebサイトの意図が正しく伝わるようにする」という、ちょっと素敵で大切な技術のお話をしますね。
—
「タグ」は、Webの世界の「看板」です
想像してみてください。あなたは今、大きなショッピングモールに来ています。
目の前に「カフェ」と書かれた看板があれば、あなたは「あ、そこはコーヒーが飲める場所だな」と直感的に分かりますよね。でも、もしその看板が真っ白で何も書いていなかったら？ お店の中に入ってみるまで、そこが何屋なのか分かりません。
HTMLもこれと同じなんです。
- `` は「ここはクリックできるよ！」という看板。
- `` は「ここ、特に大事だよ！」という強調の看板。
でも、私たちがよく使う `` は、いわば「中身が何でもいい無地の箱」。これを使いすぎると、スクリーンリーダー（視覚障がいのある方が使う、画面の内容を読み上げるツール）は、「ここは一体何なんだろう？」と迷子になってしまうんです。
—
「困ったときの魔法」ARIAロールを使ってみよう
「でも、デザインのために `` を使いたいときだってあるよ！」という声が聞こえてきそうですね。大丈夫、そんなときに役立つのが ARIAロール（Accessible Rich Internet Applications Role） という魔法の言葉です。
これは、「見た目は `` だけど、役割としては『ボタン』として振る舞ってね！」と、ブラウザや支援ツールに伝えるための「名札」のようなものです。
実践：ただのボタンを、本物のボタンにする
例えば、JavaScriptでクリックイベントを仕込んだ `` があったとします。でも、そのままではスクリーンリーダーは「ただの文字」としか認識しません。
ポイントは3つだけ！
1. `role=”button”`：これが「ボタンですよ」という名札です。
2. `tabindex=”0″`：これを書くと、キーボードの「Tabキー」でこの要素に移動できるようになります。
3. `onkeydown`：マウスを使わない人のために、キーボードの「Enterキー」でも動くように準備してあげましょう。
これだけで、一気にアクセシビリティが向上します。「ちょっと面倒だな」と思うかもしれませんが、これこそがプロの細やかな気配りなんです。
—
``タグや``タグの「素直な気持ち」を大切に
逆に、無理にARIAロールを使う必要がない場面もあります。HTMLには、最初から優秀な「役割」が備わっているからです。
- `` タグ：すでに「リンクですよ」という強烈なアイデンティティを持っています。あえて `role=”link”` を書く必要はありません。
- `` や ``：これらは「強調」という役割を既に持っています。ただ太字にしたいだけならCSSを使い、本当に大事な場所ならこれらのタグを使いましょう。
「HTMLのタグが持つ本来の役割を尊重する」こと。これが、実はアクセシビリティへの一番の近道なんです。
—
最後に：小さな積み重ねが、誰かの「使いやすい」になる
「アクセシビリティって難しそう…」と身構える必要はありません。
最初は「このボタン、キーボードでも押せるかな？」とか、「この文字の装飾は、正しいタグを使っているかな？」と、ほんの少しだけ立ち止まって考えてみる。その小さな気遣いが、いつか誰かにとっての「使いやすいWebサイト」というプレゼントになります。
まずは今日、あなたが書いたコードの `` に、「これはどんな役割をしているかな？」と語りかけてみてください。きっと、もっと素敵なコードが書けるようになるはずですよ。
それでは、また次回の記事でお会いしましょう！コーディングを楽しんでくださいね！
コメント