※この記事をご覧になる場合、できればスタイルシート機能をONにしてご覧下さい。
表示サンプルにスタイルシートを利用していますので。
まずは、下記のリンクサンプルをご覧下さい。
普通のリンクですね。
クリック可能なのは、タイトル部分※だけです。
※（多くのブラウザでは）下線が引かれている部分。
アクセシビリティTIPS【入力フォーム編】
あらゆるウェブサイトに欠かせない入力フォームですが、少しの配慮で格段に使いやすいものになります。今回は、フォーム作成時のポイントと注意事項を説明します。
|
|
▲クリックできるのはタイトル部分だけ
それでは、次のリンクサンプルをご覧下さい。
見た目は上記のサンプルと変わりありませんが、実際にクリック可能な範囲が増えています。
マウスポインタを乗せてみると分かりますが、枠内のどこでもクリックできるようになっています。
違いがお分かりになりましたでしょうか？
前者のサンプルと後者のサンプルとでは、クリックできる面積が格段に異なります。
後者の方が広いので、クリックしやすいですね。
狭い範囲のリンク部分（多くのブラウザでは下線が引かれている部分）にマウスを持っていくことなく、その周辺（文字のない場所でも可）をクリックするだけで移動可能なわけですから。
このクリック範囲を広める方法は、JavaScriptなどのスクリプトは一切使用していません。
HTMLでの記述内容も、従来のリンクとほとんど変わりません。非常に手軽に実現可能です。
もちろん、画像ではありません。
枠外からドラッグすると、ちゃんとテキストが範囲選択できることがお分かり頂けると思いますし、
ブラウザの表示文字サイズを変更すれば、ちゃんとリンク内の文字の大きさも変化します。
勘の良い方々はお気づきだと思いますが、このテクニックはスタイルシートを利用します。
では、スタイルシートを解釈できないブラウザや、スタイルシートをOFFにしている場合はどうでしょうか？
問題はありません。その場合は、余白部分をクリックすることはできなくなりますが、文字の上をクリックすることで通常のリンクとして機能します。
※Netscape Navigator 4.x では、スタイルシートを有効に設定していても、文字のある部分しかクリックできません。（余白部分がクリックできなくなるだけで、通常のリンクとしてちゃんと機能します。）
それでは、実際にこのクリック範囲を広めるリンクの作成方法をご紹介致しましょう。
それでは、次のページへ！→
 メールマガジン発行中 |
毎週1回発行中。
メールマガジン上でしか読めない豆知識なども不定期連載。
ご購読は無料。みなさんのご登録をお待ちいたしております。
登録・バックナンバーの閲覧はこちら
|
|
当ガイドの他の記事・コラムを読んでみる
