Mac Safari 独自のアクセシビリティに優れたインタラクション | Accessible & Usable
公開日 : 2018年8月20日 カテゴリー : アクセシビリティ / ユーザビリティ Mac (macOS) の標準ブラウザ「Safari」(筆者の手元の環境では、macOS High Sierra 上の Safari バージョン 11.1.2 です) には、独自のアクセシビリティに優れたインタラクションが備わっています。機能としてはさりげないですが、ユーザーの心地よいブラウジング体験を堅実にサポートするものと言えます。他のブラウザでも採用されれば面白いかも...と思い、以下ご紹介します。 target="_blank" リンクで開いたページからの「戻る」操作 <a> 要素に target="_blank" 属性が指定されているリンクをクリックすると、新しく別タブが開いてリンク先のページに遷移しますが、この状態で Safari の「戻る」ボタンを押す (またはショートカットキーで、[co
モーダルウィンドウを考える | Accessible & Usable
公開日 : 2015年7月6日 (2024年2月12日 更新) カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) に、「モーダルウィンドウ」と呼ばれるものがあります。ページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させるもので、このウィンドウが前面で開いている間は背景側にある元ページが操作対象外になることから「モーダル」という名称が付いています。実装例としては、フォーム、アラート、画像の拡大表示 (いわゆる Lightbox 系と呼ばれるもの) などが挙げられます。 モーダルウィンドウは、あるページを開いているというコンテキストを維持しつつ付加的にコンテンツの提示ができる利点がある反面、基本的なユーザビリティやアクセシビリティが欠落しているケースが多く見受けられます。以下の観点を意識しながらデザインや実装をすることで、基本的なユーザビリティやア
ウェブページに文字拡大機能を置くのは「時代遅れ」 | Accessible & Usable
公開日 : 2015年2月17日 (2019年11月9日 更新) カテゴリー : アクセシビリティ / ユーザビリティ ウェブページの上部 (サイト共通ヘッダーなど) に、文字拡大機能が設置されているサイトを見かけることがあります。 文字拡大機能のイメージ。[大][中][小] ボタンが並んでいたり、[標準][拡大] ボタンが並んでいたりする。 ブラウザの標準機能として文字の拡大が可能であることを知らないユーザーが多い (ユーザーの大半はプリファレンスを変更しようという考えに及ばない) ことから、文字拡大機能を見える形でページ上に設置したほうが親切、というウェブユーザビリティ専門家が (かつては) 多かったように思います。 私自身、長い間ウェブユーザビリティに関わってきた中で、当座の利便性を優先してサイト側に文字拡大機能を実装する判断をしたり (そしてやっぱり止めたり) ... と紆余曲折な
カルーセル | Accessible & Usable
公開日 : 2014年3月16日 カテゴリー : アクセシビリティ / ユーザビリティ Web サイトのユーザーインターフェース (UI) に「カルーセル (carousel)」と呼ばれるものがあります。文字通り訳すと「回転木馬」という意味ですが、情報 (画像だったり、画像＋テキストだったり) をパネル状に横に並べて、Web ページの幅を超えて隠れている情報も「くるくる」と手繰り寄せて表示できる、という UI です。 Amazon の「この商品を買った人はこんな商品も買っています」が有名な例です。 Amazon (amazon.co.jp) における「この商品を買った人はこんな商品も買っています」のカルーセル また最近では、Web ページのメインビジュアルにカルーセルを採用している例もよく見られます。タッチジェスチャとの親和性が高い (左右方向へのフリックやスワイプで容易にパネルを切り替え
フォームの入力必須項目のマークアップ | Accessible & Usable
公開日 : 2013年4月12日 (2020年8月30日 更新) カテゴリー : ユーザビリティ / アクセシビリティ Web サイトのフォームの中には、入力必須の項目があります。大抵の場合、その項目が必須である旨を、ラベル (<label> 要素の中) に盛り込むことが多いでしょう。 <label for="name">お名前 (必須)</label> <input type="text" id="name" name="name" /> 上記のように、<label> 要素の中に「必須」と書かれていれば、たとえばスクリーンリーダーを使いながら [Tab] キ―でフォーカス位置を移動させている場合、フォーム入力要素 (<input> 要素、<textarea> 要素、<select> 要素) にフォーカスが当たるとその入力要素に紐づいたラベルが音声で読み上げられ、ラベルに包含された「必須」
<input> 要素の type 属性を使ったフォーム入力支援 | Accessible & Usable
公開日 : 2013年4月21日 (2020年8月30日 更新) カテゴリー : ユーザビリティ Web サイトのフォームの入力要素のうち、<input> 要素は、type 属性の記述によって、テキストボックス (type="text")、パスワード入力欄 (type="password")、チェックボックス (type="checkbox")、ラジオボタン (type="radio")、といった種類を指定することができます。 そして HTML5 では、<input> 要素で使用可能な type 属性値が新たに追加されています。ユーザーが使用するデバイスによっては、この type 属性値に応じた入力しやすいユーザーインターフェース (UI) が提供されるので、「気の利いた入力支援」が可能になります。 たとえばスマートフォンやタブレットのように、入力要素にフォーカスが当たるとタッチスクリーン
「テキストのサイズ変更」の達成基準について考える | Accessible & Usable
公開日 : 2013年12月12日 (2014年12月7日 更新) カテゴリー : アクセシビリティ この記事は、「Web Accessibility Advent Calendar 2013」の12日目のエントリーです。Web アクセシビリティのトピックとしては些細な話かもしれませんが、「神は細部に宿る」という言葉もあることですし、アクセシビリティという大きなテーマを考えるひとつの要素として、触れたいと思います。 さて、JIS X8341-3:2010 には、下記の規定があります。 コンテンツ又は機能を損なうことなく、テキストを支援技術なしで200％までサイズ変更できなければならない。ただし、キャプション及び画像化された文字は除く。 注記1 サイズ変更は、ユーザーエージェントの初期設定を基準とする。200％は、幅及び高さを2倍にすることである。 出典 : JIS-X8341-3:2010
アプリ内ブラウザの「戻る」機能 | Accessible & Usable
公開日 : 2013年7月18日 (2013年7月19日 更新) カテゴリー : ユーザビリティ スマートフォンのネイティブアプリケーション (いわゆる「アプリ」) の中には、ブラウザ機能が備わっているものがあります。たとえば Twitter アプリ、Facebook アプリ、RSS リーダーのアプリ、メールクライアントのアプリ、などでは、コンテンツに Web ページへのリンクが表示されていると、それをタップすることで、アプリ内で Web ページを表示することができます。 アプリ内のブラウザ機能でいくつかの Web ページを遷移しているとき、画面左上にあるアイコン (「戻る」ボタンっぽいもの) をタップしたら、直前に見ていた Web ページではなく、Web ページを開く前のコンテンツに一気に引き戻された...という経験は、ありませんか？ よくよく見たら、ブラウザの「戻る」ボタン (直前に見
フォーム入力要素のラベル配置 | Accessible & Usable
公開日 : 2013年5月5日 (2020年8月30日 更新) カテゴリー : アクセシビリティ / ユーザビリティ 先の記事「フォームの入力要素には <label> 要素でラベルを付ける」で、Web サイトのフォーム入力要素 (<input> 要素、<textarea> 要素、<select> 要素) に対しては、ラベルをセマンティックにマークアップしましょう、というお話をしました。今回は、ラベルの配置 (レイアウト) について、考えてみたいと思います。 チェックボックス/ラジオボタンの場合 :「ラベルは右」を基本とする チェックボックスやラジオボタンの場合、そのラベルは、各々のチェックボックス/ラジオボタンの後ろ (右) に配置するケースが多く、実質的に「慣例」になっていると思います。 この記事を書くにあたって、「ラベルをチェックボックス/ラジオボタンの手前 (左) に配置したらどうな
フレーム使用の是非について | Accessible & Usable
公開日 : 2006年7月2日 (2011年1月11日 更新) カテゴリー : ユーザビリティ, アクセシビリティ, ユーザーインターフェース (UI) 一部のWebサイト（ページ）では、「フレーム」と呼ばれる手法が使われています。フレームとは、図に示すように、ひとつのページを（多くの場合、2つから3つに）分割して、たとえば「ナビゲーション」と「本文」といった具合に機能をわけて表示する手法です（各々、個別のHTMLファイルを読み込んで表示します）。 このフレームですが、コンテンツの本文が長くてスクロールしなければならない場合でも、ナビゲーション部分は常に表示させることができる、というメリットがあります。その一方で、いろいろなデメリットもあります。ユーザビリティのノウハウについて触れている（と称している）サイトには「フレームはなるべく使わない方が良いが、やむを得ず使う場合はいろいろと対策があ
マウスポインタの形状に関する私見 | Accessible & Usable
公開日 : 2010年8月15日 (2014年10月5日 更新) カテゴリー : アクセシビリティ / ユーザーインターフェース (UI) 枝葉末節ではありますが、ウェブサイト閲覧中におけるマウスポインタの形状について、のお話です。 各ブラウザでは、リンク箇所ではない HTML テキストにマウスオーバーすると、マウスポインタの形状がI字型になります。一見問題なさそうですが、テキスト部分にマウスポインタが置かれている状態で、いざマウスポインタを探そうとしたとき、やや見つけにくいかな、という気がします。 たとえば Google の検索結果ページで、テキスト部分にマウスポインタが置かれている場合。I字型になったマウスポインタをすぐに見つけられるでしょうか？ そもそもなぜI字型なのか？ そもそも、HTML テキスト上でマウスポインタがI字型になるのはなぜなのでしょうか (テキストをドラッグ選択でき
ページ内スクロールエリアの是非 | Accessible & Usable
公開日 : 2010年8月4日 (2011年7月16日 更新) カテゴリー : アクセシビリティ / ユーザビリティ 今回の話題で採り上げる「ページ内スクロールエリア」とは、ブラウザの機能として標準装備されているスクロールバーとは別に、Webページの中で表示されるスクロール領域を意味します。下図のようなイメージです。 このようなスクロールエリアを用いると、情報をコンパクトに配置することができます。エリア内のすべての情報を見るにはスクロール操作が要るので、メニュー表示のように一覧性が求められる情報には適しませんが、たとえば、下図のような例を見かけたことがあるのではないでしょうか。 ページ内スクロールエリアは表示面積が限られるので、当該エリアの外側部分も含めて、ページ全体を見渡しやすくできるというメリットがあります。その一方で、ページ内スクロールエリアには、ユーザビリティやアクセシビリティの問
パスワードのマスキングを任意で切り替える | Accessible & Usable
公開日 : 2010年3月17日 (2015年12月8日 更新) カテゴリー : ユーザビリティ 先のコラム記事「パスワードは隠すべきか？」で、Jacob Nielsen（ヤコブ・ニールセン）氏の「Alertbox」の記事（Stop Password Masking）を引き合いに出し、現時点での私の意見として「多少の不便はあっても、今の慣例どおりデフォルトではパスワードを非表示にしておいて、ユーザーが任意でパスワードの表示/非表示を選択できる機能を付加するのが良いのではないか」ということを述べました。 そこで今回は、実際に挙動を体感いただけるデモを用意しました。アクセシビリティの担保 (キーボード操作、スクリーンリーダーでの音声読み上げ、配色、など) を含め、ご参考になれば幸いです。 デモを見る
音声読み上げの定番環境を試してみる ｜ウェブユーザビリティ向上を支援するWebsite Usability Info
公開日 : 2010年3月8日 (2011年1月11日 更新) カテゴリー : アクセシビリティ 音声読み上げ支援技術（スクリーンリーダーや音声ブラウザ）の、日本におけるシェア調査によると、「PC-Talker」と「ホームページリーダー」が圧倒的に多いという調査があります（国立特別支援教育総合研究所が実施した「視覚障害者のパソコン・インターネット・携帯電話利用状況調査2007」の「第6節 インターネットの利用状況」を参照）。Web閲覧においては、ホームページリーダーを使う人がもっとも多く、次いでPC-Talkerを使う人が多いようです。 個人的には、視覚障害者がWebサイトを閲覧するのにエクストラなコストがかかってしまうことに疑問を感じていて、「NVDA」や「ALTAIR for Windows」のような無料ツールで読み上げチェックをすることはあるのですが、たまたま、知人のご家族（全盲）で
音声読み上げのエミュレーター「Fangs」 | Accessible & Usable
公開日 : 2009年10月26日 (2011年1月11日 更新) カテゴリー : アクセシビリティ 自分のWebサイトが、スクリーンリーダーや音声ブラウザといった支援技術でどのように読み上げられるかを確認するには、実際に支援技術を使ってみるのがもっとも確実です。ただし、サイト制作時においては、たとえば以下のようなシチュエーションで、音声読み上げ内容を視覚的に表示してみたいというニーズがあるのではないかと思います。 時間軸に左右されない形で、音声読み上げ内容を一目で効率的に確認したい。 関係者（ステークホルダー）との間で、アクセシビリティ対策についてできるだけ簡便な方法で共有したい。 こうしたニーズに対して便利な、音声読み上げ内容を視覚的にエミュレートしてくれるツールがあるので、ご紹介したいと思います。Firefoxのアドオンソフト、「Fangs」です。 Fangsをインストールすると、F
画像とテキスト（文字情報）が一対になっているリンク | Accessible & Usable
公開日 : 2009年10月4日 (2015年3月9日 更新) カテゴリー : ユーザビリティ / アクセシビリティ Webページに実装されているリンクの中には、画像とテキスト（このコラム記事では以下、HTMLテキストだけでなく画像化された文字情報も含みます）のリンクが一対になっているもの、つまり両者が隣接していて、かつリンク先が同一になっているケースをよく見かけます。たとえば、テキストリンクにアイキャッチャーとなるアイコンが付随している場合や、テキストリンクを補足するイメージ写真が付いている場合、などです。たとえば、以下のような例があります。 テキストリンクにアイキャッチャーとなるアイコンが付随している例（成田空港の公式サイトのフッターより） 商品カテゴリーへのリンクにイメージ写真が付いている例（スターバックス コーヒーの「ビバレッジ」のページより） 具体的な商品（品番）へのリンクに写真
Jacob Nielsen の「ユーザビリティに関する10のヒューリスティクス (問題解決に役立つ知見) / Ten Usability Heuristics」 | Accessible & Usable
Jacob Nielsen の「ユーザビリティに関する10のヒューリスティクス (問題解決に役立つ知見) / Ten Usability Heuristics」 公開日 : 2009年9月8日 (2018年1月20日 更新) カテゴリー : ユーザビリティ Web ユーザビリティの評価手法のひとつとして、「ヒューリスティック評価」があります。ユーザビリティの専門家が、評価対象のサイトを見て様々な問題点を指摘する手法ですが、専門家の主観的な観点だけでなく、あらかじめ用意されている評価項目に基づいて、客観的な観点での評価も併せて行なうのが一般的です。 今回は、ヒューリスティック評価における具体的な評価項目を検討する際のベースとして使える、Jacob Nielsen (ヤコブ・ニールセン) の有名な「ユーザビリティに関する10のヒューリスティクス (問題解決に役立つ知見) / Ten Usabi
[検索]ボタンが無い検索窓 | Accessible & Usable
公開日 : 2009年8月2日 (2011年1月11日 更新) カテゴリー : ユーザーインターフェース (UI) ユーザーインターフェース（UI）設計のコンサルティング会社、ソシオメディアさんのサイトを見て気づいたのですが、サイト内検索窓があるものの、なんとそこに[検索]ボタンがありません。サイト内検索の機能を持つサイトは珍しくないですが、このように[検索]ボタンが無いものは、とても珍しいのではないでしょうか。 ソシオメディアさんは、UI設計におけるパイオニア的な存在で、私自身も時々、セミナーに参加して勉強させていただくこともあるのですが、パイオニアとして常に「斬新で」「シンプルで」「使える」UIを模索し続けた結果（または、ある仮説に基づく先進的なトライアル）なのでしょう。それにしても、[検索]ボタンを省いてしまうとは大胆だな...という第一印象を持ちました。 でもよくよく考えると、[検
パスワードは隠すべきか？ | Accessible & Usable
公開日 : 2009年7月26日 (2024年3月23日 更新) カテゴリー : ユーザビリティ ウェブユーザビリティの第一人者である Jacob Nielsen (ヤコブ・ニールセン) 氏が、自身のブログ記事「Alertbox」の中で、「Stop Password Masking」という興味深い問題提起をしています。通常、ウェブサイトなどでパスワードを入力すると、画面には入力された文字列が表示されず、代わりに文字の数だけ「黒い点」が表示されます。こうした状況は、「フィードバックをユーザーに提供し、システムの状態を視覚化する」という基本的なユーザビリティ原則に反している、というのです。 さらにニールセン氏は、パスワードを隠すユーザーインターフェース (UI) について、以下のように否定的な見解を述べています。 画面上でパスワード表示を隠したところで、本当にスキルのある輩は、入力しているユー
Ajaxは取り扱い注意 | Accessible & Usable
公開日 : 2009年4月19日 (2011年1月11日 更新) カテゴリー : ユーザビリティ Ajax（エイジャックス）とは、簡単に言うと、画面遷移（ページの切り替え）を伴わずに、ページの情報内容を変更させることができる技術です（詳しくは、Wikipediaの解説などをご参照ください）。 ユーザーの操作（クリックなど）のたびにサーバー側からのレスポンスを待つ（新しくページを切り替えて表示する）必要がないことから、使い勝手の向上が期待できます。また最近では、気軽にAjaxを実装できる「ライブラリー」と呼ばれるプログラムモジュールが多数出回っており、これを使うことでクールな（かっこいい）ユーザーインターフェースをWebサイト（ホームページ）に容易に実装できることも、Ajaxの特長と言えるでしょう。 ちなみにAjaxという概念は、「Asynchronous JavaScript + XML」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
