Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

オーサリングツールとしてのCMSとWebアクセシビリティ

1.116 visualizaciones

Publicado el

CMS大阪夏祭り2016セッション
オーサリングツールとしてのCMSとWebアクセシビリティ

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

オーサリングツールとしてのCMSとWebアクセシビリティ

  1. 1. CMS⼤阪夏祭り2016セッション 野⽥ 純⽣@アルファサード株式会社 オーサリングツールとしての CMSとWEBアクセシビリティ
  2. 2. オーサリングツールとしてのCMSとWEBアクセシビリティ ABOUT ME ▸ 野⽥純⽣(のだ すみお) ▸ https://twitter.com/junnama ▸ https://www.facebook.com/junnama.noda ▸ http://junnama.alfasado.net/online/ ▸ アルファサード株式会社 代表取締役社⻑ ▸ Movable Type エバンジェリスト ▸ webアクセシビリティ エバンジェリスト ▸ ソフトウェア開発者(Perl/PHP/JavaScript/Swift/XOJO)
  3. 3. MOVABLE TYPEのプラグインを 世界で⼀番たくさん書いている⼈
  4. 4. オーサリングツールとしてのCMSとWEBアクセシビリティ ABOUT US ▸ アルファサード株式会社 ▸ 2003年11⽉設⽴ 本社⼤阪府⼤阪市 / 東京オフィス(九段南) ▸ ソフトウェア事業(PowerCMS/MTCommerce他) ▸ クラウドサービス事業 ▸ webインテグレーション事業 ▸ webアクセシビリティ向上⽀援
  5. 5. アルファサード と MOVABLE TYPE
  6. 6. オーサリングツールとしてのCMSとWEBアクセシビリティ MOVABLE TYPE のリリースノートの「THANKS TO」の当社⽐率を調べてみました Thanks To このリリースにはMovable Typeコミュニティーから 報告された多くの、バグ修正、パッチ提供が取り込ま れています。FogBugz を通じてパッチおよび、バグ レポートを提供してくださったコミュニティーメンバー のお名前は以下の通りです。皆様のご協⼒に感謝しま す! “
  7. 7. オーサリングツールとしてのCMSとWEBアクセシビリティ MOVABLE TYPE のリリースノートの「THANKS TO」の当社⽐率を調べてみました MOVABLE TYPE 6.0.2
  8. 8. オーサリングツールとしてのCMSとWEBアクセシビリティ MOVABLE TYPE のリリースノートの「THANKS TO」の当社⽐率を調べてみました ▸ Movable Type 6.0.2 (84%) ▸ Movable Type 6.0.4 (67%) ▸ Movable Type 6.1 (48%) ▸ Movable Type 6.2 (77%) ▸ Movable Type 6.2.4 (77%) ▸ Movable Type 6.3 (65%) 35% 65%
  9. 9. オーサリングツールとしてのCMSとWEBアクセシビリティ 2015年から WORLD WIDE WEB CONSORTIUM (W3C) のメンバー
  10. 10. オーサリングツールとしてのCMSとWEBアクセシビリティ ̶ TIM BERNERS-LEE, W3C DIRECTOR AND INVENTOR OF THE WORLD WIDE The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. “
  11. 11. お前んちのCMSはATAGに準拠してんのか?
  12. 12. ここから本題
  13. 13. オーサリングツールとしてのCMSとWEBアクセシビリティ WEBアクセシビリティとは ウェブページにおけるアクセシビリティは、 ⾼齢者や障害者、また異なる情報端末やソフ トウェアにおいても、情報を取得あるいは発 信できる柔軟性に富んでいること(あるいは その度合い)を意味する。公共サービスでは、 障害があっても知る権利を保障する情報保障 によって重要となる。 “ https://ja.wikipedia.org/wiki/アクセシビリティ
  14. 14. オーサリングツールとしてのCMSとWEBアクセシビリティ WEBアクセシビリティとは ▸ 利⽤者の状態、端末、障害の有無に関わらずwebが利⽤ できる ▸ Web Contents Accessibility Guidelines 2.0 ▸ ⽇本においては JIS X8341-3:2016 が規格 ▸ 公共サイトでは「AA」に準拠することが必須 ▸ 4つの原則 - 知覚可能、操作可能、理解可能、堅牢 ▸ 障害者差別解消法(2016年)
  15. 15. オーサリングツールとしてのCMSとWEBアクセシビリティ ABOUT AUTHORING TOOL ACCESSIBILITY GUIDELINES(WTAG)2.0 http://www.w3.org/TR/ATAG20/
  16. 16. オーサリングツールとしてのCMSとWEBアクセシビリティ ABOUT AUTHORING TOOL ACCESSIBILITY GUIDELINES(WTAG)2.0 https://www.w3.org/WAI/intro/atag.php
  17. 17. オーサリングツールとしてのCMSとWEBアクセシビリティ ABOUT AUTHORING TOOL ACCESSIBILITY GUIDELINES(WTAG)2.0 ▸ オーサリングツール(WYSIWYGエディタ)などの開発者 ▸ CMS,コンテンツアグリゲータ開発者 ▸ ワープロソフトのHTMLエクスポート機能開発者 ▸ マルチメディア・オーサリングツール開発者 ▸ また、それらのツールを使うコンテンツ制作者
  18. 18. オーサリングツールとしてのCMSとWEBアクセシビリティ ABOUT AUTHORING TOOL ACCESSIBILITY GUIDELINES(WTAG)2.0 ▸ ATAG 2.0 has two main parts: ▸ Part A is about making the authoring tool itself accessible.(パートAはオーサリングツール⾃⾝をアクセシ ブルにすること) ▸ Part B is about the authoring tool helping authors produce accessible content.(パートBはオーサリングツー ルがアクセシブルなコンテンツ作成を⼿助けすること)
  19. 19. オーサリングツール⾃⾝を        アクセシブルにする A. Make the authoring tool user interface accessible
  20. 20. オーサリングツールとしてのCMSとWEBアクセシビリティ オーサリングツール⾃⾝をアクセシブルにする ▸ オーサリングツール⾃⾝をWCAG2.0(JIS)に準拠させる ▸ スクリーンリーダーでの操作? ▸ ボタンの代替テキストは適切? ▸ キーボード操作できる? CMSはフォームのかたまり。フォーム周りは特に注意すべし。 残念ながら(ウチも含めて)そこまで気が回っていないのが現状。
  21. 21. オーサリングツールとしてのCMSとWEBアクセシビリティ 今どきのWEBアプリ ドラッグ&ドロップで直感的に操作できます!
  22. 22. オーサリングツールとしてのCMSとWEBアクセシビリティ ドラッグ&ドロップできない時は? <img role="button" tabindex="0" class="toRight" src="/images/right.gif" alt="選択された項⽬をグループから削除" /> チェックボックスとボタン操作で同等の操作ができる <img class="toRight" src="/images/right.gif" alt="左へ" />
  23. 23. オーサリングツールとしてのCMSとWEBアクセシビリティ CMSは⼊⼒フォームのかたまり セッションがタイムアウトした ため、データは破棄されました
  24. 24. オーサリングツールとしてのCMSとWEBアクセシビリティ CMSは⼊⼒フォームのかたまり http://waic.jp/docs/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html
  25. 25. オーサリングツールとしてのCMSとWEBアクセシビリティ WEBサイトのアクセシビリティと同じ Guideline A.3.5: (For the authoring tool user interface) Provide text search of the content. [Implementing A.3.5]
  26. 26. オーサリングツールとしてのCMSとWEBアクセシビリティ 今どきのCMSをできるところからアクセシブルにするには? ▸ 「障害者差別解消法」ではサービスやアプリも対象になる可能 性がある ▸ 障害者のIT活⽤は(多分)みなさんの想像以上ですぜ ▸ 開発者がまず「知る」「意識する」ところから ▸ ⼩さなところから始める(シンプルな投稿アプリを提供するとか) コミュニティで⼀度考えてみませんか? プラットフォームの優位性になるかもしれませんよ!?
  27. 27. オーサリングツールがアクセシブルな コンテンツ作成を⼿助けする B. Support the production of accessible content
  28. 28. 画像の挿⼊フローを考える Guideline B.2.3: Assist authors with managing alternative content for non-text content.
  29. 29. エディタ内画像選択 して確認・修正
  30. 30. altの「⾒える化」
  31. 31. altの修正
  32. 32. オーサリングツールとしてのCMSとWEBアクセシビリティ WTAGにおける⾮テキストコンテンツの代替テキスト ▸ 単なる「画像」や、ファイル名が代替テキストに指定されて いるのは望ましくない ▸ コンテンツ作成者はその場で修正しても、その場で修正しな い(後で修正する)ことも選択できる ▸ 代替テキストは、後で修正することができる ▸ 代替テキストを再利⽤するために保存しておけると良い ▸ 保存した代替テキストを編集または削除できると良い
  33. 33. 8341
  34. 34. コンテンツのアクセシビリティ向上を⽀援
  35. 35. オーサリングツールとしてのCMSとWEBアクセシビリティ ⾊のコントラスト⽐ 1.4.3 最低限のコントラスト: テキスト 及び画像化された⽂字の視覚的な表現に は、少なくとも 4.5:1 のコントラスト ⽐をもたせる。ただし、次の場合は除 く: (レベルAA) ⼤きな⽂字: サイズの⼤きなテキスト 及びサイズの⼤きな画像化された⽂字に は、少なくとも 3:1 のコントラスト⽐ がある。 “
  36. 36. #000000 #EFBF2F コントラスト⽐ [ 12.1 : 1 ](適合)
  37. 37. https://alfasado.net/apps/colortester-ja.html
  38. 38. 画像アップロード時に⾃動テスト実施
  39. 39. ⾃動テストに失敗したものについて ピッカーで⾊を拾うことが可能
  40. 40. ⼈の⼿による検証が必要=>補助する機能を提供
  41. 41. WEBページ(記事)の検証試験
  42. 42. エラー判別が可能なもの NG エラー の場合 エラー無し の場合 OK 確認を促す できるもの 機械的に適合判定が できないもの
  43. 43. 3.3.1 ⼊⼒エラー箇所の特定: ⼊⼒エラー を⾃動的に発⾒された場合は、エラーとなっ ている箇所を特定し、そのエラーを利⽤者 にテキストで説明する。 (レベルA) “ <例>
  44. 44. フォームやコントロールが なければ対象外=>OK
  45. 45. 機械的に適合判定が できないもの ⼿段を提供 何らかの確認⼿段を 提供できるもの 常に確認を 促す ⼈の⼿で確認しなけ ればわからないもの OKを 表⺬ エラー を表⺬
  46. 46. A要素の内容が空の場合、Area要素のALTテキス トが空もしくは属性がない場合、エラー。 target属性の指定がある場合、確認(On/Off可)。 リンクテキスト=URLの場合に警告。target属性 の指定がある場合、確認。
  47. 47. さらに、リンクテキストとリンク先遷移ページ を「⼈間が」⽐較するして、問題なければOK OK NG OK ×× 修正案を⼊⼒する欄
  48. 48. リンク 評価 画像 評価 HTML 評価 JIS*チェッ クリスト に反映 *JIS X 8341-3:2016 エビデン スを保存 評価途中の記録やメモを残せる 最終試験 対象ペー ジを抽出 適合試験
  49. 49. 等級A、AAの 38箇条のうち、 68%(26項⽬)について適合もしくは 対象外(N/A)の判別が可能、15%(3項 ⽬)の項⽬についてエラーの判別がで きる
  50. 50. 機械的に適合判定が できないもの ⼿段を提供 何らかの確認⼿段を 提供できるもの 常に確認を 促す ⼈の⼿で確認しなけ ればわからないもの OKを 表⺬ エラー を表⺬
  51. 51. 1.3.3 感覚的な特徴: コンテンツを理解し 操作するための説明を、形、⼤きさ、視 覚的な位置、⽅向、⼜は⾳のような、構 成要素が持つ感覚的な特徴だけで提供し ない。 “ <例> 現状では⽂章が「位置」に依存した表現かど うかは機械的には判断できない。
  52. 52. 1.4.1 ⾊の使⽤: 情報を伝える、何が起こ るか⼜は何が起きたかを⺬す、ユーザの 反応を促す、もしくは視覚的な要素を区 別する唯⼀の視覚的な⼿段として、⾊だ けを使⽤しない。 (レベルA) “ <例> 現状では資格に依存して情報を伝えている かどうかは機械的には判断できない。
  53. 53. http://junnama.alfasado.net/online/2014/12/a11y_tool_logic.html
  54. 54. オーサリングツールとしてのCMSとWEBアクセシビリティ おわりに ▸ 各CMSのコミュニティで共有してください。 ▸ できるところ、⼩さなところから取り組みましょう。 ▸ 最初は画像管理、画像挿⼊機能から。 ▸ アクセシブルなテーマを作って同梱するのも良いでしょう。 ▸ よろしければお⼿伝いします。⼀緒にやりましょう。
  55. 55. ありがとうございました One more Thing.
  56. 56. ⼈財およびパートナー募集中
  57. 57. アルファサード株式会社では⼈財を募集中です ⼈財およびパートナー募集中 ▸ CMSエンジニア/フロントエンドエンジニア ▸ webアクセシビリティ・スペシャリスト ▸ iOS/Androidエンジニア ▸ クラウドインフラエンジニア ▸ webディレクター ▸ セールスエンジニア(100%インバウンド営業)
  58. 58. アルファサード株式会社では⼈財を募集中です ⼈財およびパートナー募集中 ▸ ⾃分磨き⼿当(⽉に5000円)、携帯⼿当、住宅⼿当 ▸ 週1回までの在宅ワーク選択制度 ▸ 週休3⽇制選択可能 ▸ 従業員持ち株制度 ▸ 勤務地はセールスエンジニア/webディレクターは東京 ▸ それ以外の職種は、⼤阪、東京または広島県福⼭(⼦会社)

×