2017/11/11に開催されたJapan Accessibility Conferenceの登壇資料です。

1. チームで取り組む！
アクセシビリティコーディング&デザイン
⼩林⼤輔 & 伊敷 政英

2. ⾃⼰紹介
⼩林⼤輔
サイボウズ kintoneチーム
@sukoyakarizumu
伊敷 政英
Cocktailz

3. アクセシビリティの広がり
ひとりで取り組む
チームで取り組む
全社で取り組む

4. アクセシブルな
コーディング&デザイン

5. 今回テストするWebサービス

6. ユーザビリティテスト

7. キーボード操作に要注意！
キーボード操作不能
ハイライト視認不能

8. div要素やspan要素をボタンに⾒せかけていませんか？
キーボード操作
<div onClick=...>さらに表示</div>

9. div要素やspan要素のままで対応するとしたら…
キーボード操作
<div onClick=...
tabindex=“0”
onKeyup=...
role=“button”
>さらに表示</div>

10. ボタンにはbutton要素を使おう
キーボード操作
<button onClick=...>さらに表示</button>

11. ⾒出しやリスト
⾒出しとしてマークアップ
リストとしてマークアップ

12. キーボードフォーカス順序
▌CSSで要素の位置を変えた場合は要注意
▌Tabキーを使って検証しよう

13. コントラスト⽐
▌Color Contrast Checkerなどで確認しよう

14. 1. 適切なマークアップをしよう
2. 多様なユーザに注意をはらってデザインしよう
スクリーンリーダー、ロービジョン、拡⼤…
3. 百聞は⼀⾒に如かず！ユーザを観察しよう
アクセシブルコーディング&デザインのポイント

15. チームで
アクセシビリティに取り組む⽅法

16. ▌ ヘッダーのキーボードフォーカス順序を改修！
▌ 「さらに読む」をキーボード操作できるように改修！
▌ 「＋」ボタンをキーボード操作できるように改修！
▌ プルダウンのフォーカスが⾒えるように改修！
11/12 アップデートでアクセシビリティを改善！

17. チームで取り組むための２つの要素
ま
マインドルール

18. ルールづくりの観点1
どの程度の厳密さを求めるか？

20. 25項⽬(A基準)

21. コンテンツのすべての機能は、個々のキーストロークに特定の
タイミングを要することなく、キーボードインタフェースを通じ
て操作可能である。ただし、その根本的な機能が利⽤者の動作に
よる始点から終点まで続く⼀連の軌跡に依存して実現されている
場合は除く。 (レベル A)
WCAG2.0の例 2.1.1 キーボード

22. ▌ ⽂書の分量が多い
▌ ⽂書が難解で抽象的
▌ プロダクトによっては関係ない項⽬が書かれている
（動画、⾳声、閃光、アニメーションなど）
WCAG2.0をいきなり適⽤しようとすると…

24. ルールづくりの観点2
ルールを誰に守ってもらうか？

25. 他の職能に説明することから逃げない
上流も下流も巻き込まないと、アクセシビリティ対応できない
要件定義 デザイン 実装 テスト

26. kintoneのアクセシビリティチェックリスト
デザイン
チェックリスト
実装
チェックリスト
実装
チェックリスト
詳説

27. 1. ⾒出し
2. キーボード操作
3. 画像
4. 感覚⾮依存(⾊、位置、形など)
5. 拡⼤と縮⼩
6. 動きのあるコンテンツ
kintone
デザインチェックリスト⽬次

28. デザインチェックリストの例
l 複雑な画像を使っていない
(画像を⾮表⽰にしても、周囲の⽂章や代替テキストによって
同等の情報を伝えることができる)
l ⽂字を画像で表現していない
画像

29. kintone
アクセシビリティ実装チェックリスト⽬次
1. マークアップの原則
2. 画像
3. ボタンとリンク
4. ⼊⼒フォーム
5. ⾒出し
6. ホバーとフォーカス

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

31. チームで取り組むための２つの要素
ま
マインドルール

32. 当事者が使っている様⼦をみんなで観察する

33. 外部の⽅による講演

34. 他に優先すべきタスクがある
今のプロダクトにとって重要？

35. Accessibility = Access + Ability

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

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

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

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

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

42. チームでアクセシビリティに取り組むために
ü当事者の使い⽅をみんなで観察しよう
üアクセシビリティに取り組む意味を考えよう
ま
ü無理のない項⽬数からスタートしよう
ü多くの職能を巻き込もう

43. おわり