パスワードの入力文字列を任意で表示する | Accessible & Usable
公開日 : 2024年3月23日 カテゴリー : ユーザビリティ / アクセシビリティ フォームのパスワード入力欄 (<input type="password">) は基本的に、入力された文字列がマスキングされ、代わりに文字数の分だけ「黒い点」が提示されるようになっています。他人によるパスワードの盗み見を防ぐためですが、ユーザーは、大半のケースでは背後から覗く人が誰もいない状況でパスワードを入力するでしょうし、入力した文字列が視認できないと正しくタイプできているか不安になったり、タイプミスしたときの修正がしづらい (どの箇所でミスしたか確信が持てず、はじめから入力し直さざるを得なくなる) といった問題もあるでしょう。こうしたことを考慮に入れると、パスワードのマスキングはユーザーの任意で解除できる (入力した文字列を表示させる) ようにしたほうが、ユーザビリティの観点では望ましいと考えるこ
多要素認証におけるワンタイムパスワードの入力欄 | Accessible & Usable
公開日 : 2022年10月17日 カテゴリー : ユーザビリティ / アクセシビリティ 各種サービスへのログイン、インターネットバンキングなどの取引実行前の本人確認、といったシチュエーションで、多要素認証としてワンタイムパスワード (†) の入力が求められることが珍しくなくなってきました。従来の認証方法であるユーザー ID とパスワードの組み合わせに加えて、都度、動的に生成される一定の桁数の数字の並びをユーザーに入力させることで、セキュリティをより強固なものにしています。 † ワンタイムパスコード、確認コード、認証コード、などと呼ばれることもあります。 ところで、このワンタイムパスワードの入力欄の実装には、<input type="password"> が用いられているケースを時折見かけます (個人的な感覚としては、インターネットバンキングでこのような実装が比較的多く見られる印象です)。
一貫性のあるフォーカスインジケーター | Accessible & Usable
公開日 : 2022年2月17日 カテゴリー : アクセシビリティ マウスなどのポインティングデバイスの代わりにキーボードを用いてウェブを利用する人や、ロービジョンのユーザーにとって、ウェブコンテンツ上で (キーボード操作による) フォーカス位置が視覚的に明示されることは、とても重要であり、大きな助けになります。 W3C が勧告している WCAG (Web Content Accessibility Guidelines) には「Focus Visible (フォーカスの可視化)」という達成基準があります (参考 : WCAG 2.1 解説書 達成基準 2.4.7 Focus Visible / 日本語訳)。また、WCAG の次期バージョン (2.2) では「Focus Appearance (フォーカスの外観)」という達成基準が新たに追加される見込みです (参考 : WCAG 2.2 解
ブラウズか検索か | Accessible & Usable
公開日 : 2022年1月18日 カテゴリー : ユーザビリティ / 情報設計 (IA) ウェブサイトにおける情報探索の方法には、大きく分けて、ブラウズと検索があります。ブラウズとは、用意されたナビゲーションを辿ってゆくことで目的の情報に到達するもの、検索とは、ユーザーが自由にクエリ (キーワードやその組み合わせなど) を入力することで目的の情報を探し出すものです。それぞれ、以下の利点があります。 ブラウズの利点 ユーザーは、目的の情報を何と表現するかを記憶していなくても、情報探索ができる。情報の匂い (information scent) が適度にあるメニューを、順次辿ればよい。 クエリを入力するよりも、ナビゲーションをクリックやタップで進むほうが楽である (特にスマートフォンにおいて、小さなオンスクリーンのキーパッドでタイプ入力するのは面倒)。 検索の利点 ナビゲーションのステップを順
YouTube における「低く評価 (dislike)」ボタンのカウント数の非表示 | Accessible & Usable
公開日 : 2021年12月29日 カテゴリー : 情報設計 (IA) YouTube の各動画には、サムズアップ (親指を立てて肯定の意味を示す) アイコンによる「高く評価 (like)」ボタンと、サムズダウン (立てた親指を下に向けて否定の意味を示す) アイコンによる「低く評価 (dislike)」ボタンが備えられています。以前は、両方のボタンに対して、それぞれが押されたカウント数が明示されていましたが、今年11月以降、片方の「低く評価 (dislike)」ボタンにおいて、カウント数が非表示になりました。 YouTube の動画表示。「高く評価 (like)」ボタンには押されたカウント数が明示されているが、「低く評価 (dislike)」ボタンには表示されていない。 YouTube 公式ブログに、この UI 変更に関する公式説明が載っています (参考 : An update to di
サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable
公開日 : 2021年10月14日 (2023年10月11日 更新) カテゴリー : ユーザビリティ / アクセシビリティ ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化する UI があります。たとえば、利用規約などの文書を読んで同意する旨のチェックを入れないと、あるいは、入力必須フィールドにすべて正しく情報を入れないと、ボタンがアクティブにならない、というものです。 サブミットボタンがデフォルトで無効化されているフォームの例。 このような UI は、アクセシビリティやユーザビリティの観点で、以下の問題があります。 そこに存在しているはずのサブミットボタンが使用できないことに対して、その理由をユーザーが理解できずに、混乱してしまう恐れがある。(ユーザーの側に誤っているという自覚がなくても、ちょっとした見落としや入
アクセシビリティオーバーレイ (accessibility overlay) | Accessible & Usable
公開日 : 2021年8月12日 カテゴリー : アクセシビリティ ここ最近、米国を中心とする海外のウェブアクセシビリティ関連サイトで、アクセシビリティオーバーレイ (accessibility overlay) がホットな話題になっています。アクセシビリティオーバーレイとは、サードパーティ製のプログラム (基本的には JavaScript) で、ウェブサイトに適用することによってアクセシビリティを即座に高めることができるという (まるで魔法のような) 触れ込みのソリューションです。 アクセシビリティオーバーレイが適用されたウェブサイトにはウィジェットが追加され、そこに用意された機能を選んで実行することで、あたかもアクセシビリティが改善されたかのように、ウェブページの表示を変更することができます。 アクセシビリティオーバーレイの例 アクセシビリティオーバーレイを提供するサービスはいくつかあ
Instagram の代替テキストの継承 | Accessible & Usable
公開日 : 2021年6月22日 カテゴリー : アクセシビリティ / 情報設計 (IA) SNS (ソーシャルネットワーキングサービス) では写真投稿が盛んですが、昨今では、視覚障害を持ったユーザー向けの情報保障として、メジャーな SNS のほとんどが、写真投稿に対する代替テキストの入力手段も併せて提供しています。以下、各サービスの公式ヘルプです。 Twitter : 画像のアクセシビリティを向上させる方法 Facebook : Facebook上の写真の代替テキストを編集するにはどうすればよいですか。 Instagram : Instagramの写真の代替テキストを編集するには、どうすればよいですか。 Facebook および Instagram では、AI によって代替テキストが自動生成され (実際には、自動生成がなされなかったり、自動生成されても精度が低かったり...といまひとつな
折り畳まれたナビゲーションメニューの展開 (オーバーレイではなくインレイで) | Accessible & Usable
公開日 : 2021年4月17日 (2021年6月6日 更新) カテゴリー : ユーザビリティ / アクセシビリティ ナビゲーションメニューがデフォルトでは折り畳まれていて、いわゆる「ハンバーガーアイコン」を押すとメニューを展開表示するインタラクションを備えたウェブサイトを、昨今よく目にします。もともとはスマートフォンのように画面の大きさが限られたデバイス向けの UI でしたが、多くのウェブユーザーにとって馴染みのある UI になってきたからでしょうか、PC 向けのウェブサイトにおいても、採用される例が増えてきたように思います。そしてこれらは、ほとんどがオーバーレイ (overlay : ページの上に重ねる形での情報提示) でメニューを展開表示する仕様になっています。 オーバーレイでのメニュー展開 オーバーレイの問題 オーバーレイでメニューを展開するインタラクションは、一見、問題なさそうに
ページ内アンカーへのキーボード操作でのアクセシビリティ (ブラウザ側の機能改善) | Accessible & Usable
公開日 : 2020年12月7日 (2021年1月10日 更新) カテゴリー : アクセシビリティ この記事は、Web アクセシビリティ Advent Calendar 2020 の7日目の記事です。 リンク (ハイパーリンク) はウェブをウェブたらしめる、根幹的な機能です。一般的にリンクは、今いるページとは別のページに遷移するものですが、ページ内の特定のセクション (ページ内アンカー) に遷移するリンクもあります。たとえば、ページの冒頭に目次を設けておき、目次の項目のいずれかをクリックまたはタップすると、該当するセクションにジャンプできる、という具合です。 今から5年ほど前になりますが、「ページ内アンカーについて考える」という記事を書き、このページ内アンカーにまつわるユーザビリティの問題について考察したことがあるのですが、その際、キーボード操作でのアクセシビリティ (フォーカス制御) の
「情報」と「情報でないもの」 | Accessible & Usable
公開日 : 2020年10月11日 カテゴリー : 情報設計 (IA) ユーザーはウェブサイトやアプリケーションの利用時、そこにある情報を通じて、自らの目的 (課題を解決したり、楽しんだり、など) を達成することができます。その意味で、情報を、見つけやすく、理解しやすくする設計技術である情報アーキテクチャ (Information Architecture : IA) は、ウェブデザインの要であると言えるでしょう。 ところで、この IA によってユーザーにもたらされる「情報」とは、何でしょうか？「情報」と「情報でないもの」があるとして、その違いは何なのでしょうか？ 「情報」を意味する英語の「information」という語は「in + form」の名詞形で、「(人の頭の) 中に形づくられるもの」というニュアンスが含まれています (参考 : inform | Online Etymology
オートコンプリートのアクセシビリティを考える | Accessible & Usable
公開日 : 2020年8月30日 (2020年9月6日 更新) カテゴリー : ユーザビリティ / アクセシビリティ フォームのテキスト入力を補完するインタラクションとして、「オートコンプリート」があります。テキストボックスに文字をタイプし始めると、それに呼応して、タイプされた文字列と部分一致する入力値候補が一覧として提示され、ユーザーはその中から入力値を選択できるという、コンボボックス型のインターフェースです。ミスタイプ (TYPO) の軽減、情報のファインダビリティの向上、といった効果が期待できます。 オートコンプリートのコンボボックス ちょっと文字入力するとすぐに入力値候補のオプションが出てきて、あとはマウスでクリックする (または指でタップする) だけで入力ができてしまうのがオートコンプリートの特長です。とても便利で有用なだけに、この UI を採用する際には、より多様なユーザーが利
ほんとに使える「ユーザビリティ」 | Accessible & Usable
公開日 : 2018年12月14日 (2021年2月3日 更新) カテゴリー : ユーザビリティ 「ほんとに使える「ユーザビリティ」 — より良いデザインへのシンプルなアプローチ」 を読みました。(2013年発行の書籍なので、遅まきながら、ではありますが...) 主にウェブ (サイトやアプリケーション) のユーザビリティに焦点を当てた入門書、と言えそうですが、ケーススタディとして引き合いに出される例にはリアルワールドのプロダクトやサービスも多く挙げられていて、より広い視点でユーザビリティを捉え直すことができる良書だと思います。語り口も軽妙 (ときに皮肉交じり) で、また、誌面の中には (ユーザビリティ問題の実例を示すための) カラー写真も豊富に使われているので、面白く読み進めることができます。 この記事では、本書を読んで得た学びや感じたことを 、メモとして (引用というよりは私自身の解釈が
理解の秘密 (Instruction Anxiety) | Accessible & Usable
公開日 : 2018年11月10日 (2021年2月3日 更新) カテゴリー : 情報設計 (IA) 「理解の秘密 — マジカル・インストラクション」を読みました。情報アーキテクチャ (Information Architecture : IA) の先駆者であるリチャード・ソウル・ワーマン (Richard Saul Wurman) 氏による著作で、松岡正剛氏が監訳しています。 原題の「Instruction Anxiety」が示すように、本書は「インストラクション」に焦点を当てた本です。インストラクションとは、人と人とのコミュニケーションにおける重要な要素で、人に何かを期待する際に (あることをしてもらったり、あることを考えたり感じたりしてもらう、など)、それを円滑に具現化するための情報伝達、を意味します。(本書内には、インストラクションの端的な定義文は明記されていないのですが、本書全体
英語圏のウェブアクセシビリティ コミュニティで語られる「インクルーシブデザイン (inclusive design)」について | Accessible & Usable
英語圏のウェブアクセシビリティ コミュニティで語られる「インクルーシブデザイン (inclusive design)」について 公開日 : 2017年7月20日 (2021年2月3日 更新) カテゴリー : ユーザビリティ / アクセシビリティ 最近、英語圏のウェブアクセシビリティ コミュニティで「インクルーシブデザイン (inclusive design)」という言葉がよく使われているように思います。「インクルーシブデザイン」自体は新しい概念ではなく、特別なコンテキストを抱えた人々 (障害者や高齢者など) をユーザー中心設計 (UCD) の上流工程から巻き込んで「ユニバーサルな」プロダクトやサービスを作り上げてゆくというデザイン手法です。ウェブサイトの設計/開発で言うと2014年に出版された「A Web for Everyone: Designing Accessible User Ex
キーボード操作によるインタラクションをチェックする | Accessible & Usable
公開日 : 2017年8月2日 カテゴリー : アクセシビリティ ウェブコンテンツは、障害などの事情で精緻なマウス操作ができない人 (キーボード操作に依存せざるを得ないユーザー) でも利用可能でなければなりません。たとえば、[Tab] キーでフォーカスを移動し [Enter] キーで実行する、上下矢印キーでページをスクロールしたりセレクトメニューを選択する、といった具合です。 このキーボード操作によるインタラクションは、画面を目にしたユーザーの期待 (予測) と合致している必要があります。システムの UI が、ユーザーにとって想定外なフィードバックを返してしまうと (あるいは十分なフィードバックをユーザーに返さないと)、ユーザーはコントロールを失ったような感覚になり、安心してウェブコンテンツを利用することができなくなります。 昨今は、リッチな (動きの演出の凝った) ウェブページが増えてき
グローバルナビゲーションはプライマリー表示であるべきか？ | Accessible & Usable
公開日 : 2017年7月12日 カテゴリー : ユーザビリティ / 情報設計 (IA) グローバルナビゲーションは、ウェブサイト全体を網羅するナビゲーション機能として、重要な意味を持ちます。多くのサイトでは、サイト共通ヘッダーに表示され、サイト内のどのページにいても容易にアクセスできるようになっています。 しかし大規模なサイト (来訪するユーザーのゴールが多種多様で、その利用文脈の中でサイト内の別カテゴリーのコンテンツに遷移するというシナリオがあまり考えられないサイト) では、グローバルナビゲーションが必要とされるシーンというのは、そう多くないかもしれません。以下、いくつか例を挙げてみます。 コーポレートサイトで、たとえば IR 情報を見ている個人投資家にとっては、その文脈で新卒採用情報を見ることは稀。 eコマースサイトで、あるカテゴリーの商品 (たとえば書籍) を探している人にとっては
その確認画面、必要ですか？ | Accessible & Usable
公開日 : 2016年10月10日 カテゴリー : ユーザビリティ 問い合わせや資料請求などのフォームで、入力後に送信ボタンを押すと、送信前の確認画面が出てくるものがあります。 確認画面を見て、特に誤入力がなければ、もう一度送信ボタンを押して、そこで初めて送信が完了します。確認画面を見て、もし誤入力があれば、再度入力画面に戻ってから修正します。 このようなインタラクションは、2つの点で「まどろっこしい」と言えるでしょう。 入力してから送信される間に、1ステップ (余計な) 手続きが挟まれる。 確認画面で要修正箇所を見つけても、その場で修正ができない。 上記のうち、特にふたつ目はやっかいな問題です。ユーザーは確認画面で見つけた要修正個所 (と修正が必要な理由) を、実際に入力画面に戻って修正するまで、記憶しておかなければならないからです。 確認画面で修正できるようにすればよいのでは？と思われ
「障害者差別解消法」施行 | Accessible & Usable
公開日 : 2016年4月1日 (2023年7月19日 更新) カテゴリー : アクセシビリティ 国連の「障害者の権利に関する条約 (Convention on the Rights of Persons with Disabilities)」の批准に伴う国内法制度の整備の一環として、2016年4月1日より、「障害を理由とする差別の解消の推進に関する法律」(いわゆる「障害者差別解消法」) が施行されます。 法律全文、基本方針、その他関連資料については、内閣府ウェブサイトの「障害を理由とする差別の解消の推進」ページから参照することができます。 この法律は、行政機関のみならず、民間の事業者も対象となります (障害者差別を防ぐための「合理的配慮」が求められます)。また、合理的配慮の基礎のひとつとして「情報アクセシビリティ」が明記されており、このサイトのテーマのひとつであるウェブアクセシビリティも
ページ内アンカーについて考える — Website Usability Info
公開日 : 2015年12月1日 (2020年12月7日 更新) カテゴリー : アクセシビリティ / ユーザビリティ リンク (ハイパーリンク) はウェブをウェブたらしめる、根幹的な機能です。一般的にリンクは、今いるページとは別のページに遷移するものですが、ページ内の特定のセクション (ページ内アンカー) に遷移するリンクもあります。たとえば、ページの冒頭に目次を設けておき、目次の項目のいずれかをクリックまたはタップすると、該当するセクションにジャンプできる、という具合です。 ページ内アンカーへのリンク (<a> 要素の href 属性で、リンク先としてページ内の特定のセクションの ID 名を指定すること) は、HTML の実装としては正しく、機能としても便利です。ただし、ユーザビリティの観点から考えると、以下のような問題をはらむことがあり、その導入にあたっては、慎重に検討、判断したいと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
