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.

アクセシブルなブログ開発、 その後どうなったの

5,074 views

Published on

2019/03/08 CA11Y #1 〜アクセシビリティはじめて物語〜 で発表した資料です。アメブロでのアクセシビリティの啓蒙活動とその結果、そして最近リリースした「こえのブログ」でのアクセシビリティ向上のための実践事例についてご紹介しました。

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

アクセシブルなブログ開発、 その後どうなったの

  1. 1. アクセシブルなブログ開発、 その後どうなったの 2019/03/08 CA11Y #1
  2. 2. tokimariCyberAgent / Ameba Blog Frontend Engineer
  3. 3. 1. アメブロでやったこと 2. で、その後アメブロどうなったの 3. こえのブログでの実践事例 おはなしすること
  4. 4. アメブロでやったこと 1. これまでのアクセシビリティの取り組み
  5. 5. アクセシビリティ 勉強会 2017/4〜2018/9 毎週or隔週、輪読・issue出し 勉強会履歴と、輪読した本 1. アメブロでやったこと
  6. 6. PC-Talker おさわり会  「えっどこに入力するの!?」 顔を伏せてPC-Talkerを起動した状態で投稿している様子 1. アメブロでやったこと
  7. 7. a11y警察 パトロール  「こういう実装もできます!」  「ここは〜なので順序を変えた いですが、どうでしょ??」 SlackでアクセシビリティのTIPSについて紹介している様子 1. アメブロでやったこと
  8. 8. Ameba Accessibility Guidelines 図解・具体例・実装例つき WCAG2.1に合わせ更新中 https://openameba.github.io/a11y-guidelines/ ガイドラインのとある項目のスクリーンショット 1. アメブロでやったこと
  9. 9. 全職種向け 勉強会 70~80人くらい? 営業、QC、企画、ライターetc 勉強会の様子やスライドなど 1. アメブロでやったこと
  10. 10. で、その後 アメブロどうなったの? 2.
  11. 11. a11y警察 人員拡大 1人で見れる範囲は限られてる 仕様やレビューで考える人が増えた - ガイドライン編集:6人 - つっこむ人:15人〜? 2. で、その後アメブロどうなったの? レビューでアクセシビリティ系の 指摘をしているところ アクセシビリティを考慮した実装の修正例
  12. 12. 新規&改修の 仕様の時点で 相談&調整 後から変えるのしんどい ガイドラインにも随時事例追加 リニューアルしたAmeba検索の画面 キー操作に対応したインクリメンタルサーチ機能を提供 2. で、その後アメブロどうなったの?
  13. 13. 2. で、その後アメブロどうなったの? 初めから気をつければ できたことも たくさんあるのでは??
  14. 14. アクセシブルな 開発知見をつくりたい Webアプリケーションで どういうことに気をつけておけばいいのか あらかじめ挙げておきたい、共有したい 2. で、その後アメブロどうなったの?
  15. 15. 新規開発で 実践してみた 2. で、その後アメブロどうなったの?
  16. 16. 「こえのブログ」の実践事例 3.
  17. 17. 喋るだけで ブログになる 投稿機能 音声+書き起こしテキスト をセットで投稿できる スマホに話しかけると、音声認識技術で書き起こし、 テキスト化してブログ記事にできる 3. 「こえのブログ」の実践事例 › 3.1. 「こえのブログ」って?
  18. 18. こえで書くブログ こえで聴くブログ こえで観るブログ Concept: 3. 「こえのブログ」の実践事例 › 3.1. 「こえのブログ」って?
  19. 19. 「これ、コンセプトが  アクセシビリティやん…」 3. 「こえのブログ」の実践事例 › 3.1. 「こえのブログ」って?
  20. 20. アクセシブルな 開発知見をつくりたい 2. で、その後アメブロどうなったの? Webアプリケーションで どういうことに気をつけておけばいいのか あらかじめ挙げておきたい、共有したい
  21. 21. 実験しやすい 小規模プロジェクト 技術的チャレンジも多く、全員未知の領域 仕様 → 開発 → 作り直し のサイクルが速い 3. 「こえのブログ」の実践事例 › 3.1. 「こえのブログ」って? フロント PM デザイナー フロント
  22. 22. 間違えたら 直せばええやん 3. 「こえのブログ」の実践事例 › 3.1. 「こえのブログ」って?
  23. 23. 間違えたら 直せばええやん 「餅つき開発」と呼ばれました デザイン 実装 仕様 3. 「こえのブログ」の実践事例 › 3.1. 「こえのブログ」って?
  24. 24. 実践したこと 3-2.
  25. 25. ポップアップを開く前 一覧のアイテムにフォーカスしている 3. 「こえのブログ」の実践事例 › 3.2. 実践したこと ポップアップを開く/閉じる 3-2-1. 仕様・デザイン・実装 操作対象が変わったら キー操作性に要注意
  26. 26. ポップアップを開いたとき ポップアップ内の要素にフォーカスしている 3. 「こえのブログ」の実践事例 › 3.2. 実践したこと ポップアップを開く/閉じる 3-2-1. 仕様・デザイン・実装 操作対象が変わったら キー操作性に要注意
  27. 27. ポップアップを開く/閉じる、ドロワー、 SPAのページ遷移、リストの追加読み込み ポップアップを開いたとき ポップアップ内の要素にフォーカスしている 3. 「こえのブログ」の実践事例 › 3.2. 実践したこと 3-2-1. 仕様・デザイン・実装 操作対象が変わったら キー操作性に要注意
  28. 28. 投稿完了 しました オフラインで す 10%完了 3. 「こえのブログ」の実践事例 › 3.2. 実践したこと 進行中・完了・オフライン通知など 状態の表示・ 通知方法を検討する 3-2-2. 仕様・デザイン・実装
  29. 29. 投稿完了 しました 投稿失敗 しました オフラインで す 30%完了 20%完了 10%完了 3. 「こえのブログ」の実践事例 › 3.2. 実践したこと 進行中・完了・オフライン通知など どのタイミングで、何を通知する? スクリーンリーダーには、どこまで通知する? 状態の表示・ 通知方法を検討する 3-2-2. 仕様・デザイン・実装
  30. 30. 投稿完了 しました 投稿失敗 しました オフラインで す 3. 「こえのブログ」の実践事例 › 3.2. 実践したこと 進行中・完了・オフライン通知など どのタイミングで、何を通知する? スクリーンリーダーには、どこまで通知する? 状態の表示・ 通知方法を検討する 3-2-2. 仕様・デザイン・実装
  31. 31. フォーカス時の スタイルは必ず表示 3-2-3. デザイン・実装 ドロワーの例 デフォルトのoutlineが適用されている 3. 「こえのブログ」の実践事例 › 3.2. 実践したこと いくつかパターンを作成 デザインを当ててから標準スタイルを消す デザイン or 標準スタイルが必ず当たっている状態
  32. 32. ドロワーの例 デザインされたoutlineが適用されている 3. 「こえのブログ」の実践事例 › 3.2. 実践したこと フォーカス時の スタイルは必ず表示 いくつかパターンを作成 デザインを当ててから標準スタイルを消す デザイン or 標準スタイルが必ず当たっている状態 3-2-3. デザイン・実装
  33. 33. 代替テキストの検討は まぁ、やるよね altの未検討のものはマージしない アイコンボタンのaria-labelも忘れずに 3-2-4. 仕様・実装 アイコンボタンの例 3. 「こえのブログ」の実践事例 › 3.2. 実践したこと
  34. 34. 3. 「こえのブログ」の実践事例 › 3.2. 実践したこと こえのブログの開発ドキュメント。 アクセシビリティの観点で特に注意すべきことが記載されている 開発者のおやくそく化 ドキュメント に追加 3-2-5. 実装
  35. 35. 開発者のおやくそく化 インターン生にも遵守して もらってます 3. 「こえのブログ」の実践事例 › 3.2. 実践したこと iPhoneのVoiceOverの使い方に苦戦しながらも 適切なaria属性を検討するインターン氏 ドキュメント に追加 3-2-5. 実装
  36. 36. 結果は? 3-3.
  37. 37. “声のブログなら視覚に障害がある方も声でブログが読 める。文字もあるから、聴覚に障害がある人は読める” ユーザーのつぶやき(エゴサした) “私の息子は脳性麻痺で車椅子。その上、視覚障害もあ るんだけど、こえのブログを聴いてる私を見て、「〜 (好きなタレント)も声のブログやってくんないか なぁ」とつぶやいている。” ※こえのブログについて呟いている一般ユーザーのツイートの一部を抜粋 3. 「こえのブログ」の実践事例 › 3.3. 結果は?
  38. 38. 音声ファイルがなくても 視覚障害者もWebを閲覧できる 「音声つき」だから特別アクセシブルなわけじゃない 3. 「こえのブログ」の実践事例 › 3.3. 結果は?
  39. 39. 「音声つき」だからこそ気づいてもらえたかもしれない 3. 「こえのブログ」の実践事例 › 3.3. 結果は? 使えることを・使い方を知らない ユーザーもいるはず
  40. 40. 「読めそう」だと感じてもらえたのは大きな一歩、そして責任も そんなユーザーが 読もうとした時に、 「本当に読める」ブログであるべき 3. 「こえのブログ」の実践事例 › 3.3. 結果は?
  41. 41. ほかにも 3. 「こえのブログ」の実践事例 › 3.3. 結果は?
  42. 42. 幅広いユーザー、 閲覧スタイルに - 電車で:見たい - 家事をしながら:聞きたい ユーザーが状況に合わせて選べる ママにも嬉しい!という感想を拾った私のツイート (自作自演感) 3. 「こえのブログ」の実践事例 › 3.3. 結果は?
  43. 43. 投稿・表現しやすい →投稿頻度up →PV増加も? 寝ながらおやすみボイス、料理をしながら、妄想 電話、早口言葉、声でヨガの指導、etc.. 妄想電話の投稿 3. 「こえのブログ」の実践事例 › 3.3. 結果は?
  44. 44. 新規ユーザー層の 開拓にも 機械音痴/高齢層なタレントの新規開設 若年層ユーザーの取り込み アイドルのイメージ 3. 「こえのブログ」の実践事例 › 3.3. 結果は?
  45. 45. アクセシビリティの高い機能が 障害者に限らず 幅広い+新しいユーザーに届いた 3. 「こえのブログ」の実践事例 › 3.3. 結果は? :yatteiki:つぎは:

×