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
LY Accessibility Guidelines @fukuoka_a11yconf_前夜祭
Search
LINEヤフーTech (LY Corporation Tech)
PRO
November 29, 2024
Technology
1.9k
1
Share
LY Accessibility Guidelines @fukuoka_a11yconf_前夜祭
2024年11月29日に行われたアクセシビリティカンファレンス福岡 前夜祭で使用した資料です。
LINEヤフーTech (LY Corporation Tech)
PRO
November 29, 2024
More Decks by LINEヤフーTech (LY Corporation Tech)
See All by LINEヤフーTech (LY Corporation Tech)
類似画像検索モデルの開発ノウハウ
lycorptech_jp
PRO
3
770
NFLコンペ2026 解法
lycorptech_jp
PRO
0
100
Kaggle未経験社員をメダリストに育てる「AIドラゴン桜」
lycorptech_jp
PRO
0
530
コーポレートサイトのアクセシビリティ改善とJIS準拠への実践
lycorptech_jp
PRO
2
140
Yahoo!ファイナンス - 投資の「難しい・手間がかかる」を「分かる・簡単にする」-
lycorptech_jp
PRO
0
36
Slack MCPでインシデント対応とFAQ生成を加速する:社内ワークショップの実践
lycorptech_jp
PRO
0
420
SDDで⾒える、AIコーディングの"内訳"
lycorptech_jp
PRO
0
460
コーディングAIが導くリスクベースド探索的テストの実践
lycorptech_jp
PRO
1
440
Orchestration Development Workshopを半期実施して
lycorptech_jp
PRO
0
420
Other Decks in Technology
See All in Technology
AsyncStreamでマルチブロードキャストを実装する
1mash0
1
220
論文紹介:Pixal3D (SIGGRAPH 2026)
tenten0727
0
720
既存プロダクトQAから新規プロダクトQAへ
ryotakahashi
0
200
はじめてのAI-DLC
yoshidashingo
2
520
ルール・ロール・ツールを創る / Creating Rules, Roles and Tools
ks91
PRO
0
160
実践 TanStack Start ― 新規プロダクトを開発して確立した、サーバーとクライアント境界の設計パターン / Practical TanStack Start Server-Client Boundary Patterns
kaminashi
2
300
The Making of AI Chips
pfn
PRO
0
750
Copilot CLI・IDE・Web・スマホで途切れない開発フローを目指して / One Copilot flow - CLI IDE Web Mobile
aeonpeople
1
980
Loadbalancing exporter internals
ymotongpoo
1
130
管理アカウント単一運用からAWS Organizationsに移行するの大変で滅
hiramax
0
210
AIコーディングエージェントの活用で、コードは静かに肥大化した
yosukeshinoda
1
340
JavaScript実装の自作プログラミング言語をTypeScript実装に移行した話
keisukeikeda
1
150
Featured
See All Featured
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.2k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
150
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.9k
Principles of Awesome APIs and How to Build Them.
keavy
128
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
230
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
199
73k
My Coaching Mixtape
mlcsv
0
130
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
570
Abbi's Birthday
coloredviolet
2
7.7k
Transcript
© LY Corporation © LY Corporation 中野 信 プロダクト開発本部 LY
Accessibility Guidelines
© LY Corporation 2 中野 信 (なかの まこと) • プロダクトのアクセシビリティの向上とUIガイドラインの策定・運⽤に関わっています
• デジタル庁 アクセシビリティアナリスト (⺠間登⽤ ⾮常勤) • ウェブアクセシビリティ基盤委員会 (WAIC) 作業部会1 主査 ⾃⼰紹介
© LY Corporation 3 • ガイドラインの話をします • 今回話す内容は、明⽇出展するブースのボード・配布物と連動しています • 中野もブースにいますので、ぜひ⽴ち寄ってください!
今⽇のお話
© LY Corporation 4 • 2023年10⽉に、LINEとヤフーがひとつの会社になりました • それに伴い、それぞれの組織にあったものも整理や統合をすることになりました 今⽇のお話
© LY Corporation 5 組織統合前のガイドライン
© LY Corporation 6 • ウェブとスマホアプリのアクセシビリティを確保するための基準 • ウェブはWCAG (Web Content
Accessibility Guidelines) 2.0 Aと⼀部のAAの達成基準 • スマホアプリは加えてWCAG 2.1の⼀部の達成基準を使⽤ • 達成基準の⽂章をプロダクト開発者が解釈しやすい表現に編集 • 対応範囲と程度は各プロダクトで判断 • ガイドラインからチェックリストを作成して定期的なチェックを実施 Yahoo! JAPAN Accessibility Guidelines
© LY Corporation 7 • ウェブアクセシビリティを確保するための基準 • WCAG 2.1をベースに、誰でも理解しやすい・使いやすい内容とすることを主眼に置いて作成 •
freeeのアクセシビリティガイドラインなども参考にした • 項⽬をMUSTとSHOULDの優先度に分類 • 対応範囲と程度は各プロダクトで判断 LINE Accessibility Guidelines
© LY Corporation 8 LY Accessibility Guidelines
© LY Corporation 9 • Yahoo! JAPAN Accessibility GuidelinesとLINE Accessibility
Guidelinesを 1つの⽂書体系に整理したガイドライン • 両⽅の特徴を活かしてほぼすべての⽂章を利⽤ • 項⽬ごとに「重⼤」「修正コスト:⾼」「修正コスト:低」というラベルを設けることで、 部分的・段階的な対応が可能 LY Accessibility Guidelinesとは
© LY Corporation 10 サポート⽂書 • LINE Accessibility Guidelinesを元に構成 •
ガイドラインの具体的な設計⽅法や実装⽅法を記載 LINE Accessibility Guidelines ガイドライン • Yahoo! JAPAN UI Guidelinesを元に構成 • WCAG 2.1のAとAAの達成基準をプロダクト開発 者が解釈しやすい表現に編集 Yahoo! JAPAN Accessibility Guidelines LY Accessibility Guidelines LY Accessibility Guidelinesの構成
© LY Corporation 11 • ガイドラインを1本化することで、開発時の参照箇所を減らすため • 似たガイドラインを参照することによる認識のズレをなくす • LINE、Yahoo!
JAPANにおけるガイドラインのどちらもWCAGを参考元にしていたため • 「UIデザイン寄り」「実装寄り」と、ガイドラインの形態は違ったが根幹は⼀緒だった なぜガイドラインを統合したのか?
© LY Corporation 12 なぜWCAGをベースにしたのか? • WCAGの関連ドキュメントとチェックツールを使えるため • WCAGには「解説書」「達成⽅法集」など、セットになっている⽂書がある •
加えて「代替テキストの書き⽅」「実装パターン集」「ウェブ以外の媒体への適⽤ガイダン ス」など多様な⽂書がある • Lighthouseの「ユーザー補助」など国内・国外の多くの⾃動チェックツールを使える • ウェブアクセシビリティの国内規格 JIS X 8341-3:2016への準拠を表明しやすいため • 社外のアクセシビリティの程度を⽰す時に使われる規格の適⽤を簡単にできる
© LY Corporation 13 ガイドラインの強制度 • 内規相当の⽂書である • 遵守義務がある •
LY Accessibility Guidelinesは、確認項⽬が多く⼯数がかかることが想定されるため 「対応の保留」という猶予条件をつけている
© LY Corporation 14 LY Accessibility Guidelines の特徴
© LY Corporation 15 • 視覚(⾒えない、⾒えづらい)、聴覚、上肢、知的、精神など、様々な障害の状態を網羅している • → WCAGの特徴と同じである •
アクセシビリティの検証や向上で難しいことの⼀つに「ユーザーによるテスト」があるが、ガイド ラインを使うことで多くを補える 障害、障害の状況の網羅性が⾼い
© LY Corporation 16 職域を横断した項⽬で構成されている • WCAGは「ウェブコンテンツのアクセシビリティガイドライン」である • 実装⽅法、UIデザイン、情報(コンテンツ)などを網羅的にチェックできる •
実装⽅法: 要素のマークアップ、WAI-ARIAを使って⽀援技術に情報を伝える⽅法 など • UIデザイン: 情報設計、⽂字や記号のコントラスト、⾊の使った情報区分 など • コンテンツ: キャプション(字幕)の作成、 など
© LY Corporation 17 客観的な評価ができる • ガイドラインの内容は項⽬ごとに評価できるような構成と内容になっている • ⼈が⽬視で確認する項⽬が多いため、評価が分かれる場合があるが、サポート⽂書で設計⽅法や実 装⽅法を提⽰することで、ブレを⽣じにくくしている
© LY Corporation 18 今後の予定と展望
© LY Corporation 19 • ガイドラインの社内浸透のための説明会の実施 • チェック⽅法の実演 • チェックリストの作成と展開
• 勉強会の実施 今後の予定
© LY Corporation 20 • アクセシビリティの検証と改善を⾏うプロダクトを増やす • ガイドラインを満たしたプロダクトをひとつでも多く増やす • ガイドラインの対応⽅法、実装⽅法などのサポートはチームで対応する
今後の展望
© LY Corporation © LY Corporation 21