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
a11y対応やってくぞい
Search
Michihiro Ikeda
October 21, 2020
Programming
1
2.3k
a11y対応やってくぞい
Chatwork Tech Talk #1 LT
Michihiro Ikeda
October 21, 2020
Tweet
Share
Other Decks in Programming
See All in Programming
API Platform 4.2: Redefining API Development
soyuka
0
240
🔨 小さなビルドシステムを作る
momeemt
4
690
Design Foundational Data Engineering Observability
sucitw
3
210
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.6k
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
880
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
270
print("Hello, World")
eddie
2
530
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
4.5k
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
Swift Updates - Learn Languages 2025
koher
2
520
Featured
See All Featured
Bash Introduction
62gerente
615
210k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
KATA
mclloyd
32
14k
Optimizing for Happiness
mojombo
379
70k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Being A Developer After 40
akosma
90
590k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Transcript
Chatwork Tech Talk #1 LT Chatwork株式会社 開発本部 モバイルアプリケーション開発部 Androidエンジニア 池田
道弘 a11y対応やってくぞい
自己紹介 2 池田 道弘 2019年9月入社 以降、広島でフルリモートワーク Chatwork 株式会社 開発本部 モバイルアプリケーション開発部
Androidエンジニア
01 アクセシビリティとは a11y ?
a11yってなに? 4 accessibility 11文字 a11y ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティです。 ウェブコンテンツ、より具体的にはウェブページにある情報や機能の利用しやすさを 意味します。 さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でウェブを使うよ うになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリティは
必要不可欠な品質と言えます。 引用元: アクセシビリティとは | ウェブアクセシビリティ基盤委員会(WAIC) https://waic.jp/knowledge/accessibility/ ウェブアクセシビリティとは
a11y対応が必要なシーン 5 • 見ることができない ◦ スクリーンリーダーなどを用いて画面に 表示されている文字を読み上げる • 見えづらい ◦
表示を拡大して読みやすくする • 手を動かしづらい ◦ スイッチなどのデバイスを使って操作する • 暗いところで画面が眩しい ◦ ダークモード • 電車の中で音が出せない ◦ 動画の字幕 ユーザー補助機能 アクセシビリティが 必要なシーンは 誰にでも発生しうる
TalkBackデモ 6
a11y対応開始前のChatworkアプリ 7 _人人人人人人人人人人人人人人人人_ > メッセージが読み上げられない <  ̄Y^Y^Y^Y^Y^Y^^Y^Y^Y^Y^Y^Y^Y ̄ メッセージ 読み上げ内容 あるメッセージを TalkBack で読み上げようとしたとき
02 対応チーム発足
a11y対応やってくぞい(仮称)チーム発足 9 Accessibility Friday! 開催 2020年1月末 Chatworkをもっと便利に使ってもらうために読み上げ機能を使ってみて 「使いづらいところがないかどうか、まず自分たちで知ろう!」 という社内活動
• 以前、フロントエンドの勉強会でa11y対応についてのセッションを 聞いたことがあり、a11y対応について興味があった • メッセージが読めないのは、どうにかしないといけないと思った a11y対応やってくぞい(仮称)チーム ジョイン! チーム発足!
a11y対応やってくぞい! 10 ユーザーはまさに今困っている →「こうしたほうが使いやすい」は後で考える 対応方針 • ヤバいところから対応する • 完璧は目指さない •
まずは必要な情報にアクセスできるように 理由 • 社内にTalkBackユーザーがいないので、正解が分からない • a11y的に"正しい"対応をしようとすると、調査に時間が掛かる
a11y対応の流れ 11 1.提案書作成 QPRD (Quick Product Requirement Document) ユーザー課題の改善案を、エンジニアから 提案できるChatwork社内の仕組み
a11y対応の流れ 12 2.チーム内レビュー
a11y対応の流れ 13 3.プロダクトマネージャーに確認 4.実装
a11y対応に対するユーザーの反応 14 要望 (一部抜粋) Androidの読み上げ機能「TalkBack」を有効にしている状態で チャット内のメッセージが表示された場所をタップすると、 メッセージの送信者の名前の後に「cw-text-view-body」と読み上げられます。 内容が読めるように改善していただけると非常に嬉しいです。 反応 (一部抜粋)
この前送った要望が通ってた。 「cw-text-view-body」とか読まなくなってチャット確認がしやすくなった。 これは嬉しい! 私も嬉しい!やってよかった!
a11y対応の状況 15 メッセージと絵文字 リアクション 引用 ルームの未読数 対応してリリースしたもの
03 今後は…
読み上げられないところをどんどん改善していく 17 絵文字入力分からない タスク分からない ボタン分からない • 1人でも使えない人がいると認識齟齬が発生してしまう • コミュニケーションツールとして対応の必要あり •
全員に同じように受け取ってもらえるように対応を進めていく
より良い実装を追求する 18 とりあえず読み上げられる から 読み上げられて使いやすい に
働くをもっと楽しく、創造的に