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

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

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

Transcript

1. アクセシビリティを日常に kintoneチームのアクセシビリティ サイボウズ株式会社 小林大輔
2. 自己紹介 小林大輔 ( @sukoyakarizumu ) ▌2012年 kintone プログラマー ▌2018年 アクセシビリティエキスパート ウェブアクセシビリティ基盤委員会 WG1 委員
3. ▌アクセシビリティチェックリストを作成する ▌実装した成果物のレビュー会を開く ▌書籍の輪講 ▌外部の有識者による講演会 ▌当事者を交えたワークショップ 今まで行ってきたkintoneチームへの施策
4. アクセシビリティチェックリストを作成する ▌ごく簡単なチェックリストを作成(A4に収まるくらい) デザイン チェックリスト 実装 チェックリスト
6. チェックリスト できたこと・できなかったこと ▌基本的なHTML・CSSのカタログとして使ってもらえた ▌上流でなかなか活用されない(要件定義の段階など) ▌対応する度合いがまちまち ▌複雑なUIに対応できなかった
7. アクセシビリティレビュー会 ▌成果物のアクセシビリティをチェックして共有 VoiceOverでは こんな読み上げになります ここはキーボード操作 できないですね ここはチェックリストを 参照しましょう
8. アクセシビリティレビュー会 できたこと・できなかったこと ▌アクセシビリティ対応が足りないことが理解された ▌チェックリストを参照してもらえる機会が増えた ▌修正コストが高く直せないことがあった ▌開催コストが高く期間が空いてしまった
9. アクセシビリティは大切. でも…
10. アクセシビリティを特別視せず 日常的にメンバーと議論しよう
11. Try1: 社内ユーザビリティテスト ロービジョンの社員も混ぜてユーザビリティテストを実施 Aさん(営業部門) Bさん(営業部門) Cさん(受発注部門) Dさん(コンサル部門) Eさん(コンサル部門) ロービジョン 反転・拡大を使用 Fさん(コンサル部門) ロービジョン 反転を使用
12. ▌通常のユーザビリティテストと同じように、要件定義やデザ インを担当するメンバーに観察してもらえた ▌具体的なデザインの改善につながった(反転を考慮した色選び) 社内ユーザビリティテストの利点
13. ▌最近のkintoneプログラマー&デザイナーの開発スタイル • 1つの画面を複数のデザイナーでデザインする • 1つの機能を複数のプログラマーで実装する Try2: モブデザイン・モブプログラミング
15. ▌一緒によりよいHTML/CSSを考える ▌WAI-ARIAのテクニックをその場で伝える ▌VoiceOverを起動して読み上げを聞いてもらう
16. ▌実装をその場で確認するため修正コストが低い ▌プログラマー・デザイナー全員に知見を共有できる ▌レビュー会と比べて、チームメンバーにコストがかからない モブデザイン・モブプログラミングの利点
17. Try3: プランニングで議論 プランニングとは？ ▌要件を実装するにあたり、 実装時の懸念点や考慮すべきポイントを議論する会議 ▌週1回開催
19. アニメーションを CSSでどう実装する？ コンポーネントは こんな構成がいい こんな風に実装すると レンダリングがはやそう VoiceOverで適切に 読み上げられるようにしよう
20. ▌開発者全員にアクセシビリティの課題を認識してもらえる ▌複雑なUIについて、対応方針を具体的に議論できる ▌プランニングはもともとある会議体なので参加するだけ プランニングの利点
21. ▌今ある開発プロセスを使ってアクセシビリティを日常にしよう ▌kintoneチームの例 • 社内ユーザビリティテスト • モブデザイン・モブプログラミング • プランニング まとめ