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
6.7k
ユビーAI受診相談でほんとうに起きていた怖い話
Rikiya Ihara / magi
December 23, 2021
Tweet
Share
More Decks by Rikiya Ihara / magi
See All by Rikiya Ihara / magi
最速[要出典]アクセシビリティチェック
magi1125
2
160
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
8
6k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
340
ゼロから学ぶWebアクセシビリティ~導入編~
magi1125
6
2.4k
アクセシビリティに関わる職種とは?〜freee編〜
magi1125
0
20k
アクセシビリティの効果測定
magi1125
1
8k
電子決済等代行事業者協会 アクセシビリティ勉強会「Webアクセシビリティの概要」
magi1125
0
15k
noteアクセシビリティ勉強会 〜画像編〜
magi1125
0
6.7k
自社サービスのアクセシビリティ向上、良いパターンとアンチパターン
magi1125
0
6.8k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Mobile First: as difficult as doing things right
swwweet
222
9k
Why Our Code Smells
bkeepers
PRO
335
57k
Done Done
chrislema
182
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
870
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Facilitating Awesome Meetings
lara
51
6.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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 までお気軽に