WCAG 2.0 早見表 (時代工房) | Accessible & Usable
公開日 : 2017年11月22日 (2019年10月5日 更新) カテゴリー : アクセシビリティ 京都を拠点にウェブデザインやウェブアクセシビリティ関連サービスを展開している有限会社時代工房さんが、このたび「WCAG 2.0 早見表 (†)」を制作されました。先日 (2017年11月11日) 開催された Japan Accessibility Conference Vol.1 の会場で「ご自由にお取りください」形式で配布されたものですが、好評のあまり品切れとなり、改めて時代工房の柴田さまのご厚意で頂戴しました。(柴田さま、ありがとうございます。) † 正式名称は「JIS X 8341-3:2016, WCAG 2.0, ISO/IEC 40500:2012 早見表」です。 A4サイズ1枚の表裏に情報がぎゅっと凝縮されていて、常に手元に置いて必要なときに手早く参照できるようになっています
ボタン hover 時のマウスポインター形状 | Accessible & Usable
公開日 : 2017年11月6日 カテゴリー : ユーザビリティ たまたま「Buttons shouldn’t have a hand cursor - Simple = Human」という記事が目に留まり、興味深く読みました。「インクルーシブ HTML + CSS & JavaScript」日本語版の翻訳レビューをしたとき、同書の P.181 で以下の通り紹介されていたのがきっかけです。 <button> がリンクと異なっているもうひとつの点は、pointer カーソルスタイルを持たないことです。アダム・シルバー（Adam Silver）は「Buttons shouldn’t have a hand cursor」の中で、<button> 要素に手動で cursor: pointer を追加することが、ユーザビリティ上の誤りである理由を説明しています。<button> にこのカーソルスタ
カルーセル | Accessible & Usable
公開日 : 2014年3月16日 カテゴリー : アクセシビリティ / ユーザビリティ Web サイトのユーザーインターフェース (UI) に「カルーセル (carousel)」と呼ばれるものがあります。文字通り訳すと「回転木馬」という意味ですが、情報 (画像だったり、画像＋テキストだったり) をパネル状に横に並べて、Web ページの幅を超えて隠れている情報も「くるくる」と手繰り寄せて表示できる、という UI です。 Amazon の「この商品を買った人はこんな商品も買っています」が有名な例です。 Amazon (amazon.co.jp) における「この商品を買った人はこんな商品も買っています」のカルーセル また最近では、Web ページのメインビジュアルにカルーセルを採用している例もよく見られます。タッチジェスチャとの親和性が高い (左右方向へのフリックやスワイプで容易にパネルを切り替え
英語圏のウェブアクセシビリティ コミュニティで語られる「インクルーシブデザイン (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年4月12日 カテゴリー : アクセシビリティ / ユーザビリティ いわゆる「ランディングページ」やホーム (トップページ) などで、ユーザーのスクロール操作に呼応してコンテンツの塊 (写真やキャッチコピー、メニュー、行動喚起、など) が小出しに出現する演出のウェブページを、ここ数年よく目にします。さりげないアニメーション効果 (フェードインやスライドイン) を伴った、「パララックス効果の控え目なもの」と捉えることができますが、漠然とスクロールダウンしているユーザーに対しても個々のコンテンツの存在をアピールできる (ふと目に留めてもらえる) 効果が期待できそうです。 こうした演出は、ユーザーがコンテンツを上から下まで「順序よく」「連続的に」見ることが前提となっています。インタラクション設計においては、マウスホイールやタッチジェスチャによるスクロールダウンが強く意識されて
アクセシビリティ達成基準レベル「AA」について考える | Accessible & Usable
公開日 : 2014年1月12日 (2014年1月13日 更新) カテゴリー : アクセシビリティ 最近、ある Web サイトの構築プロジェクトで、情報アーキテクチャ (IA)、ユーザーインターフェース (UI) 設計、アクセシビリティ、といった領域で関わらせていただく中で、アクセシビリティの達成基準レベル「AA」について、改めて考える機会がありました。そのサイトデザインが海外でも使われるということで、ある国の法制面からの要求で、W3C が勧告する「WCAG (Web Content Accessiblity Guidelines) 2.0」の達成基準レベル「AA」を満たすことを視野に入れておく必要に迫られたからです。 Web サイトがアクセシビリティ対応 (厳密に言うと「WCAG 2.0 (日本の場合は JIS X8341-3:2010)」への対応) を検討するとき、どのレベルの達成基準
Google マップ (PC 版) のキーボード操作性の向上 | Accessible & Usable
公開日 : 2016年8月12日 (2018年1月18日 更新) カテゴリー : アクセシビリティ ウェブサイトで、地図をユーザーに提示する際、Google マップを活用することは多いと思います。私が UI 設計に関わるプロジェクトでは、ユーザビリティの問題を回避するため、インラインフレームで Google マップを埋め込むのではなく、Google マップの URL にリンクさせるようにしています (参照 : Google マップの埋め込みについて考える)。こうすることで、インタラクティブな地図操作は Google マップのサイト/アプリに委ねることができる (地図利用というコンテキストにおいてより優れた UX を提供できる) という利点がありますが、最近、PC で開くことができる Google マップのサイトで、アクセシビリティ、特にキーボードでの操作性が大きく向上していることに気が付き
スクリーンリーダー利用に関するトレンド : 2015年7月実施の WebAIM 調査より | Accessible & Usable
公開日 : 2015年9月3日 (2024年3月1日 更新) カテゴリー : アクセシビリティ ウェブアクセシビリティ向上のために活動している米国の非営利団体「WebAIM (Web Accessibility in Mind)」による、恒例のスクリーンリーダー利用者調査 (第6回) の結果が発表されました。英語のレポートになりますが、WebAIM サイトの「Screen Reader User Survey #6 Results」で詳細をご覧いただくことができます。 当サイトでは、2009年の第1回目から、この調査をウォッチしてきましたが、スクリーンリーダーやインターネットの習熟度合い、無料/ローコストのスクリーンリーダー利用の多さ、モバイル機器でのスクリーンリーダー利用の多さ、ランドマーク (WAI-ARIA Landmark) 利用の多さなど、今回の調査でも全体的には従来とそう変わら
「障害者差別解消法」施行 | Accessible & Usable
公開日 : 2016年4月1日 (2023年7月19日 更新) カテゴリー : アクセシビリティ 国連の「障害者の権利に関する条約 (Convention on the Rights of Persons with Disabilities)」の批准に伴う国内法制度の整備の一環として、2016年4月1日より、「障害を理由とする差別の解消の推進に関する法律」(いわゆる「障害者差別解消法」) が施行されます。 法律全文、基本方針、その他関連資料については、内閣府ウェブサイトの「障害を理由とする差別の解消の推進」ページから参照することができます。 この法律は、行政機関のみならず、民間の事業者も対象となります (障害者差別を防ぐための「合理的配慮」が求められます)。また、合理的配慮の基礎のひとつとして「情報アクセシビリティ」が明記されており、このサイトのテーマのひとつであるウェブアクセシビリティも
「テキストのサイズ変更」の達成基準について考える | 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
JIS X8341-3:2016 | Accessible & Usable
公開日 : 2016年3月31日 (2018年1月20日 更新) カテゴリー : アクセシビリティ 「JIS X8341-3:2010」の改訂として、2016年3月22日に「JIS X 8341-3:2016」 が公示されました。達成基準の内容 (つまり JIS X8341-3 準拠のために必要な施策) については変更がありませんが、文書構造的に WCAG 2.0 との合致が図られています。折しも、2012年10月に WCAG 2.0 は正式に ISO/IEC 国際規格として承認されたので (ISO/IEC 40500:2012)、今回の JIS X8341-3:2016 の公示によって、以下のような関係になったといえます。 なお、JIS X8341-3:2016 では、旧来の2010年版に比べていくつかの改善点があります。主だったものを簡単にご紹介します。 「原則」「ガイドライン」「達成
折り畳み UI のスクリーンリーダー対応 | Accessible & Usable
公開日 : 2015年7月1日 (2023年9月7日 更新) カテゴリー : アクセシビリティ 最近のウェブサイトでは、ユーザーの任意操作 (クリックやタップ) によって、機能やコンテンツを展開する/折り畳むユーザーインターフェース (UI) をよく見かけます。たとえば以下のようなものです。 メガメニュー ハンバーガーアイコン (押すとメニューが展開表示される) 虫眼鏡アイコン (押すと検索窓が出現する) アコーディオン これらの UI は当然アクセシビリティが担保されるべきで、キーボードによる操作 (Tab キーでフォーカスを当てて Enter キーで展開/折り畳みを実行する) が可能だったり、スクリーンリーダー (音声読み上げ) でも利用可能であることが求められます。 特にスクリーンリーダーでの利用に向けては、一連のインタラクションを完遂するうえで手掛かりとなる情報がすべて音声によって
モーダルウィンドウを考える | Accessible & Usable
公開日 : 2015年7月6日 (2024年2月12日 更新) カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) に、「モーダルウィンドウ」と呼ばれるものがあります。ページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させるもので、このウィンドウが前面で開いている間は背景側にある元ページが操作対象外になることから「モーダル」という名称が付いています。実装例としては、フォーム、アラート、画像の拡大表示 (いわゆる Lightbox 系と呼ばれるもの) などが挙げられます。 モーダルウィンドウは、あるページを開いているというコンテキストを維持しつつ付加的にコンテンツの提示ができる利点がある反面、基本的なユーザビリティやアクセシビリティが欠落しているケースが多く見受けられます。以下の観点を意識しながらデザインや実装をすることで、基本的なユーザビリティやア
ウェブページに文字拡大機能を置くのは「時代遅れ」 | Accessible & Usable
公開日 : 2015年2月17日 (2019年11月9日 更新) カテゴリー : アクセシビリティ / ユーザビリティ ウェブページの上部 (サイト共通ヘッダーなど) に、文字拡大機能が設置されているサイトを見かけることがあります。 文字拡大機能のイメージ。[大][中][小] ボタンが並んでいたり、[標準][拡大] ボタンが並んでいたりする。 ブラウザの標準機能として文字の拡大が可能であることを知らないユーザーが多い (ユーザーの大半はプリファレンスを変更しようという考えに及ばない) ことから、文字拡大機能を見える形でページ上に設置したほうが親切、というウェブユーザビリティ専門家が (かつては) 多かったように思います。 私自身、長い間ウェブユーザビリティに関わってきた中で、当座の利便性を優先してサイト側に文字拡大機能を実装する判断をしたり (そしてやっぱり止めたり) ... と紆余曲折な
ビジュアルヒエラルキー | Accessible & Usable
公開日 : 2015年1月30日 カテゴリー : 情報設計 (IA) ウェブサイトのユーザビリティを高めるためには、ユーザーのニーズや目的を十分理解したうえで、スムーズなユーザー行動を後押しするような情報デザインが必要です。実際のデザインプロセスにおいては、提示すべき情報を厳選し、優先度を付けることになりますが、その際に意識したいのが、ビジュアルヒエラルキー (視覚表現による情報の重み付け) です。 ビジュアルヒエラルキーを表現する要素 ビジュアルヒエラルキーを表現するための視覚的な要素としては、以下のようなものがあります。 位置関係 情報の位置関係によってビジュアルヒエラルキーが表現されることがあります。上に配置されているほど、上位に見えます。また、一般的な横書きのコンテンツであれば、右より左に配置されているもののほうが、上位に見えるでしょう。 サイズ (大きさ、広さ) 文字の大きさや太
ゴーストボタンのアクセシビリティ | Accessible & Usable
公開日 : 2014年12月28日 カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) で、「ゴーストボタン (ghost button)」を目にすることがあります。背景が透過するスタイルのボタンのことですが、たとえば、メインビジュアルが高品位かつ大きな写真である場合に、その写真の魅力を損なわずに、行動喚起 (Call To Action : CTA) を提示する...といったデザインができます。 ゴーストボタンの例 (Lees Ferry のウェブサイト。このスクリーンショットは iPad で撮ったものだが、PC でアクセスすると、メインビジュアルエリアは動画になっていて面白い。) ゴーストボタンはその性質上、目に触れやすい位置に配置されつつも、ビジュアル的な存在感としては「控えめ」であることが求められます。「控えめ」であることの度合いが過ぎるとボタンの視
カード型 UI について考える | Accessible & Usable
公開日 : 2014年12月2日 カテゴリー : ユーザビリティ ここ数年でよく目にするようになったユーザーインターフェース (UI) デザインのひとつに、「カード」があります。 たとえば、Pinterest、Facebook、Google Now、などで使われているのが有名です。 UI にカードが用いられている例 (Pinterest と Google Now) カードは、情報をコンパクトにパッケージングして取り回しやすいことから、直接操作 (マルチタッチインターフェース) の登場に伴ってよく使われるようになりましたが、ウェアラブルデバイスの普及も相まって、今後ますます多く目にする UI になってゆくでしょう。たとえば Google Glass のデザインパターンは基本的にカードで構成されていますし、Android Wear でも UI パターンの筆頭として定義されています。 ウェブサイ
「PC 向けサイト」であってもタッチ操作が当たり前に | Accessible & Usable
公開日 : 2014年1月9日 (2014年1月15日 更新) カテゴリー : ユーザビリティ 今や取り立てて言うほどのことではありませんが、Apple の iPad の登場を機に「タブレット」と呼ばれるタッチインターフェース型デバイスの普及が進んでいます。2014年にはタブレットの出荷台数が従来型の PC に並ぶ、という予想もあります。(参照 : 「調査リポート：世界でのタブレット出荷、2014年にPCと横並びに ─ Canalys予測 (ITmedia Mobile)」) また、Microsoft Surface のように、PC とタブレットの「あいのこ」とでも言えそうなデバイスが出てきたり、従来型の PC にタッチインターフェースを備えたモデルも各社から出始めています。 こうして考えると、PC で閲覧されることを想定した Web サイトであっても、マウスの代わりに (あるいはマウスに
パララックス効果で魅せる縦に長いウェブページ | Accessible & Usable
公開日 : 2012年11月26日 (2015年12月14日 更新) カテゴリー : アクセシビリティ / ユーザビリティ 最近、パララックス効果 (parallax scrolling effect) を採り入れた、縦に長いウェブページが注目を集めています。以下の例のように、ページをスクロールしてゆくと、それに呼応して複数の視覚要素が個別に動くことで視差を作り出し、奥行き感や動きを演出する、というものです。 実際の動きを動画キャプチャしてみました。クローズドキャプション (字幕) で補足説明 (動きの解説) も用意してあります。 Anna Safroncik (http://annasafroncik.it) この効果をうまく用いれば、ユーザーの関心を惹きつける (エモーションを刺激する) ことができ、一定時間、ページに滞留してもらえることが期待できます。面白い視覚効果であれば、行きつ戻
ユーザーを「人間」扱いしていますか？ | Accessible & Usable
公開日 : 2012年7月22日 カテゴリー : ユーザビリティ すぐれたユーザーエクスペリエンス (UX) を提供するためは、ユーザーを「人間」として尊重することが欠かせません。 ほとんどの方が、そんなこと「当たり前」だとお思いでしょうが、実際は、きちんと「人間」扱いできていないことが多いのではないでしょうか。皆さん自身がひとりのユーザーとして Web サイトを利用したときのことを思い返してみると、失礼な扱いを受けたと憤慨した経験は、少なからずあると思います。 Web は上手に活用することで、運営者 (企業) とユーザー (顧客) が直接コミュニケーションできるメディアですが、運営者側から見た場合、アクセスして利用してくれるユーザーの実際の様子が見えるわけではありません (アクセス解析でユーザー行動のデータを得ることはできますが、リアルタイムなビデオチャットでもない限り、利用中のユーザー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
