こんにちは！Web制作の世界へようこそ。
HTMLを学び始めると、誰もが最初に通るのが「リンク（``タグ）」ですよね。「ここをクリックするとページが変わるんだ！」という魔法のような体験は、いつだってワクワクするものです。
でも、ちょっと待ってください。実はWebサイトには、マウスを使わずにキーボードの「Tab（タブ）キー」だけで操作している人がたくさんいることを知っていますか？
今回は、そんな「キーボード操作」の世界をちょっぴり覗いて、誰にとっても使いやすい優しいWebサイトを作るための「フォーカス」のお話をしましょう。大丈夫、少しずつ紐解けば決して難しくありませんよ！
—
なぜ「キーボード操作」が大切なの？
マウスやトラックパッドを使わずに、Tabキーをポンポンと押してリンクを渡り歩くユーザーさんがいます。例えば、手や指の動きが不自由な方、あるいは熟練のエンジニアの方などがそうですね。
そんな時、「今、自分はどのリンクの上にいるのか？」が分からないと、お買い物をしている最中に「あれ、今どこを選んでるんだっけ？」と迷子になってしまうようなものです。
そこで重要になるのが「フォーカス」と「視覚的なフィードバック」です。
—
順番をコントロールする魔法の杖「tabindex」
普通、Webサイトのリンクは「HTMLに書かれた順番」通りにTabキーで移動します。でも、たまに「どうしてもこのボタンを最初に選んでほしい！」という特別な事情がある時、活躍するのが `tabindex` 属性です。
一番最初に選ばれるリンク
二番目に選ばれるリンク
三番目に選ばれるリンク
ただ、ここで一つだけコツがあります。`tabindex`に大きな数字を入れすぎると、ページ全体の移動順序がめちゃくちゃになってしまい、逆に使いにくくなることも。「基本はHTMLの順番通り」が一番の正解！と覚えておいてくださいね。
—
「選んでますよ！」を伝える `:focus-visible`
さて、ここからが今日の本題です。キーボードでリンクに移動した時、枠線が出てくるのを見たことはありませんか？ あれは「今ここにいますよ！」というブラウザからの合図です。
でも、デザインにこだわりたい時、「この青い枠線、ちょっとダサいから消しちゃおう！」と `outline: none;` をしたくなる気持ち、すごく分かります。…でも、それだけはNGなんです！ 枠線を消すと、キーボードユーザーさんは完全に迷子になってしまいます。
そこで登場するのが、CSSの `:focus-visible` という頼もしい味方です。
/ リンクの基本スタイル /
a {
text-decoration: none;
color: #333;
}
/
キーボードで選ばれた時だけ枠線を出す！
マウスでクリックした時は枠線が出ないので、デザインを崩しません。
/
a:focus-visible {
outline: 3px solid #ff7f50; / 目立つオレンジ色の枠線 /
outline-offset: 4px; / 枠線と文字の間に少し隙間を空けるとオシャレ /
border-radius: 4px; / 角を丸くすると優しげな印象に /
}
なぜこれが素晴らしいのか？
マウスでクリックするユーザーさんは「今どこを押したか」を視覚的に分かっているので、枠線は不要ですよね。でも、キーボードユーザーさんは枠線がないと操作できません。
`:focus-visible` を使うと、「必要な人にだけ必要なガイドを出す」という、まさにWebアクセシビリティの理想形が実現できるんです。
—
今日からできる「優しいWeb制作」の第一歩
最後に、みなさんに一つだけ約束してほしいことがあります。
Webサイトは、自分一人で見るものではありません。どんなデバイスを使っていても、どんな身体の状態でも、同じように情報を届けられること。それが「Web制作のプロフェッショナル」としての矜持です。
まずは、自分の作ったサイトを一度マウスから手を離して、Tabキーだけで操作してみてください。「あ、ここ分かりにくいな」という気づきこそが、あなたのサイトをより優しく、より使いやすく進化させる最高のヒントになります。
迷った時はいつでもここに戻ってきてくださいね。一緒に、誰にとっても心地よいWebの世界を作っていきましょう！
コメント