メニューおよびサイト内検索をスキップして、本文へジャンプ



ここから本文です。 現在位置表示(パンくずリスト)は、このすぐ上にあります。

パスワードのマスキングを任意で切り替える

先のコラム記事「パスワードは隠すべきか?」で、Jacob Nielsen(ヤコブ・ニールセン)氏の「Alertbox」の記事(パスワードを隠すのをやめよう)を引き合いに出し、現時点での私の意見として「多少の不便はあっても、今の慣例どおりデフォルトではパスワードを非表示にしておいて、ユーザーが任意でパスワードの表示/非表示を選択できる機能を付加するのが良いのではないか」ということを述べました。

このとき具体的なイメージとして頭に浮かんだのが、パソコンの無線LAN設定で、ネットワークキー(セキュリティ保護のためのパスワード)を入力する画面のユーザーインターフェースです(下図を参照)。「入力する文字を非表示にする」にチェックを入れると、パスワードがマスキング(隠される)状態になり、チェックを外すと、パスワードの文字列が隠されずに見えるようになっています。
Windowsの無線LAN設定画面

このような機能をWebページでも実装できないかということで、実験してみました。下記のフォームに、実際に文字列を入力して、「パスワードを隠さず表示」のチェックを入れたり外したりしてみてください。

「A List Apart」というWeb制作者向けの情報サイトがあるのですが、今回はその中の「The Problem with Passwords」という記事を参考にさせていただきました。以下、その概略になります。

  • パスワードをマスキングするかどうかを、JavaScriptを使って制御しています。
  • デフォルト(初期状態)では、パスワードをマスキングする(隠す)ようにしています。ユーザーが任意でチェックを入れることで、マスキングしない設定にすることができます。
  • チェックボックスおよびそのラベル「パスワードを隠さず表示」のコードは、JavaScriptファイルの中に記述されています。JavaScriptが無効な環境の場合、チェックボックスは表示されません。

この実装の優れている点は:

  • 基本は従来の慣習にならってパスワードをマスキング表示することで、一定のセキュリティやユーザーの安心感に配慮している。「パスワードの具体的な文字列を確認したいな」とユーザーが自発的に思ったときに初めて、瞬時に確認できるようになっている。
  • JavaScriptが使えない環境では、マスキング機能が一切見えないので、ユーザーは特に気にすることなく、従来どおりのパスワード入力ができる(パスワード入力欄にパスワードを入れると、マスキング状態でフィードバックが返ってくる)。

...ことだと言えます。後者は、プログレッシブエンハンスメントと呼ばれる手法のひとつで、JavaScriptを使ってより便利なユーザーインターフェース(UI)を提供しつつも、JavaScriptが使えない環境でも一定レベルのアクセシビリティを確保するという考え方に則っています。

いかがでしょうか?パスワードを隠す/隠さないについては、様々な議論がありますが、ひとつの対応策として、参考になればと思います。

コメントを投稿する

(投稿いただいたコメントは、当サイト管理者による承認後、公開させていただきます。なお、コメントの記入は、日本語でお願い致します。)




Twitterでの反応 (TOPSY)

最近のRetweet

人気のページ (はてなブックマーク)