ユビーAI受診相談でほんとうに起きていた怖い話

Transcript

2. このセッションの流れ
 • ユビーAI受診相談のアクセシビリティクイズ
 • 何が問題なのか？
 • どうすれば解決できるのか
 • 問題を再発させないために
 • Ubieとアクセシビリティ

3. 伊原 力也
 3
 • freee株式会社 UX部 デザイン基盤チーム マネジャー
 • HCD-Net 評議委員 / 認定人間中心設計専門家
 • ウェブアクセシビリティ基盤委員会 WG1委員
 • ほか、Ubie、note、STUDIOのアクセシビリティ改善のお手伝い

4. 4
 HCD-Net
5. 5
 ウェブアクセシビリティ基盤委員会 | Web Accessibility Infrastructure Committee (WAIC)
6. 6
 伊原 力也: 本
7. amazonでの購入はこちら
8. ユビーAI受診相談の
 アクセシビリティクイズ

9. ユビーAI受診相談のアクセシビリティ課題
 • 🎉 実はけっこうイケてる。デザイン面での課題は少なかった（あるはある）
 • 実装面でも、課題のパターンは少ない。ただし問題箇所は多かった
 • 実例で学び、再発防止し、価値を最大化していきたい！

10. Q：ユビーAI受診相談で最も多かった課題は？
 • 予想がついた人は2位、3位を考えてみてね

11. Q：ユビーAI受診相談で最も多かった課題は？
 • 正解：ラジオボタンがdiv製
 • 惜しい：チェックボックスがdiv製
 • 惜しい：その他のボタンやリンクがdiv製

14. divだったラジオボタンの例（改修済み!）

15. divだったチェックボックスの例（改修済み!）

16. divだったボタンやリンクの例（改修済み!）

17. ちょっと操作デモ
 • PCでキーボードのみで操作してみる
 • スクリーンリーダー（iOS VoiceOver）で操作してみる

18. 人はボタンやリンクやフォームをdivで作ってしまう
 • freeeの赤本
 • noteの虚空問題 と その対策

19. div製だと何が問題なのか？

20. これらがdivだとどうなる？
 • tabキーでフォーカスできないのでキーボード操作できない
 • テキストラベルがない場合、スクリーンリーダーは
 「ブランク」と読み上げるか、またはカーソルが当たらず素通りする
 • スクリーンリーダーで、それが「ラジオボタン・チェックボックス・
 リンク・ボタン」だと読み上げず、何なのかわからない
 • スクリーンリーダーで「チェック済み・未チェック・disabled・訪問済み」
 であるといった状況がわからない

21. 素通りパターン

22. ブランクと読むパターン

23. テキストは読むが要素不明・状態不明のパターン

24. ユビーAI受診相談でほんとうに起きていた怖い話
 
 • ユビーAI受診相談は、ほぼラジオボタンとチェックボックスと
 ボタンとリンクでできている
 • しかし、それらの多くがdiv製だった
 • ゆえに晴眼者 & キーボードでは利用できないサービスだった
 • またスクリーンリーダーでは、勘でそれっぽいものを押して進めつつも
 結局途中で詰む可能性があるサービスだった

25. どうすれば解決できるのか

26. 正しい実装はシンプル
 • インタラクティブ要素をdivやspanで作らない！ 
 • input type=”radio”、input type=”checkbox”、
 button type=”button”、a href=”xxx” を使う
 • これだけで、キーボードでフォーカスできて、
 スクリーンリーダーで要素と状態を読み上げるUIが作れる

27. アイコンをボタンやリンクに使うときは：
 • アイコンのみボタンの場合：
 アイコン側にラベルは付けず、button要素にaria-labelでラベルを記載する
 • アイコン＋テキストボタンの場合：
 アイコン側にラベルは付けず、テキストラベルを表示する

28. 正しい実装 ：アイコンのみ＋代替ラベル
 <div> <button type=”button” aria-label=”編集” onclick="edit()"> <i class="far fa-edit"></i></ button> <button type=”button” aria-label=”コピー” onclick="copy()"> <i class="far fa-copy"></i></ button> <button type=”button” aria-label=”削除” onclick="remove()"> <i class="far fa-trash-alt"></i></ button> </div>
29. Windows NVDAの場合

30. Mac VoiceOverの場合

31. 正しい実装 ：アイコン＋テキスト
 <div> <button type=”button” onclick="edit()"> <i class="far fa-edit"></i> 編集</button> <button type=”button” onclick="copy()"> <i class="far fa-copy"></i> コピー</button> <button type=”button” onclick="remove()"> <i class="far fa-trash-alt"></i> 削除</button> </div>
32. キーボードで操作できる良さ
 • 私たちはキーボード大好き（個人の感想です）
 • iPhone + Bluetoothキーボードで操作できるようになる
 • キーボード操作をエミュレートするハードがいろいろある
 • キーボードはオンオフなのでエミュレートしやすい

33. キーボード操作できるとこういうハードも使える
 東京都障害者IT支援センターの展示機器
34. 問題を再発させないために

35. 問題の再発を防ぐ方法
 1. サービス内で、使えないと困るであろう「注力箇所」を決める
 2. キーボード操作・画面拡大・スクリーンリーダーで注力箇所を使ってみる
 ※スクリーンリーダー講座やれます！動画あります！
 3. 問題点を洗い出し→優先度付け→コツコツ改善（相談のります！）
 4. ある程度潰れてきたらLintを導入する：受診相談はイマココ
 5. 実ユーザーに対してユーザビリティテスト＋インタビュー
 6. もともと問題が起きないコンポーネントを定義して、それを使用する

36. もうちょいで Lint がオンにできそう

37. そのほかのサクッと直せる系
 • html要素にlang=”ja”つける
 • 拡大禁止の指定を外す
 • autofocus属性の指定をやめる
 • outline: noneの指定をやめる
 • hoverでopacity:0.7するのをやめる
 • コントラストが低い文字色や枠線を改善する
 • 画像やアイコンに適切なaltをつける

38. 逆に重たい系（ご相談ください）
 • モーダルダイアログとかのウィジェット系をアクセシブルにする
 • SPAで画面を書き換えた際にスクリーンリーダーにそれを伝える
 ＆カーソル位置を先頭にもってくる
 • ページにユニークなタイトル（title要素）を振る

39. Ubieとアクセシビリティ

43. これを読んで思ったこと
 • 対ミッション：テクノロジーが誰の手にも届くようにするために、
 アクセシビリティが必要。
 • 対ビジョン：アクセス能力の有無が生死を分つことがあってはならない。
 不自由がある人や状況にこそ、医療へのアクセスが必要。
 • 対事業：世界を目指すならアクセシビリティは必須。
 海外では義務化されていたり、政府の調達要件になっているため。

44. Ubieが医療 × アクセシビリティの
 先駆者になれば、世界は最速で変化するはず

45. 共にやっていきましょう！💪
 ご相談は #prj-accessibility までお気軽に