Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ユビーAI受診相談でほんとうに起きていた怖い話
Search
Rikiya Ihara / magi
December 23, 2021
0
7.5k
ユビーAI受診相談でほんとうに起きていた怖い話
Rikiya Ihara / magi
December 23, 2021
Tweet
Share
More Decks by Rikiya Ihara / magi
See All by Rikiya Ihara / magi
アクセシビリティに取り組むメリット
magi1125
1
170
CMS管理画面のアクセシビリティ
magi1125
7
2.1k
AIで加速するアクセシビリティのこれから
magi1125
3
560
アクセシビリティの社内浸透
magi1125
0
49
信念を持つ方法
magi1125
0
29
スマホのアクセシビリティ機能お試し大会
magi1125
0
33
『モバイルアプリアクセシビリティ入門』入門
magi1125
0
16
最速[要出典]アクセシビリティチェック
magi1125
3
330
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
14
10k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
YesSQL, Process and Tooling at Scale
rocio
173
14k
Visualization
eitanlees
146
16k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A Modern Web Designer's Workflow
chriscoyier
695
190k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Building Adaptive Systems
keathley
43
2.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Transcript
None
このセッションの流れ • ユビーAI受診相談のアクセシビリティクイズ • 何が問題なのか? • どうすれば解決できるのか • 問題を再発させないために •
Ubieとアクセシビリティ
伊原 力也 3 • freee株式会社 UX部 デザイン基盤チーム マネジャー • HCD-Net
評議委員 / 認定人間中心設計専門家 • ウェブアクセシビリティ基盤委員会 WG1委員 • ほか、Ubie、note、STUDIOのアクセシビリティ改善のお手伝い
4 HCD-Net
5 ウェブアクセシビリティ基盤委員会 | Web Accessibility Infrastructure Committee (WAIC)
6 伊原 力也: 本
amazonでの購入はこちら
ユビーAI受診相談の アクセシビリティクイズ
ユビーAI受診相談のアクセシビリティ課題 • 🎉 実はけっこうイケてる。デザイン面での課題は少なかった(あるはある) • 実装面でも、課題のパターンは少ない。ただし問題箇所は多かった • 実例で学び、再発防止し、価値を最大化していきたい!
Q:ユビーAI受診相談で最も多かった課題は? • 予想がついた人は2位、3位を考えてみてね
Q:ユビーAI受診相談で最も多かった課題は? • 正解:ラジオボタンがdiv製 • 惜しい:チェックボックスがdiv製 • 惜しい:その他のボタンやリンクがdiv製
None
None
divだったラジオボタンの例(改修済み!)
divだったチェックボックスの例(改修済み!)
divだったボタンやリンクの例(改修済み!)
ちょっと操作デモ • PCでキーボードのみで操作してみる • スクリーンリーダー(iOS VoiceOver)で操作してみる
人はボタンやリンクやフォームをdivで作ってしまう • freeeの赤本 • noteの虚空問題 と その対策
div製だと何が問題なのか?
これらがdivだとどうなる? • tabキーでフォーカスできないのでキーボード操作できない • テキストラベルがない場合、スクリーンリーダーは 「ブランク」と読み上げるか、またはカーソルが当たらず素通りする • スクリーンリーダーで、それが「ラジオボタン・チェックボックス・ リンク・ボタン」だと読み上げず、何なのかわからない •
スクリーンリーダーで「チェック済み・未チェック・disabled・訪問済み」 であるといった状況がわからない
素通りパターン
ブランクと読むパターン
テキストは読むが要素不明・状態不明のパターン
ユビーAI受診相談でほんとうに起きていた怖い話 • ユビーAI受診相談は、ほぼラジオボタンとチェックボックスと ボタンとリンクでできている • しかし、それらの多くがdiv製だった • ゆえに晴眼者 &
キーボードでは利用できないサービスだった • またスクリーンリーダーでは、勘でそれっぽいものを押して進めつつも 結局途中で詰む可能性があるサービスだった
どうすれば解決できるのか
正しい実装はシンプル • インタラクティブ要素をdivやspanで作らない! • input type=”radio”、input type=”checkbox”、 button type=”button”、a
href=”xxx” を使う • これだけで、キーボードでフォーカスできて、 スクリーンリーダーで要素と状態を読み上げるUIが作れる
アイコンをボタンやリンクに使うときは: • アイコンのみボタンの場合: アイコン側にラベルは付けず、button要素にaria-labelでラベルを記載する • アイコン+テキストボタンの場合: アイコン側にラベルは付けず、テキストラベルを表示する
正しい実装 :アイコンのみ+代替ラベル <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>
Windows NVDAの場合
Mac VoiceOverの場合
正しい実装 :アイコン+テキスト <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>
キーボードで操作できる良さ • 私たちはキーボード大好き(個人の感想です) • iPhone + Bluetoothキーボードで操作できるようになる • キーボード操作をエミュレートするハードがいろいろある •
キーボードはオンオフなのでエミュレートしやすい
キーボード操作できるとこういうハードも使える 東京都障害者IT支援センターの展示機器
問題を再発させないために
問題の再発を防ぐ方法 1. サービス内で、使えないと困るであろう「注力箇所」を決める 2. キーボード操作・画面拡大・スクリーンリーダーで注力箇所を使ってみる ※スクリーンリーダー講座やれます!動画あります! 3. 問題点を洗い出し→優先度付け→コツコツ改善(相談のります!) 4. ある程度潰れてきたらLintを導入する:受診相談はイマココ
5. 実ユーザーに対してユーザビリティテスト+インタビュー 6. もともと問題が起きないコンポーネントを定義して、それを使用する
もうちょいで Lint がオンにできそう
そのほかのサクッと直せる系 • html要素にlang=”ja”つける • 拡大禁止の指定を外す • autofocus属性の指定をやめる • outline: noneの指定をやめる
• hoverでopacity:0.7するのをやめる • コントラストが低い文字色や枠線を改善する • 画像やアイコンに適切なaltをつける
逆に重たい系(ご相談ください) • モーダルダイアログとかのウィジェット系をアクセシブルにする • SPAで画面を書き換えた際にスクリーンリーダーにそれを伝える &カーソル位置を先頭にもってくる • ページにユニークなタイトル(title要素)を振る
Ubieとアクセシビリティ
None
None
None
これを読んで思ったこと • 対ミッション:テクノロジーが誰の手にも届くようにするために、 アクセシビリティが必要。 • 対ビジョン:アクセス能力の有無が生死を分つことがあってはならない。 不自由がある人や状況にこそ、医療へのアクセスが必要。 • 対事業:世界を目指すならアクセシビリティは必須。 海外では義務化されていたり、政府の調達要件になっているため。
Ubieが医療 × アクセシビリティの 先駆者になれば、世界は最速で変化するはず
共にやっていきましょう!💪 ご相談は #prj-accessibility までお気軽に