UXCafe: チームで取り組む!サイボウズのアクセシビリティ トーク1: Garoonチームのアクセシビリティ デザイナー編
イベントページ: https://cybozu.connpass.com/event/106185/
Garoon x Accessibility
View Slide
自己紹介▌河内山(コウチヤマ)⚫サイボウズ グローバル開発本部 デザイングループ⚫2006年中途入社⚫入社以来ずっとUX/UIデザイン部署⚫ほとんどのサイボウズ製品に絡む⚫2011年から Garoon 担当 @kochitaku
目次▌Garoonの紹介(軽め)▌Garoonのアクセシビリティ対応の歴史▌職能別活動紹介(デザイナー/PG/QA)河内山 杉山 小関
Garoon(ガルーン)について▌中堅・大規模組織向けグループウェア▌2002年~▌オンプレミス / クラウド▌4,800社以上 / 200万ユーザー以上▌中央省庁における導入実績あり
アクセシビリティ対応の歴史*PC用WEB画面
4年前ゴールが良くわからない、とてつもなく大変そう大事なのはわかるけど…
現在ゴールとやるべきことがわかってきた!チームで試行錯誤で進めていこう!
現在Garoonアクセシビリティギルド
ギルドができるまで▌会社のビジョンとのつながりを提唱(by 小林さん)“ 多くの人が製品を通してチームワークに参加するためにアクセシビリティ対応は大事 ”▼▌社内で心動かされるメンバーが急増▼▌Garoon担当だったデザイナー/PGで結成。後にQA参加
ギルド活動▌ゴールの設定⚫Garoonユーザーがチームにアクセスできると自信をもって言える。⚫アクセシビリティ対応状況を宣言している。▌時間を決めてその場で活動⚫宿題なし。他タスク都合で後回しになりがちなため⚫1h/2w⚫WCAG2.0 読み合わせ⚫スクリーンリーダー、拡大表示で製品を使う▌勉強会・ワークショップ参加⚫社内勉強会⚫全盲、弱視の方に製品を触ってもらう
ギルド活動▌アクセシビリティチェックリスト⚫WCAG2.0網羅は厳しいため、最低限を精査して製品に関する部分だけに絞る⚫開発メンバーがより理解しやすい文言に置き換え⚫仮運用スタート
ギルド活動▌要件化へのアピール⚫PM(Product Manager)にアクセシビリティの啓蒙⚫製品価値向上に紐づける⚫ 導入検討時のプラス材料⚫ ブランドイメージアップ⚫ インクルーシブデザイン(モダンな思考)★祝★要件化
ギルド活動▌進め方プラン⚫各 Ver で n% アクセシビリティ改善要件を入れるXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX要件
プランが。。。XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX要件XXXXXXXXXXXX
ギルド活動▌最新の進め方⚫新規要件で触れるところはアクセシビリティも考慮XXXXXXXXXXXXXXXXXXXXXXXXXXX要件XXXXXX粛々粛々
ギルド活動 所感▌1人は厳しい。仲間を見つける▌心が動くポイント⚫社会貢献・正義感⚫ビジョンとの関係性⚫製品価値向上⚫好奇心▌試行錯誤▌歩みを止めない先は長いよ!
続きまして デザイナー編
デザイナーの立ち位置PM DesignerUX/UIデザインPGQAUX/UIデザインhtml/css/imageUI不具合
主なデザイナーのチェック▌マウス/キーボード/タッチデバイスで操作できる⚫×例:D&Dのみだとキーボードで操作できない▌スクリーンリーダーで情報が把握できる⚫×例:アイコンのみの部分に補足情報がない▌色のみで情報を伝えない▌文字と背景色のコントラスト比を確保する▌ブラウザで200%拡大でも操作できる
新デザイン化とアクセシビリティ2018
新デザイン化とアクセシビリティ▌軸⚫トレンド(見た目・操作・効果)⚫社内他製品との親和性⚫アクセシビリティ
新デザイン化とアクセシビリティ▌ビジュアルの変更⚫色⚫ コントラスト比考慮⚫アイコン⚫ 絵柄の単純化⚫ 拡大考慮。PNG → SVG
デザイナー編 所感▌まずはキーボードのみでスクリーンリーダーで操作してみる⚫WAI-ARIAタグがどのように有用かがわかる⚫いろいろわかる⚫Win:NVDA / Mac:Voice Over▌ビジュアルの変更は進めやすい⚫ロジックへの影響が少ない⚫デザイナーのみで進めやすい
最後に▌アクセシビリティ対応を日常にしたい⚫特別扱いしない⚫ブラウザチェックのように⚫歯を磨くように
Thanks:)