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