Upgrade to Pro — share decks privately, control downloads, hide ads and more …

アクセシビリティとこれからのWebデザイン

Rikiya Ihara / magi
April 19, 2016
51

 アクセシビリティとこれからのWebデザイン

Rikiya Ihara / magi

April 19, 2016
Tweet

More Decks by Rikiya Ihara / magi

Transcript

  1. 伊原力也 BA  シニア・インフォメーションアーキテクト  デザインリサーチ、IA、Ix / UIデザイン その他 

    HCD-Net 認定人間中心設計専門家  ウェブアクセシビリティ基盤委員会 WG1 委員 4
  2. バリアフリーデザイン Barrier : 障害 free : 取り除く 古来からある考え方 特徴 

    別の補助を付け足す、または何かをはずすと 使える状況が増える  小回りが効きにくく、整合性が低くなりやすい  日本ではこれをユニバーサルデザインと呼びがち 38
  3. ロナルド・メイスのUD7原則 1. 誰でも公平に使えること 2. 使う上での自由度が高いこと 3. 使いかたが簡単で、直感的に理解できること 4. 必要な情報がすぐに見つかること 5.

    うっかりミスや危険につながらないこと 6. 身体への負担が軽く、楽に使えること 7. 接近や利用のための十分な大きさと広さがあること 41
  4. 情報アクセシビリティのレイヤー 50 robustness findability portability usability shareability hackability 頑健: 存在が維持される

    発見: 特定できる、探し出せる 携帯: 持ち運べる、呼び出せる 使用: 知覚・理解・操作、目的達成 共有: 誰かに渡せる、共有できる 改変: 加工できる、再利用できる
  5. Webの本質 Webの力はその普遍性にあります。 障害の有無にかかわらず誰もがアクセスできる というのがWebの本質的な側面なのです。 The power of the Web is

    in its universality. Access by everyone regardless of disability is an essential aspect. http://www.w3.org/standards/webdesign/accessibility 53
  6. HTMLでマークアップ <!DOCTYPE html> <html lang=“ja”> <head> <title>デザイニングWebアクセシビリティ</title> </head> <body> <h1>デザイニングWebアクセシビリティ</h1>

    <h2>訴求ポイント(この本が既存の本と異なる点)</h2> <ul> <li>「ガイドライン対策」ではなく、実際にコンテンツをアクセシブルにするための実践的な内容</li> <li>解決アプローチの例として、実際に公開されているサイトの実例を多数紹介</li> <li>上流から下流まで、制作プロセスの全てをカバー</li> <li>デザイン、実装だけではなく、戦略や設計のプロセスにおける取り組みを重視</li> </ul> <h2>取り組みの背景</h2> <p>ウェブコンテンツは本来、ユニバーサルなものです。PCのブラウザで閲覧するだけでなく、スマートフォンでアクセスした り、合成音声で読み上げたり、点字で出力したりと、ユーザーの状況に併せてさまざまな形に変えながらアクセスすることがで きます。</p> </body> </html> 63
  7. 分かれているから選択肢が増やせる 78 プロダクト 情報 入れ物 情報 デバイス Web 情報 ユーザー

    エージェント Web デバイス 情報 ユーザー エージェント Web デバイス 支援技術
  8. WCAG 2.0 Webコンテンツのアクセシビリティ規格  W3Cが勧告している標準規格  JIS規格(JIS-X 8341-3:2016)と一致 対象はWebサイトだけじゃない 

    Web技術に関わるコンテンツは全て該当  アプリのWebView、HTMLヘルプ、 キオスク端末のHTML、 Web上のPDF 、EPUB…… 83