20181128_kintoneチームのアクセシビリティ_デザイナー編 / 20181128 Accessibility kintone

Dbe3bc2c72aa0b8175561b3a948a80fb?s=47 Daisuke Kobayashi
November 28, 2018

20181128_kintoneチームのアクセシビリティ_デザイナー編 / 20181128 Accessibility kintone

UXCafe: チームで取り組む!サイボウズのアクセシビリティ
トーク3: kintoneチームのアクセシビリティ

イベントページ: https://cybozu.connpass.com/event/106185/

Dbe3bc2c72aa0b8175561b3a948a80fb?s=128

Daisuke Kobayashi

November 28, 2018
Tweet

Transcript

  1. アクセシビリティを日常に kintoneチームのアクセシビリティ サイボウズ株式会社 小林大輔

  2. 自己紹介 小林大輔 ( @sukoyakarizumu ) ▌2012年 kintone プログラマー ▌2018年 アクセシビリティエキスパート

    ウェブアクセシビリティ基盤委員会 WG1 委員
  3. ▌アクセシビリティチェックリストを作成する ▌実装した成果物のレビュー会を開く ▌書籍の輪講 ▌外部の有識者による講演会 ▌当事者を交えたワークショップ 今まで行ってきたkintoneチームへの施策

  4. アクセシビリティチェックリストを作成する ▌ごく簡単なチェックリストを作成(A4に収まるくらい) デザイン チェックリスト 実装 チェックリスト

  5. None
  6. チェックリスト できたこと・できなかったこと ▌基本的なHTML・CSSのカタログとして使ってもらえた ▌上流でなかなか活用されない(要件定義の段階など) ▌対応する度合いがまちまち ▌複雑なUIに対応できなかった

  7. アクセシビリティレビュー会 ▌成果物のアクセシビリティをチェックして共有 VoiceOverでは こんな読み上げになります ここはキーボード操作 できないですね ここはチェックリストを 参照しましょう

  8. アクセシビリティレビュー会 できたこと・できなかったこと ▌アクセシビリティ対応が足りないことが理解された ▌チェックリストを参照してもらえる機会が増えた ▌修正コストが高く直せないことがあった ▌開催コストが高く期間が空いてしまった

  9. アクセシビリティは大切. でも…

  10. アクセシビリティを特別視せず 日常的にメンバーと議論しよう

  11. Try1: 社内ユーザビリティテスト ロービジョンの社員も混ぜてユーザビリティテストを実施 Aさん(営業部門) Bさん(営業部門) Cさん(受発注部門) Dさん(コンサル部門) Eさん(コンサル部門) ロービジョン 反転・拡大を使用

    Fさん(コンサル部門) ロービジョン 反転を使用
  12. ▌通常のユーザビリティテストと同じように、要件定義やデザ インを担当するメンバーに観察してもらえた ▌具体的なデザインの改善につながった(反転を考慮した色選び) 社内ユーザビリティテストの利点

  13. ▌最近のkintoneプログラマー&デザイナーの開発スタイル • 1つの画面を複数のデザイナーでデザインする • 1つの機能を複数のプログラマーで実装する Try2: モブデザイン・モブプログラミング

  14. None
  15. ▌一緒によりよいHTML/CSSを考える ▌WAI-ARIAのテクニックをその場で伝える ▌VoiceOverを起動して読み上げを聞いてもらう

  16. ▌実装をその場で確認するため修正コストが低い ▌プログラマー・デザイナー全員に知見を共有できる ▌レビュー会と比べて、チームメンバーにコストがかからない モブデザイン・モブプログラミングの利点

  17. Try3: プランニングで議論 プランニングとは? ▌要件を実装するにあたり、 実装時の懸念点や考慮すべきポイントを議論する会議 ▌週1回開催

  18. None
  19. アニメーションを CSSでどう実装する? コンポーネントは こんな構成がいい こんな風に実装すると レンダリングがはやそう VoiceOverで適切に 読み上げられるようにしよう

  20. ▌開発者全員にアクセシビリティの課題を認識してもらえる ▌複雑なUIについて、対応方針を具体的に議論できる ▌プランニングはもともとある会議体なので参加するだけ プランニングの利点

  21. ▌今ある開発プロセスを使ってアクセシビリティを日常にしよう ▌kintoneチームの例 • 社内ユーザビリティテスト • モブデザイン・モブプログラミング • プランニング まとめ