ユーザビリティというのは普遍的に重要なデザインテーマの一つですが、一方でユーザビリティへの関心は、UXが普及して以降、徐々に失われている印象があります。例えば、ユーザビリティがテーマにした書籍のほとんどは2000年代の刊行で、少なくとも日本国内において、2010年代以降に発刊された書籍は僅かです。 実際、Googleトレンドで2004年からの「ユーザビリティ」と「UXデザイン」の検索動向を比較しても、「UXデザイン」が2010年以降に増加傾向であるのに対して、「ユーザビリティ」は2000年代前半をピークに下降しています。 「UX」だと別の意図の検索を含むため、あえて「UXデザイン」で比較していますが、ここにデザイン文脈で使われる「UX」を加えると、「UX」は「ユーザビリティ」を確実に上回っているはずです。 だからといって、2010年代以降にユーザビリティが重要でなくなったわけではありません
フォームはウェブサイトの中でもインタラクションの多い箇所です。ユーザー側にきちんと情報を伝え、そして正しく入力してもらう必要があるのでアクセシビリティーには気をつけたいです。アクセシビリティー対応といえばWAI-ARIAによる支援がありますが、この記事ではWAI-ARIAに限らずどう対応するべきなのか、デモを用いて紹介します。 バリデーションに関してシンプルに実現できるものと、ちょっと凝ったリアルタイムバリデーションのものと2例用意しています。後者は動的に変化するコンテンツへのアクセシビリティー対応について解説しています。 サンプルを別ウィンドウで開く（シンプル版） サンプルを別ウィンドウで開く（リアルタイム版） コードを確認する ▼シンプルなバリデーション ▼ちょっと凝ったバリデーション まずはセマンティックなマークアップを WAI-ARIAを使ったコーディングというと、とにかくrole
Webサイトのログインに使用するパスワードをどのように管理していますか？ 私は1Passwordで管理していますが、他にもChromeのパスワードマネージャーやmacOSのキーチェーンなどを使用している人も多いと思います。 そんなパスワードマネージャーとうまく連動するログインフォームを実装するためのポイントをまとめた記事を紹介します。 don’t get clever with login forms by Brad Frost 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ログインフォームの避けるべき例 ログインフォームの適した例 はじめに 日増しに、私はログインフォームでイライラすることに気がつきました。1Password（私が使用している）やChromeのパスワードマネージャー（これも私が使用している）のような
インクルーシブ HTML ＋ CSS ＆ JavaScript — 多様なユーザーニーズに応えるフロントエンドデザインパターン (電子書籍版) 公開日 : 2018年3月7日 (2021年2月3日 更新) カテゴリー : アクセシビリティ 日本語版レビュワーとして関わらせていただきました書籍「インクルーシブ HTML + CSS & JavaScript — 多様なユーザーニーズに応えるフロントエンドデザインパターン」が、このほど電子書籍化されました。出版元のボーンデジタルさんより見本誌をいただきましたので、ご紹介したいと思います。 本書の公式情報およびお試し版のダウンロードは、株式会社ボーンデジタルさんのサイトをご覧ください。 インクルーシブな読書体験をもたらす「リフロー」の徹底 本書は、ウェブサイトやアプリケーションのユーザーインターフェースデザインについて、「インクルーシブ」という言
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
自治体のホームページで重要なのは知りたい情報にどれだけ分かりやすく簡単にアクセスできるかということだと思うのですが、だいたいの自治体ホームページは２ページ目からはメニューがただダーッと並んだ文字だらけになって「こっから勝手に探してくれろ」って感じなのが多いです。 藤沢市のホームページにいたっては、このリンク一覧は「新着情報（お知らせ）のタイトル」なのか「メニュー項目のタイトル」なのかすら分かりづらい。 そんななか、とても分かりやすく情報にたどり着けるシステムを導入している自治体のホームページを発見することができましたのでご紹介します。 それは、柏市と所沢市です。 メニューを選んで行くとページにアクセスできる 柏市のすごい機能はトップページのカバー写真の部分のメニューを選択していくだけで目的の情報が書いてあるページにアクセスできるところです。これは分かりやすくて簡単で早くて便利です！ 次に紹
ティーンは、自分のウェブを扱う能力に（過剰に）自信を持っているが、彼らのパフォーマンスは大人に劣る。読解レベルの低さや、忍耐力のなさ、発展途上の情報収集スキルにより、ティーンのタスク成功率は低くなる。そのため、サイトはシンプルで共感しやすいものにする必要がある。 Teenage Usability: Designing Teen-Targeted Websites by Jakob Nielsen on February 4, 2013 日本語版2013年2月18日公開 ティーンはインターネットにつながっている。テクノロジーがティーンエイジャーの生活に深く溶け込んでいるため、彼らに役立つ、ユーザブルなウェブサイトを作り出すことがこれまで以上に重要になってきている。次善のものがクリックするだけで手に入り、SMSメッセージによる割り込みが例外ではなく普通のことである世界で成功するには、ウェブサ
日立公共システムエンジニアリングはこのほど、新潟県新潟市 公式サイトのリニューアルを実施したことを発表した。新しいWebサイトは6月1日より公開されている。 今回のリニューアルでは、「年齢や国籍、障害の有無に関わらずすべての人が、知りたい情報を迷わず探せるWebサイト」を目標に改善が実施された。障害者や高齢者のWebサイト利用に配慮した指針として設けられたJIS規格「ウェブアクセシビリティJIS(JIS X 8341-3:2010)」の等級AAにも準拠している。また、従来サイトのリニューアルにあわせ、スマートフォン対応サイトも新設された。 新潟市の公式サイトは1996年にオープンして以来、多数の市民に利用されており、月間アクセス数は平均約28万件にのぼる。しかし近年、掲載する情報量の増加に伴って「知りたい情報を見つけにくい」といった声が多く寄せられるようになり、今回のリニューアルにつながっ
前回の記事の続き的なアレ。続きというか、一部は前回の記事に含めようと思ってたのに、早く寝たいすぎて忘れてました。 論理的コーディングをすべきかどうか ※論理的に文書の意味や構造をマークアップすることを、とりあえず「論理的コーディング」とここでは書きます。 「すべき」かどうかはわかりませんが、W3Cがそうしろってんなら原則はそうした方が捗ると思います。 勇者「俺は論理要素には屈しないｗｗｗｗ黄金の物理要素の塊が負けるはずがにぃｗｗｗｗ」 W3C「物理要素を排除します」 勇者「おいやめろ馬鹿」 ↑もしこうなったらヤじゃん？みたいな。 信者「みなさん、論理構造で人に優しいインターネッツを目指しましょう＾＾」 W3C「やっぱ物理構造の方がええわ」 信者「＾＾；；；；」 ↑こうなったらもっとイヤですが…。 私はこーでぃんぐには詳しくないので、あまり難しいことは言えないです。ただ、「コーディングは手段
ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基本的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません（「やっちゃダメなこと」もしています）ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに 正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基本的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合
2004年６月に出された JIS X8341-3（高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェア及びサービス－第三部：ウェブコンテンツ）は、2009年が工業標準化法による５年サイクルの見直しの時期にあたり、技術の進歩や、国際基準のWCAG 2.0との整合性などを考えて、2010年８月20日には改正されました。 改正版との違いを簡単にまとめると、 改正版では、WCAG 2.0（Web Content Accessibility Guidelines 2.0）との国際協調を大きな柱としているため、世界標準と共通の達成基準及び実装方法になりますが、支援技術のサポート状況などによっては、日本のユーザーに合わせた対処をしなければならない可能性があります。 改正版では、決められた試験を通して適合の有無を客観的に証明できるようになり、「JIS Q 1000 適合性評価・製品規格への自己
公開日 : 2010年8月21日 (2018年1月17日 更新) カテゴリー : アクセシビリティ この記事の公開日の前日（2010年8月20日）、WebアクセシビリティのJIS規格である「JIS X8341-3」（高齢者・障害者等配慮設計指針 - 情報通信における機器、ソフトウェア及びサービス - 第3部：ウェブコンテンツ）の改正版が正式に公示されました。改正した年を規格番号の末尾に付記する形で「JIS X8341-3:2010」と呼ばれます（以前、改正原案のパブリックコメントの受け付について触れた時点では2009年に公示される予定でしたが、さらに一年、じっくり時間をかけて練り上げられたものです）。 初版の「JIS X8341-3」は2004年6月20日に公示されているので、今回の改正は、6年ぶりになります。他のJIS規格と同様、「工業標準化法」第67条（日本工業規格の尊重）により、国お
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
