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

このページは、「パスワードのマスキングを任意で切り替える — Website Usability Info」用に制作したデモです。

下記の組み合わせで、スクリーンリーダー利用の検証もしています。

例1は Android TalkBack (Chrome および Firefox) ではうまく読み上げられず、例2は Android TalkBack + Firefox でうまく読みあげられませんでした。

特に画面幅が小さいモバイル機器の場合、パスワード入力欄の中にトグルボタンを入れてしまうと、その分、入力内容自体の表示領域が圧迫されてしまう問題もありますし、例3のようなチェックボックスを採用するのが、無難かと考えます。

例1 : トグルボタン (アイコン) でパスワードの表示/非表示を切り替える

例2 : トグルボタン (テキスト) でパスワードの表示/非表示を切り替える

例3 : チェックボックスでパスワードの表示/非表示を切り替える

このデモについて

このページのデモは、「cloudfour/hideShowPassword · GitHub」をベースにしています。元ソースの著作権は Cloud Four に帰属し、MIT ライセンスに基づいて流用しています。


Copyright © Cloud Four
Released under the MIT license
http://opensource.org/licenses/mit-license.php


なお、このページのデモにおいては、元ソースに対して以下の改変を加えています。