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
「なんでもやってるDMM」を支えるアクセシビリティガイドライン
Search
MiterashiShohei
August 06, 2021
Design
2
2.1k
「なんでもやってるDMM」を支えるアクセシビリティガイドライン
DMM meetup #32 〜なんでもやる会社のサービスデザイン〜での登壇資料です。
MiterashiShohei
August 06, 2021
Tweet
Share
Other Decks in Design
See All in Design
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
200
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
100
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
470
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
630
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.5k
root COMPANY DECK / We are hiring!
root_recruit
1
17k
LLMによるRAG評価用合成テストデータの生成
licux
6
600
セブンデックス カルチャーブック
sevendex
0
790
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4k
Dive Deep into Communication
yomtsu
0
190
実利の世界で、表現者である
kiyou77
2
390
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
570
Featured
See All Featured
Navigating Team Friction
lara
183
15k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
KATA
mclloyd
29
14k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Why Our Code Smells
bkeepers
PRO
335
57k
Optimizing for Happiness
mojombo
376
70k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
YesSQL, Process and Tooling at Scale
rocio
171
14k
It's Worth the Effort
3n
184
28k
Thoughts on Productivity
jonyablonski
68
4.4k
Transcript
「なんでもやってるDMM」を⽀える アクセシビリティガイドライン 合同会社DMM.com 御⼿洗 翔平
御⼿洗 翔平 プラットフォーム事業本部 総合トップ開発部 DMMポイントクラブチーム 事業会社、クライアントワーク、スタートアップ企業にてデザイン‧ ディレクションの経験を経て2021年にDMMに⼊社。 DMMポイントの管理アプリ「DMMポイントクラブ」の開発チームにて プロダクトデザイナーとしてサービス作りに従事。 私について
アプリについて 「DMMポイント」を 便利に管理できるサービス
アプリについて ‧2021年4⽉に本格リリース ‧ポイントがゲットできるくじ機能 ‧ポイントチャージに順次対応
「なんでもやっているDMM」の事業数は50以上 DMMについて
「なんでもやっているDMM」の事業数は50以上 DMMポイントが使えるサービスは13 DMMについて
多種多様なサービスを展開している DMMについて
多種多様なサービスを展開している 多種多様なユーザー属性 DMMについて
(Web Content Accessibility Guidelines) WCAG 多種多様のユーザーに対応するために
Webコンテンツのアクセシビリティ向上のための広範囲に及ぶ推奨事項 WCAGとは 多種多様のユーザーに対応するために
「アクセシビリティ」とは「障害者対応」のこと 多種多様のユーザーに対応するために
「アクセシビリティ」とは「障害者対応」のこと ではなく、 ユーザー属性に依存せず 「誰にとっても使いやすい状態であること」 多種多様のユーザーに対応するために
障害の有無に関わらず基準を満たしていることで ユーザー全体の使いやすさの向上が⾒込める 多種多様のユーザーに対応するために
障害の有無に関わらず基準を満たしていることで ユーザー全体の使いやすさの向上が⾒込める 多種多様なユーザー属性がいるDMMで ⼤きな指針となる 多種多様のユーザーに対応するために
‧WCAGでの推奨項⽬の紹介 ‧DMMポイントクラブでの活⽤事例 これから話すこと 多種多様のユーザーに対応するために
なぜ話そうと思ったのか 多種多様のユーザーに対応するために (個⼈的に)⽂章が難しくて具体例がわかりづらい
(個⼈的に)⽂章が難しくて具体例がわかりづらい WCAGに興味を持ってもらいたい、 情報交換したい なぜ話そうと思ったのか 多種多様のユーザーに対応するために ▼
WCAGでの推奨項⽬の紹介
WCAGでの推奨項⽬の紹介 推奨事項の⼤カテゴリ
WCAGでの推奨項⽬の紹介 知覚可能 操作可能 理解可能 堅ろう
情報及びユーザインタフェース コンポーネントは、利⽤ 者が知覚できる⽅法で利⽤者に提⽰可能でなければなら ない。 知覚可能 操作可能 理解可能 堅ろう WCAGでの推奨項⽬の紹介 要約
誰でも ⾒つけられる/たどり着ける ための⼼得
ユーザインタフェース コンポーネント及びナビゲーショ ンは操作可能でなければならない。 知覚可能 操作可能 理解可能 堅ろう WCAGでの推奨項⽬の紹介 要約 誰でも
触れる/操作できる ための⼼得
情報及びユーザインタフェースの操作は理解可能でなけれ ばならない。 知覚可能 操作可能 理解可能 堅ろう WCAGでの推奨項⽬の紹介 要約 誰でも 操作の結果が予測できる
ための⼼得
コンテンツは、⽀援技術を含む様々なユーザエージェン トが確実に解釈できるように⼗分に堅ろうでなければな らない。 知覚可能 操作可能 理解可能 堅ろう WCAGでの推奨項⽬の紹介 要約 互換性を保つ
ための⼼得
意味のある順序 ⼀貫したナビゲーション ⾮テキストコンテンツ 知覚可能 理解可能 知覚可能 WCAGでの推奨項⽬の紹介 - 直近での活⽤例 -
意味のある順序 [達成基準 1.3.2] 意味のある順序 コンテンツが提⽰されている順序が意味に影響を及ぼす場合には、 正しく読む順序はプログラムによる解釈が可能である。 達成基準 知覚可能
意味のある順序 意味の理解がしやすいコンテンツの順序を保つ。 また、ボイスオーバーなどで理解しやすい順序で読み上げられる。 意図の要約 コンテンツが提⽰されている順序が意味に影響を及ぼす場合には、 正しく読む順序はプログラムによる解釈が可能である。 達成基準 ▼
意味のある順序の対応例 元UI ポイントが無料で 獲得できるくじ機能 広告視聴によるポイント獲得機能追加の例 ポイント管理に 関する情報
意味のある順序の対応例 元UI 新UI案(ボツ) 動画広告に関する情報を 総保有ポイントの下に追加 ▶ 広告視聴によるポイント獲得機能追加の例 なるべく ⽬⽴つ位置がいいね!😊
NGな点 - 情報のグループ化ができていない - 情報の順序に⼀貫性がない 新UI案(ボツ) ポイント管理に 関する情報 ポイント獲得に 関する情報
意味のある順序の対応例 広告視聴によるポイント獲得機能追加の例
NGな点 - 情報のグループ化ができていない - 情報の順序に⼀貫性がない 順序がぐちゃぐちゃで 情報が⾒づらい&探しづらい…😔 新UI案(ボツ) ポイント管理に 関する情報
ポイント獲得に 関する情報 意味のある順序の対応例 広告視聴によるポイント獲得機能追加の例
改善点 ⽬的別に共通の⾒出しでグループを作り、 関係性を整理。 ⽬的の情報の発⾒を素早く⾏えるように! 新UI案(採⽤) ポイント管理に 関する情報 ポイント獲得に 関する情報 NGな点
▼ 意味のある順序の対応例 - 情報のグループ化ができていない - 情報の順序に⼀貫性がない 広告視聴によるポイント獲得機能追加の例 ▼
⼀貫したナビゲーション [達成基準 3.2.3] ⼀貫したナビゲーション ウェブページ⼀式の中にある複数のウェブページ上で繰り返されている ナビゲーションのメカニズムは、繰り返されるたびに相対的に同じ順序 で出現する。ただし、利⽤者が変更した場合は除く。 理解可能 達成基準
⼀貫したナビゲーション 繰り返されるナビゲーションは ⼀貫したレイアウトと挙動になるようにする。 意図の要約 ウェブページ⼀式の中にある複数のウェブページ上で繰り返されている ナビゲーションのメカニズムは、繰り返されるたびに相対的に同じ順序で出現する。 ただし、利⽤者が変更した場合は除く。 達成基準 ▼
⼀貫したナビゲーションの対応例 画像タップ時の挙動 くじを引く 広告再⽣ 遷移案(ボツ)
⼀貫したナビゲーションの対応例 画像タップ時の挙動 NGな点 同じ画像の形式であるが、 別々の遷移になっている くじを引く 広告再⽣ 遷移案(ボツ)
⼀貫したナビゲーションの対応例 画像タップ時の挙動 NGな点 同じ画像の形式であるが、 別々の遷移になっている くじを引く 広告再⽣ 遷移案(ボツ) タップ後の挙動が統⼀されていないので ユーザーは予測しづらい…😥
⼀貫したナビゲーションの対応例 画像タップ時の挙動 くじを引く 広告再⽣ 改善点 それぞれ共通で機能の詳細画⾯へ遷移し、 詳細画⾯からアクションを⾏う ▼ NGな点 同じ画像の形式であるが、
別々の遷移になっている 遷移案
⾮テキストコンテンツ [達成基準 1.1.1] ⾮テキストコンテンツについて 利⽤者に提⽰されるすべての⾮テキストコンテンツには、 同等の⽬的を果たすテキストによる代替が提供されている。 知覚可能 達成基準
⾮テキストコンテンツについて 画像などには代替となるテキストを⽤意し、 ⽬で⾒る情報と読み上げで聞く情報をイコールにする 意図の要約 利⽤者に提⽰されるすべての⾮テキストコンテンツには、 同等の⽬的を果たすテキストによる代替が提供されている。 達成基準 ▼
⾮テキストコンテンツの対応例 ⾮テキストコンテンツ 同等の⽬的を果たすテキスト ▼ : accessibilityLabel : ContentDescription
⾮テキストコンテンツの対応例 👀 👂 📱 ⾮テキストコンテンツ 代替テキスト(読み上げ)
⾮テキストコンテンツの対応例 👀 1⽇1回くじ引き 👂 ⾮テキストコンテンツ 代替テキスト(読み上げ) 📱 情報が ⾜りない
⾮テキストコンテンツの対応例 👀 毎⽇無料でチャレンジ! 1⽇1回くじ引き 1等は100ポイント 2等は50ポイント! 👂 ⾮テキストコンテンツ 代替テキスト(読み上げ) 📱
情報が 多い
⾮テキストコンテンツの対応例 👀 毎⽇無料でチャレンジ! 1⽇1回くじ引き 1等は100ポイント 👂 📱 💡 ⾮テキストコンテンツ 代替テキスト(読み上げ)
おわりに Webだけではなく、モバイルアプリや XR‧⾳声⼊⼒などのテクノロジーもカバーした WCAG . が2022年以降勧告予定 今後のWCAG 要チェック👀
ご清聴ありがとうございました! ぜひDLしてみてください😄