Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

これだけは知っておきたい「Webアクセシビリティ」のこと

4,575 views

Published on

2017年9月16日(土)にベルサール新宿グランドで開催された「WordCamp Tokyo 2017」でのスライド。

Published in: Internet
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

これだけは知っておきたい「Webアクセシビリティ」のこと

  1. 1. これだけは知っておきたい 「Webアクセシビリティ」のこと 植木 真(株式会社インフォアクシア)
  2. 2. 植木 真 (株式会社インフォアクシア) Webアクセシビリティ コンサルタント  診断・検証、ユーザビリティテスト、ガイドライン作成、リニ ューアル支援、JIS / WCAG 対応サポート など 国内外の標準化活動(規格・ガイドライン作成)に参加  日本工業規格「JIS X 8341-3」(2004年版、2010年版、2016年版)  W3C勧告「WCAG 2.0」、「WCAG 2.1」ワーキングドラフト ウェブアクセシビリティ基盤委員会(WAIC) 委員長  Certified Professional in Web Accessibility (CPWA)
  3. 3. 例えば、 こんなふうに使っている人もいます。
  4. 4. 障害者のウェブページ利用方法の紹介ビデオ http://www.soumu.go.jp/menu_news/s-news/2005/051215_1_wmv.html
  5. 5. 都バスの運賃表
  6. 6. 都バスの運賃表
  7. 7. そういえば、 最近Twitterでも デフォルト 🌙🌙 夜間モード
  8. 8. 「アクセシビリティ」には いろいろな 説 があります。 まずは、それらを検証してみる :-)
  9. 9. 文字サイズ変更ボタンを 置かなければいけない 説
  10. 10. いらない。
  11. 11. 本来ならブラウザが提供すべきもの IE3には「文字サイズ変更ボタン」があった!
  12. 12. アクセシビリティを確保すると、 デザインがださくなる 説
  13. 13. そういうわけでもない。 http://weba11y.jp/basics/faq/accessible-web-pages-are-boring/
  14. 14. そういうわけでもない。 http://weba11y.jp/basics/faq/accessible-web-pages-are-boring/
  15. 15. そういうわけでもない。 http://weba11y.jp/basics/faq/accessible-web-pages-are-boring/
  16. 16. ガイドラインを読んでも、 難しくて理解できない 説
  17. 17. 例えば「1.2.2 キャプション(収録済み)の達成基準」 同期したメディアに含まれている全ての収録済みの音声 コンテンツに対して,キャプションが提供されている。 これを ”日本語訳” すると… 収録済みの動画(ライブ配信ではない動画)には、その音声 が伝えている情報を書き起こしたキャプションを提供する。
  18. 18. 例えば、Facebook How to Add Closed Captions to Facebook Videos http://www.3playmedia.com/how-it-works/how-to-guides/ht-facebook/ 閲覧時間 モバイル フレンドリー 聴覚障害者対応 集中・理解
  19. 19. JIS X 8341-3:2016 2016年3月22日 公示 国際規格「ISO/IEC 40500:2012」(= W3C 「WCAG 2.0」)と同じ内容の一致規格 「JIS X 8341-3」=「WCAG 2.0」の日本語訳 特定の技術に依存しない達成基準 HTML、PDF、Flash、Silverlight、??? JIS X 8341-3:2016 解説 http://waic.jp/docs/jis2016/understanding/201604/
  20. 20. アクセシビリティ逆引きガイドライン http://weba11y.jp/know-how/guidelines/guidelines_index/
  21. 21. アクセシビリティで下手こくと、 マサカリが飛んでくる 説
  22. 22. Be The Fireman and not The Cop https://www.slideshare.net/johnfoliot/fireman-cop
  23. 23. アクセシビリティ界隈には プレゼン芸人が多い 説
  24. 24. SAWADA STANDARD DESIGN さんの動画 https://www.youtube.com/channel/UCkYDTXQCaimYzUtzhRW7zvQ
  25. 25. SAWADA STANDARD DESIGN さんのスライド https://www.slideshare.net/nozomisawada969/important04-sawada20170603
  26. 26. アクセシビリティは 障害者対応だから、 健常者には関係ない 説
  27. 27. W3Cによる「定義」 Web accessibility means that people with disabilities can use the Web.
  28. 28. 「○○できない」、「○○しづらい」って、障害のある人だけ? 「○○できない」、「○○しづらい」を 「○○できる」、「○○しやすくする」のが、 アクセシビリティ。
  29. 29. 例えば、駅のホームのエスカレーター エスカレーターがあるのに、階段使います? 写真:http://junfuse.com/160105-2/
  30. 30. Accessibility for Everyone https://abookapart.com/products/accessibility-for-everyone アクセシビリティを考慮してデザインすると、 Webは誰でも、どこでも使えるものになる。 You make the web more inclusive for everyone, everywhere, when you design with accessibility in mind.
  31. 31. Inclusive Design Principles http://inclusivedesignprinciples.org/ja/
  32. 32. Inclusive Design at Microsoft https://www.microsoft.com/en-us/design/inclusive
  33. 33. アメリカでは、ウェブサイトの アクセシビリティに関する 訴訟が増えている 説
  34. 34. Q. これらのウェブサイトの共通点は何でしょう?
  35. 35. 企業サイトのアクセシビリティ アメリカでの訴訟件数推移 2015年 57件 2016年 262件 2017年 432件(* 8/15 時点) 3年間 合計751件 のうち、 小売業 353件 レストラン 186件 旅行関連産業 57件 0 50 100 150 200 250 300 350 400 450 500 2015年 2016年 2017年 * 参考:Website Accessibility Lawsuit Filings Still Going Strong http://www.adatitleiii.com/2017/08/website-accessibility-lawsuit-filings-still-going-strong/
  36. 36. WCAG 2.0 https://www.w3.org/TR/WCAG20/ 日本語訳:http://waic.jp/docs/WCAG20/Overview.html
  37. 37. 世界中の国々でWebアクセシビリティを義務化 ?
  38. 38. 日本では、 省庁や自治体だけで、 民間企業は 取り組んでいない 説
  39. 39. 障害者差別解消法 2016年4月1日 施行 利用者からの改善要望があれば個別対応 公的機関は法定義務、民間事業者は努力義務 自治体のWebサイトに対して改善要望が出され 始めている Webアクセシビリティの確保は、先進国の多くでは 法律によって義務化されている 障害を理由とする差別の解消の推進 http://www8.cao.go.jp/shougai/suishin/sabekai.html
  40. 40. みんなの公共サイト運用ガイドライン 2016年4月20日 公開 総務省が作成 公的機関職員向けのJIS対応 手順書 2018年3月末までにレベル AA準拠 を推奨 先進国の多くで義務化されているレベルと同じ 「ウェブアクセシビリティ取組確認・評価表」 を新たに提供 自己採点により毎年取り組み状況を評価し公表 http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/guideline.html
  41. 41. Webアクセシビリティの方針や試験結果を公開
  42. 42. アクセシビリティやっても、 儲からない 説
  43. 43. 「Webアクセシビリティ 取組み状況 調査」 https://wab.ne.jp/wab_sites/general-browse/view/2335
  44. 44. より多くのユーザーとの接点が増えれば… http://www.bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html
  45. 45. アクセシビリティできる人、やりたい人、急募! 案件数が増えています! 競争力 クライアントにとっても、 アナタにとっても 差別化 とある地方でのコンペ実話
  46. 46. WordPress のアクセシビリティ
  47. 47. Powerful Features Easy and Accessible
  48. 48. Accessibility Coding Standards All new or updated code released in WordPress must conform with the WCAG 2.0 guidelines at level AA. Accessibility Coding Standards – Make WordPress Core https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/
  49. 49. アクセシビリティ対応のテーマ テーマディレクトリ – アクセシビリティ対応 https://ja.wordpress.org/themes/tags/accessibility-ready/
  50. 50. WP Accessibility WP Accessibility (By Joe Dolson) https://wordpress.org/plugins/wp-accessibility/
  51. 51. Contact Form 7: アクセシブルデフォルト Contact Form 7: アクセシブルデフォルト (By Joe Dolson) https://ja.wordpress.org/plugins/contact-form-7-accessible-defaults/
  52. 52. アクセシビリティ - WordPress Codex 日本語版 WordPress とアクセシビリティ WordPress (とまともな品質のテーマ)を使っていれば、 アクセシビリティの高いサイトを作るために特に追加で しなければならないことはありません。それでも アクセシビリティ標準に準拠したコンテンツを作成する ためにいくつか心がけることがあります。 アクセシビリティ - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3
  53. 53. [動画] WordPressでも意識したいアクセシビリティ 〜「優しいウェブ サイト」作りをはじめよう〜 (横田 東母子, 森田 壮) https://2016.tokyo.wordcamp.org/09/24/slide/#tech07
  54. 54. WordPressのアクセシビリティ関連情報 https://capitalp.jp/2017/09/04/wp-accessibility-pages/
  55. 55. アクセシビリティ確保の基本 まずは、ここから。
  56. 56. 個人的にはエーイレブンワイ Webアクセシビリティの情報提供サイト「エー イレブン ワイ」 http://weba11y.jp/
  57. 57. このサイトをWordPressで構築してくださったのは… 千貫 りこ さん (Kicks Web)
  58. 58. アクセシビリティ確保の基本の「キ」 10項目 1. ページの内容が分かるページタイトルを記述する 2. ページの領域をセクショニング要素とランドマークroleで示す 3. 見出しやリストなどの文書構造をマークアップする 4. リンクテキストは、リンク先が分かる文言にする 5. 情報を伝えている画像に代替テキストを提供する はじめてのWebアクセシビリティ http://weba11y.jp/know-how/first/first_index/
  59. 59. アクセシビリティ確保の基本の「キ」 10項目 6. 文字色と背景色のコントラストを確保する 7. キーボードだけでも操作できるようにする 8. データテーブルの構造をマークアップする 9. フォーム・コントロールのラベルをマークアップする 10. エラーメッセージではエラー箇所と修正方法を明示する はじめてのWebアクセシビリティ http://weba11y.jp/know-how/first/first_index/
  60. 60. まずはページタイトル HTML5のセクショニング要素等に ランドマークroleを使う
  61. 61. Webページのセクションをマシンリーダブルに ヘッダー <header> ナビゲーション <nav> メインコンテンツ <main> 補足 <aside> フッター <footer> ホーム → 基礎知識 ホーム → 基礎知識 ■■■■■■■■■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■■■ ■■■■■■■■ ■■■■■■■■■■ ○○○○○○○○○○ ○○○○○○○○○○ ○○○○○○○○○○ ○○ ○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○ ○○○○○○○○○○○○ ○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○
  62. 62. スクリーンリーダーでページ内のセクションを移動 NVDA(Windows) VoiceOver(iOS)
  63. 63. 当面はランドマークroleを併用 <header role=“banner”> <nav role=“navigation”>{グロナビ}</nav> <form role=“search”>{サイト内検索}</form> </header> <nav role=“navigation”>{パンくずリスト}</nav> <main role=“main”> {ここにメインコンテンツ} </main> <nav role=“navigation”>{ローカルナビ}</nav> <aside role=“complementary”>{バナーとか}</aside> <footer role=“contentinfo”>{フッター}</footer>
  64. 64. HTML5のセクションを示す主な要素 & 対応するランドマーク role Webページにある セクション HTML5の要素 ランドマークrole ヘッダー header banner ナビゲーション nav navigation メインコンテンツ main main 補足情報 aside complementary フッター footer contentinfo 当面は併用しておく
  65. 65. ナビゲーションの区別がつかない NVDA(Windows)
  66. 66. ラベルを付けて それぞれの違いをマシンリーダブルに <nav role=“navigation” aria-label=“メインメニュー”> {ここにナビゲーションバー} </nav> <nav role=“navigation” aria-label=“現在位置”> {ここにパンくずリスト} </nav> <nav role=“navigation” aria-labelledby=“local-nav”> <h2 id=“local-nav”>製品情報</h2> {ここにローカルナビゲーション} </nav>
  67. 67. スクリーンリーダーでページ内のセクションを移動 Before After aria-label aria-label aria-labelledby
  68. 68. まずはページタイトル 写真だと分かる 代替テキストにする
  69. 69. 代替テキストによって、画像と同等の情報をマシンリーダブルに 画像にある文字情報をalt属性に記述する <img src="wct2017_boothtour.png" alt=“ブースツアー 応援してくれている スポンサー様をご紹介”>
  70. 70. 代替テキストによって、画像と同等の情報をマシンリーダブルに そのページに写真があることも “情報” <img src=“photo.jpg” alt=“写真:iPhone X のホーム画面”>
  71. 71. 代替テキストによって、画像と同等の情報をマシンリーダブルに 写真を説明するテキスト(キャプション)がある場合 <figure role=“group” aria-labelledby=“fig1> <img src=“photo.jpg” alt=“写真”> <figcaption id=“fig1”> iPhone X のホーム画面 </figcaption> <figure> iPhone X のホーム画面
  72. 72. まずはページタイトル 画像リンクとテキストリンク リンク先が同じなら1つにまとめる
  73. 73. リンク先が同じなら一つのリンクにまとめたほうがよい スクリーンリーダー&キーボード操作対応 <a href="http://amzn.to/2bCe8ep"> <img src=“book.jpg" alt=""> <span>デザイニングWebアクセシビリ ティ - アクセシブルな設計やコンテンツ 制作のアプローチ</span> </a>
  74. 74. まずはページタイトルキーボードフォーカス見えてる?
  75. 75. フォーカスインジケータは常に表示させる キーボード操作時にフォーカスの現在位置を示す デフォルトでの表示 ドットや水色の矩形 = 分かりづらいこともある CSSで outline:none の指定があると非表示に キーボード操作時には致命的
  76. 76. フォーカスインジケータの表示を強調してみた
  77. 77. まずはページタイトル 文字色と背景色の コントラスト比は 4.5:1以上
  78. 78. 場所を選ばないからこそ、色のコントラストは重要
  79. 79. こんなナビゲーションバーは…
  80. 80. コントラスト比が低いと… ボタンに気づかない 検索窓に気づかない ○○○○○○○○○ ○○○○○○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○○○ ○○○○○○ クーポンを使う 数量 1 ▼ ¥1,180
  81. 81. 参考になる書籍
  82. 82. 書籍「デザイニング Webアクセシビリティ」 * 電子書籍版もあり http://amzn.to/2fTsZan
  83. 83. 書籍「インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン」 http://amzn.to/2wbG0Tb
  84. 84. 表紙

×