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
160
CMS管理画面のアクセシビリティ
magi1125
7
2.1k
AIで加速するアクセシビリティのこれから
magi1125
3
560
アクセシビリティの社内浸透
magi1125
0
49
信念を持つ方法
magi1125
0
27
スマホのアクセシビリティ機能お試し大会
magi1125
0
33
『モバイルアプリアクセシビリティ入門』入門
magi1125
0
15
最速[要出典]アクセシビリティチェック
magi1125
3
330
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
14
10k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Site-Speed That Sticks
csswizardry
10
690
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Building Applications with DynamoDB
mza
95
6.5k
GitHub's CSS Performance
jonrohan
1031
460k
Speed Design
sergeychernyshev
32
1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
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 までお気軽に