「今、どこにいるの？」を優しく伝える。aria-currentでアクセシビリティの第一歩を踏み出そう
Webサイトを見ているとき、メニューのボタンを見て「あ、今自分はこのページを見ているんだな」と直感的にわかると、なんだかホッとしませんか？
たとえるなら、大きなショッピングモールに行ったときの「フロアガイド」のようなものです。地図の中に「現在地」という赤い矢印があると安心しますよね。あれと同じことを、Webサイトでもやってあげようというのが、今回のテーマです。
HTMLには、「今表示しているのはこのページですよ」とブラウザや読み上げソフトに伝えるための、魔法の属性があるんです。それが `aria-current=”page”` です。
なぜ「見た目」だけじゃダメなの？
「CSSで現在のページのリンク色を変えてるから大丈夫じゃない？」と思った方もいるかもしれません。もちろん、目が見える人にとってはそれで十分です。
でも、世の中には画面を読み上げるツール（スクリーンリーダー）を使ってサイトを見ている方もたくさんいらっしゃいます。そういったツールを使っている方にとって、ただ色が変わっているだけでは、「今どこにいるのか」が伝わりにくいことがあるんです。
そこで登場するのが `aria-current` です。「これは現在のページですよ」という情報を、コンピューターが理解できる言葉で追加してあげることで、誰にとっても優しいサイトに一歩近づくことができます。
実装はとってもシンプル！
書き方はいたって簡単です。現在表示されているページの `` タグに、`aria-current=”page”` を足すだけ。これだけで、ブラウザは「ああ、これが今のページなんだね」と認識してくれます。
サンプルコードを見てみよう
どうでしょう？ たったこれだけの記述ですが、アクセシビリティの世界では大きな意味を持ちます。
CSSと組み合わせて、もっと便利に
せっかく `aria-current` を入れたなら、CSSで「現在地」をデザインするのにも活用しちゃいましょう。`[aria-current=”page”]` というセレクタを使うと、「この属性がついている時だけスタイルを変える」という指示が出せます。
/ aria-current=”page” がついているaタグだけ、文字を太くして下線を引く /
a[aria-current=”page”] {
font-weight: bold;
border-bottom: 2px solid #333;
color: #000;
}
こうしておけば、HTMLを書き換えるだけでデザインも自動的に変わるので、メンテナンスも楽ちんですよ。
つまずきやすいポイント：全部につけちゃダメ？
ここで一つだけ注意点。この属性は、「本当に現在表示しているページ」1つだけに使ってくださいね。
例えば、メニューのすべてのリンクに `aria-current=”page”` をつけてしまうと、読み上げソフトは「全部が現在地？ 結局どこなの？」と混乱してしまいます。お買い物の地図で、赤い矢印がフロアのあちこちに10個もあったら困りますよね。それと同じです。
最後に：小さな優しさが積み重なっていく
Webの世界は、少しの工夫で誰かの「使いやすさ」を大きく広げることができます。「HTMLを書くときは、機械だけでなく『人』にも伝わるように書く」。これこそが、一流のフロントエンドエンジニアへの第一歩です。
まずは自分のサイトのメニューに、そっと `aria-current=”page”` を書き加えてみてください。その小さな一歩が、誰かのWeb体験をちょっとだけ明るくするはずです。
もし実装中に「あれ、これで合ってるかな？」と迷ったら、いつでもまたここに戻ってきてくださいね。応援しています！
コメント