すべての人にチームワークを
サイボウズのアクセシビリティ
Cybozu Meetup#5
小林大輔

自己紹介
▌小林大輔 (@sukoyakarizumu)
▌2012年 東京第2開発部 kintoneチーム プログラマー
▌2016年 デザイングループ兼務

アクセシビリティとは
障がい者・高齢者を含めて
「すべての人」が 製品・建物・サービスなどを
利用できること

本日お話しすること
取り組む
理由
社内啓蒙 製品反映

サイボウズの理想
チームワークあふれる社会を創る

Accessibility = Access + Ability

ユーザは、わたしたちの製品にアクセスすることで
何にアクセスしようとしているのか？

ユーザ サイボウズ製品 チーム

サイボウズにとって、アクセシビリティとは
「ユーザがチームにアクセスできる能力」

アクセシビリティを確保することは
「チームに参加したい」というユーザのねがいを
尊重すること

もくじ
取り組む
理由
社内啓蒙 製品反映

グループウェアでの啓蒙

アクセシビリティ勉強会
▌参加メンバー約20人
• プログラマー
• デザイナー
• プロダクトマネージャー
• ドキュメントライター
▌ 輪講形式で章ごとに発表

外部の方による講演

障がい者の方と一緒に学ぶ

障がい者の方と一緒に学ぶ

啓蒙活動のポイント
▌既存の情報共有の方法を利用する
▌コストが低くできる勉強会から開催する
「今できること」からはじめよう
▌開発の視点だけでない観点も盛りこむ
多くの人をまきこもう

もくじ
取り組む
理由
社内啓蒙 製品反映

既存の問題を減らす
新規開発で
アクセシビリティを
確保する

「今できること」からはじめよう

アクセシビリティDay
▌WCAG2.0を読んで製品の問題点を洗い出す
▌さまざまな支援技術を使って製品を操作する
製品のアクセシビリティについての問題点を把握

基準ごとに整理した場合の問題点
プロダクトにどんな価値を与えるかがわかりづらい

ユーザーストーリーの形式にして整理する
<役割:ロービジョンのユーザー> として、
私は<目的:ヘッダーのアイコンを簡単に見分け> たい。
なぜなら<利益:ヘッダーの操作箇所を特定しやすくなる>
からだ。
[ヘッダー] アイコンのコントラスト比を上げる

kintoneの優先順位づけ
新規開発
ユーザーストーリー
アクセシビリティ
ユーザーストーリー
…
…
統合

既存の問題を減らす
新規開発で
アクセシビリティを
確保する

新規開発でアクセシビリティの問題を防ぐには？
要件定義 デザイン 実装 テスト

新規開発でアクセシビリティの問題を防ぐには？
要件定義 デザイン 実装 テスト

▌たくさんの要件に対応しきれない
▌レビューした要件の内容が変更されることがある
▌チームの知見が育たない
自分ひとりで完璧にこなそうとすると…

チームメンバーがレビューできるようにする
デザイン
チェックリスト
実装
チェックリスト
実装
チェックリスト
詳説

▌見出し
▌キーボード操作
▌画像と代替テキスト
▌感覚非依存
▌リサイズ
▌動きのあるコンテンツ
▌コントラスト比
デザインチェックリストの項目

▌実装するUIはキーボード操作できる用意がある
▌フォーカスしたときのスタイルが決まっている
▌フォーカスしたときにコンテキストが変化しない
(別ウィンドウが開く, 別のコンポーネントの内容が大きく変化するなど)
キーボード操作

▌マークアップの原則
▌画像
▌ボタンとリンク
▌入力フォーム
▌見出し
▌ホバーとフォーカス
実装チェックリストの項目

▌キーボードのみで操作可能にする
▌ページ遷移する場合: a要素を使う.必ずhref属性をつける.
▌ページ遷移しない処理を行う場合: button要素を使う
(div要素やspan要素を使わない)
ボタンとリンク

▌多くの項目を一度に守ることは難しい
▌すべてのプロセスですべてのチェックが必要なわけではない
▌チームのスキルが高まったときにリストを更新すればよい
完全性よりチームが運用可能かどうかを重視する
ベストよりベターを求めよう

製品反映の事例

アプリストア再利用画面
キーボード操作可能

Webhook一覧・詳細画面
色のみに依存しないアイコン
（モノクロにしても情報が伝わる）

アプリストア画面
見出し＆代替テキスト

本日お話ししたこと
取り組む
理由
社内啓蒙 製品反映

取り組む
理由
社内啓蒙 製品反映
①「今できること」を続けよう
② ベストよりベターを求めよう
③ 多くの人をまきこもう
大事な視点

おわり