Upgrade to Pro — share decks privately, control downloads, hide ads and more …

a11y対応やってくぞい

Michihiro Ikeda
October 21, 2020
Programming
1
1.6k

 a11y対応やってくぞい

Chatwork Tech Talk #1 LT

Michihiro Ikeda

October 21, 2020
Tweet

Other Decks in Programming

See All in Programming
Quarto Tips for Academic Presentation
nicetak
0
900
コンピュータビジョンセミナー2 / computer_vision_seminar_libSGM
fixstars
0
310
爆速の日経電子版開発の今
shinyaigeek
1
500
Amebaブログの会員画面システム刷新の道程
ryotasugawara
1
210
Swift Observation
shiz
3
250
花き業界のサプライチェーンを繋げるプロダクト開発の進め方
userlike1
0
110
(新米)エンジニアリングマネージャーのしごと #RSGT2023
murabayashi
9
5.5k
NGK2023S - OCaml最高! スマホ開発にも使えちゃう?!
haochenxie
0
110
CDKでValidationする本当の方法 / cdk-validation
gotok365
1
170
状態ってなに？🙃
taro28
0
260
ECS Service Connectでマイクロサービスを繋いでみた
xblood
0
520
Workshop on Jetpack compose
aldefy
0
140

Featured

See All Featured
Testing 201, or: Great Expectations
jmmastey
25
5.7k
GraphQLとの向き合い方2022年版
quramy
20
9.8k
No one is an island. Learnings from fostering a developers community.
thoeni
12
1.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Code Review Best Practice
trishagee
50
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
Automating Front-end Workflow
addyosmani
1351
200k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
50k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
2
390

Transcript

  1. Chatwork Tech Talk #1 LT Chatwork株式会社 開発本部 モバイルアプリケーション開発部 Androidエンジニア 池田

    道弘 a11y対応やってくぞい

  2. 自己紹介 2 池田 道弘 2019年9月入社 以降、広島でフルリモートワーク Chatwork 株式会社 開発本部 モバイルアプリケーション開発部

    Androidエンジニア

  3. 01 アクセシビリティとは a11y ?

  4. a11yってなに？ 4 accessibility 11文字 a11y ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティです。 ウェブコンテンツ、より具体的にはウェブページにある情報や機能の利用しやすさを 意味します。 さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でウェブを使うよ うになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリティは

    必要不可欠な品質と言えます。 引用元: アクセシビリティとは | ウェブアクセシビリティ基盤委員会（WAIC） https://waic.jp/knowledge/accessibility/ ウェブアクセシビリティとは

  5. a11y対応が必要なシーン 5 • 見ることができない ◦ スクリーンリーダーなどを用いて画面に 表示されている文字を読み上げる • 見えづらい ◦

    表示を拡大して読みやすくする • 手を動かしづらい ◦ スイッチなどのデバイスを使って操作する • 暗いところで画面が眩しい ◦ ダークモード • 電車の中で音が出せない ◦ 動画の字幕 ユーザー補助機能 アクセシビリティが 必要なシーンは 誰にでも発生しうる

  6. TalkBackデモ 6

  7. a11y対応開始前のChatworkアプリ 7 ＿人人人人人人人人人人人人人人人人＿ ＞　メッセージが読み上げられない　＜ ￣Y^Y^Y^Y^Y^Y^^Y^Y^Y^Y^Y^Y^Y￣ メッセージ 読み上げ内容 あるメッセージを TalkBack で読み上げようとしたとき

  8. 02 対応チーム発足

  9. a11y対応やってくぞい(仮称)チーム発足 9 　 Accessibility Friday! 開催 2020年1月末 Chatworkをもっと便利に使ってもらうために読み上げ機能を使ってみて 「使いづらいところがないかどうか、まず自分たちで知ろう！」 という社内活動

    • 以前、フロントエンドの勉強会でa11y対応についてのセッションを 聞いたことがあり、a11y対応について興味があった • メッセージが読めないのは、どうにかしないといけないと思った a11y対応やってくぞい(仮称)チーム ジョイン！ チーム発足！

  10. a11y対応やってくぞい！ 10 ユーザーはまさに今困っている 　→「こうしたほうが使いやすい」は後で考える 対応方針 • ヤバいところから対応する • 完璧は目指さない •

    まずは必要な情報にアクセスできるように 理由 • 社内にTalkBackユーザーがいないので、正解が分からない • a11y的に"正しい"対応をしようとすると、調査に時間が掛かる

  11. a11y対応の流れ 11 1.提案書作成 QPRD (Quick Product Requirement Document) ユーザー課題の改善案を、エンジニアから 提案できるChatwork社内の仕組み

  12. a11y対応の流れ 12 2.チーム内レビュー

  13. a11y対応の流れ 13 3.プロダクトマネージャーに確認 4.実装

  14. a11y対応に対するユーザーの反応 14 要望 (一部抜粋) Androidの読み上げ機能「TalkBack」を有効にしている状態で チャット内のメッセージが表示された場所をタップすると、 メッセージの送信者の名前の後に「cw-text-view-body」と読み上げられます。 内容が読めるように改善していただけると非常に嬉しいです。 反応 (一部抜粋)

    この前送った要望が通ってた。 「cw-text-view-body」とか読まなくなってチャット確認がしやすくなった。 これは嬉しい！ 私も嬉しい！やってよかった！

  15. a11y対応の状況 15 メッセージと絵文字 リアクション 引用 ルームの未読数 対応してリリースしたもの

  16. 03 今後は…

  17. 読み上げられないところをどんどん改善していく 17 絵文字入力分からない タスク分からない ボタン分からない • 1人でも使えない人がいると認識齟齬が発生してしまう • コミュニケーションツールとして対応の必要あり •

    全員に同じように受け取ってもらえるように対応を進めていく

  18. より良い実装を追求する 18 とりあえず読み上げられる から 読み上げられて使いやすい に

  19. 働くをもっと楽しく、創造的に