クラウドサインのアクセシビリティへの取り組みについて。 2019-05-16に開催された「春のアクセシビリティーLT&雑談ナイト」でのライトニングトークの資料です。

1. クラウドサインが
本気で取り組み始めた背景
2019-05-16 春のアクセシビリティーLT&雑談ナイト!
弁護士ドットコム株式会社 太田 良典

2. クラウドサインとは?

6. 電子契約なら
〇〇も実現できます

7. とあるツイート

9. ツイートしていただいた内容
今日全盲の方とクラウドサインで契約締結したが、
当然だけど紙だと条項読めないし、
電子ファイルの読み上げ機能で内容を把握しても
それと同一のファイルに署名できてる保証はないし、
そもそも印刷して署名して郵送なんてハードだなと、
今更ながら気付いた。

10. あらためて状況を整理

11. 全盲の人は、紙での契約が困難
● 墨字で書かれた書類を読むことができない
○ 点訳された書類を用意するのは容易ではない
○ 点字を読めない人もいる
○ 写真撮ってOCRもあるにはあるが精度が微妙
● 書き込んだりサインしたりすることも難しい

12. 電子契約なら……できる!
● スクリーンリーダーによるテキストの読み上げが可能
○ 点字ディスプレイによる点字出力も可能
● メール通知なども普通に読める
● 契約書のPDFも読める

13. クラウドサインは
世界を変える

14. さらに、同日……

16. ツイートしていただいた内容
弊社の視覚障害のある人が、
クラウドサインはアクセシビリティの観点で使いやすかった
(アクセシブルな契約書を作っておけば確認できるし
署名ボタンも押せた)と言ってて、
そういった点が優れているサービスが評価される
世の中にしたいなと思った

17. つまり、
クラウドサインは
視覚障害のある人にも
使いやすい
らしい

18. ここまでのまとめ
● 視覚障害のある人は紙での契約が難しい
● クラウドサインはそれを可能にする
● クラウドサインは視覚障害のある人にも使いやすい
らしい

19. これまた同日……

21. いただいたご意見
● CloudSignを使う機会があり、概ね問題さそうな印象
(つまり、使えた)
● 同意する際に出てくるダイアログが、
スクリーンリーダーでは気づきにくかった
● ラベルがないボタンがいくつかあった

22. 確認してみました

25. さまざまな問題が

26. 問題1: ダイアログが出たことがわからない
● 見た目上は堂々とダイアログが出る
● スクリーンリーダーだと、何も言われない
○ ダイアログが出ていることがまったくわからない

27. 問題2: ダイアログの外の要素が操作できる
● マウス操作では、
ダイアログの中しか操作できない
● キーボード操作ではフォーカスがダイアログの外に
ダイアログの外側の要素が普通に操作できる
○ Tabキー押すとフッタの「ヘルプ」に行く、など

28. 問題3: ダイアログを閉じられない
● ダイアログを閉じるボタンがキーボードで操作できない
○ 閉じるボタンは読まれず、フォーカスも当たらない
○ もっとも、ダイアログを閉じなくても
そのままダイアログの外の要素を操作できるので、
ある意味、閉じなくても良いのだが……

29. 「使いやすかった」の真実

30. おそらくこうであろう
● 同意ボタンを押す→何も起きない
● ダイアログが出ているかも、と予想
● ダイアログってたいていDOMツリーの末尾にあるよね?
● 開発者ツールでDOMツリーの末尾を探してみる
● display: none; のdivがいくつか並んでいる
● display: block; となっているダイアログを発見!

31. 超人か!

32. ……というのを
社内で話しました

33. その後

34. 社内で対応が検討される

35. クラウドサイン採用資料で紹介される

36. そして
伝説が
始まった!

37. まとめ

38. ● クラウドサインがスクリーンリーダーでも使える、
というツイートがあった
● これを社内で話したところ反響があった
● そして対応が始まった!
クラウドサインの出来事

39. 思ったこと
● 社外で反響があると社内でも話題にしやすい
○ エンジニアだけでなく色々な人が興味を示してくれる
● アクセシビリティと言い続けることには意味がある
○ すぐには反応がなくても、やがて大きな波が来る

40. ありがとうございました
カプー