Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
このセッションの流れ
● ユビーAI受診相談のアクセシビリティクイズ
● 何が問題なのか？
● どうすれば解決できるのか
● 問題を再発させないために
● Ubieとアクセシビリティ
Slide 3
Slide 3 text
伊原 力也
3
● freee株式会社 UX部 デザイン基盤チーム マネジャー
● HCD-Net 評議委員 / 認定人間中心設計専門家
● ウェブアクセシビリティ基盤委員会 WG1委員
● ほか、Ubie、note、STUDIOのアクセシビリティ改善のお手伝い
Slide 4
Slide 4 text
4
HCD-Net
Slide 5
Slide 5 text
5
ウェブアクセシビリティ基盤委員会 | Web Accessibility Infrastructure Committee (WAIC)
Slide 6
Slide 6 text
6
伊原 力也: 本
Slide 7
Slide 7 text
amazonでの購入はこちら
Slide 8
Slide 8 text
ユビーAI受診相談の
アクセシビリティクイズ
Slide 9
Slide 9 text
ユビーAI受診相談のアクセシビリティ課題
● 🎉 実はけっこうイケてる。デザイン面での課題は少なかった（あるはある）
● 実装面でも、課題のパターンは少ない。ただし問題箇所は多かった
● 実例で学び、再発防止し、価値を最大化していきたい！
Slide 10
Slide 10 text
Q：ユビーAI受診相談で最も多かった課題は？
● 予想がついた人は2位、3位を考えてみてね
Slide 11
Slide 11 text
Q：ユビーAI受診相談で最も多かった課題は？
● 正解：ラジオボタンがdiv製
● 惜しい：チェックボックスがdiv製
● 惜しい：その他のボタンやリンクがdiv製
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
divだったラジオボタンの例（改修済み!）
Slide 15
Slide 15 text
divだったチェックボックスの例（改修済み!）
Slide 16
Slide 16 text
divだったボタンやリンクの例（改修済み!）
Slide 17
Slide 17 text
ちょっと操作デモ
● PCでキーボードのみで操作してみる
● スクリーンリーダー（iOS VoiceOver）で操作してみる
Slide 18
Slide 18 text
人はボタンやリンクやフォームをdivで作ってしまう
● freeeの赤本
● noteの虚空問題 と その対策
Slide 19
Slide 19 text
div製だと何が問題なのか？
Slide 20
Slide 20 text
これらがdivだとどうなる？
● tabキーでフォーカスできないのでキーボード操作できない
● テキストラベルがない場合、スクリーンリーダーは
「ブランク」と読み上げるか、またはカーソルが当たらず素通りする
● スクリーンリーダーで、それが「ラジオボタン・チェックボックス・
リンク・ボタン」だと読み上げず、何なのかわからない
● スクリーンリーダーで「チェック済み・未チェック・disabled・訪問済み」
であるといった状況がわからない
Slide 21
Slide 21 text
素通りパターン
Slide 22
Slide 22 text
ブランクと読むパターン
Slide 23
Slide 23 text
テキストは読むが要素不明・状態不明のパターン
Slide 24
Slide 24 text
ユビーAI受診相談でほんとうに起きていた怖い話
● ユビーAI受診相談は、ほぼラジオボタンとチェックボックスと
ボタンとリンクでできている
● しかし、それらの多くがdiv製だった
● ゆえに晴眼者 & キーボードでは利用できないサービスだった
● またスクリーンリーダーでは、勘でそれっぽいものを押して進めつつも
結局途中で詰む可能性があるサービスだった
Slide 25
Slide 25 text
どうすれば解決できるのか
Slide 26
Slide 26 text
正しい実装はシンプル
● インタラクティブ要素をdivやspanで作らない！
● input type=”radio”、input type=”checkbox”、
button type=”button”、a href=”xxx” を使う
● これだけで、キーボードでフォーカスできて、
スクリーンリーダーで要素と状態を読み上げるUIが作れる
Slide 27
Slide 27 text
アイコンをボタンやリンクに使うときは：
● アイコンのみボタンの場合：
アイコン側にラベルは付けず、button要素にaria-labelでラベルを記載する
● アイコン＋テキストボタンの場合：
アイコン側にラベルは付けず、テキストラベルを表示する
Slide 28
Slide 28 text
正しい実装 ：アイコンのみ＋代替ラベル
button>
button>
button>
Slide 29
Slide 29 text
Windows NVDAの場合
Slide 30
Slide 30 text
Mac VoiceOverの場合
Slide 31
Slide 31 text
正しい実装 ：アイコン＋テキスト
編集
コピー
削除
Slide 32
Slide 32 text
キーボードで操作できる良さ
● 私たちはキーボード大好き（個人の感想です）
● iPhone + Bluetoothキーボードで操作できるようになる
● キーボード操作をエミュレートするハードがいろいろある
● キーボードはオンオフなのでエミュレートしやすい
Slide 33
Slide 33 text
キーボード操作できるとこういうハードも使える
東京都障害者IT支援センターの展示機器
Slide 34
Slide 34 text
問題を再発させないために
Slide 35
Slide 35 text
問題の再発を防ぐ方法
1. サービス内で、使えないと困るであろう「注力箇所」を決める
2. キーボード操作・画面拡大・スクリーンリーダーで注力箇所を使ってみる
※スクリーンリーダー講座やれます！動画あります！
3. 問題点を洗い出し→優先度付け→コツコツ改善（相談のります！）
4. ある程度潰れてきたらLintを導入する：受診相談はイマココ
5. 実ユーザーに対してユーザビリティテスト＋インタビュー
6. もともと問題が起きないコンポーネントを定義して、それを使用する
Slide 36
Slide 36 text
もうちょいで Lint がオンにできそう
Slide 37
Slide 37 text
そのほかのサクッと直せる系
● html要素にlang=”ja”つける
● 拡大禁止の指定を外す
● autofocus属性の指定をやめる
● outline: noneの指定をやめる
● hoverでopacity:0.7するのをやめる
● コントラストが低い文字色や枠線を改善する
● 画像やアイコンに適切なaltをつける
Slide 38
Slide 38 text
逆に重たい系（ご相談ください）
● モーダルダイアログとかのウィジェット系をアクセシブルにする
● SPAで画面を書き換えた際にスクリーンリーダーにそれを伝える
＆カーソル位置を先頭にもってくる
● ページにユニークなタイトル（title要素）を振る
Slide 39
Slide 39 text
Ubieとアクセシビリティ
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
これを読んで思ったこと
● 対ミッション：テクノロジーが誰の手にも届くようにするために、
アクセシビリティが必要。
● 対ビジョン：アクセス能力の有無が生死を分つことがあってはならない。
不自由がある人や状況にこそ、医療へのアクセスが必要。
● 対事業：世界を目指すならアクセシビリティは必須。
海外では義務化されていたり、政府の調達要件になっているため。
Slide 44
Slide 44 text
Ubieが医療 × アクセシビリティの
先駆者になれば、世界は最速で変化するはず
Slide 45
Slide 45 text
共にやっていきましょう！💪
ご相談は #prj-accessibility までお気軽に