Webサイトのユーザビリティ

指定日・指定時刻になったときに、自動でウェブページの内容を更新する方法を解説。(1)ウェブサーバのcron機能を使って、指定日時に「既存ページ」のHTMLファイルを「更新ページ」のHTMLファイルで上書きする方法と、(2)CGIを使って、現在日時に応じて新旧どちらかのページデータを返すよう切り替える方法などをご紹介。

ページの端にあるナビゲーションメニューは、閲覧者がスクロールすると上方に消えてしまいます。それを防ぐため、スクロールの途中でメニューだけを固定させてみましょう。「メニューを作るボックスの表示位置」と「ユーザのスクロール量」とを比較して、メニューの固定・非固定を切り替えるスクリプトを作ります。jQueryを使えば簡単です。

ページやボックスの背景に画像を使う際は、あることに気をつけないと、文字がまったく読めなかったり、ひどく読みにくくなってしまい、閲覧者をイライラさせてしまいます。あなたのページでは大丈夫ですか？

メッセージ送信フォームなどのように、アクセス者に何らかの文字を入力してもらうページでは、先頭の入力欄に最初からカーソルが入っていると便利です。指定の入力欄に自動的にカーソルを入れる方法をご紹介。

HTMLのinput要素で作る「チェックボックス」や「ラジオボタン」は、標準ではクリック可能な範囲が狭くて使いやすくはありません。label要素を使ってラベル文字部分もクリック可能にしたり、fieldset要素を使ってグループ単位で囲んだりすることで、PC環境でもモバイル環境でも分かりやすく・使いやすく表示する方法をご紹介。

閲覧者に何らかの長い文字列をコピーさせたい場合、文字列をそのまま掲載するよりも、もっとコピーしやすい形で掲載してみましょう。閲覧者に操作させずに自動で範囲選択させれば、過不足無くコピーさせられます。

入力フォームには、送信ボタンのほかにリセットボタンを配置することができます。しかし、このリセットボタンは、配置しない方が望ましい『デメリットの大きな』機能です。その理由とリセット機能の対策を解説。

背景画像の上に文字を表示させている場合、背景色も同時に指定していますか？ 背景画像を使うなら背景色も忘れずに指定しましょう。そうしないと、文字が読めなかったり読めるまでに時間がかかる場合があります。

スタイルシートでのデザインとHTMLでのデザインを混ぜて使っていると、気づかないところで「隠し文字」を作ってしまっている可能性があります。普段、背景色と文字色の指定はどうしていますか？確認してみましょう。

画像を表示させる場合には、表示されなかった場合のために「代替文字」を指定しておく必要があります。しかし、配色によっては、指定した代替文字が読めない場合もあります。代替文字にも文字色を指定しましょう。