$30 off During Our Annual Pro Sale. View Details »

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

Rikiya Ihara
December 23, 2021
6

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

Rikiya Ihara

December 23, 2021
Tweet

Transcript

  1. None
  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製


  12. None
  13. None
  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とアクセシビリティ


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


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


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