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
1.2k
LY Accessibility Guidelines @fukuoka_a11yconf_前夜祭
2024年11月29日に行われたアクセシビリティカンファレンス福岡 前夜祭で使用した資料です。
LINEヤフーTech (LY Corporation Tech)
PRO
November 29, 2024
Tweet
Share
More Decks by LINEヤフーTech (LY Corporation Tech)
See All by LINEヤフーTech (LY Corporation Tech)
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
510
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
1k
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
1.3k
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
1.1k
LINEスキマニのフロントエンド開発にDenoを採用した理由
lycorptech_jp
PRO
0
110
「コード品質向上のテクニック」連載継続の秘訣
lycorptech_jp
PRO
0
97
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
300
Arakawa 101 Or How To Build a Data App by Python
lycorptech_jp
PRO
1
66
ドメイン駆動設計の実践により事業の成長スピードと保守性を両立するショッピングクーポン
lycorptech_jp
PRO
17
4k
Other Decks in Technology
See All in Technology
MLflowの現在と未来 / MLflow Present and Future
databricksjapan
1
230
組織のスケールを見据えたプロジェクトリードエンジニア制度の実践 / Project Lead Engineer for Scaling Engineering Organization
ohbarye
13
2.9k
neoAI_千葉講演資料_250311_配布用.pdf
iotcomjpadmin
0
300
30代エンジニアが考える、エンジニア生存戦略~~セキュリティを添えて~~
masakiokuda
4
1.8k
Microsoft_20250311_できるつくれるAIAgent.pdf
iotcomjpadmin
0
320
AI活用の壁を超える! 開発組織への普及の秘訣
kouryou
0
560
【ServiceNow SNUG Meetup LT deck】ServiceNow「検索性の進化」ZingからNow Assistまで
niwato
0
260
DIってなんだか難しい? 依存という概念を「使う・使われる」 という言葉で整理しよう
akinoriakatsuka
1
660
AWS のポリシー言語 Cedar を活用した高速かつスケーラブルな認可技術の探求 #phperkaigi / PHPerKaigi 2025
ytaka23
7
1.2k
Javaの新しめの機能を知ったかぶれるようになる話 #kanjava
irof
3
1.3k
VISITS_20250311_こねくとあいとりおす.pdf
iotcomjpadmin
0
120
クラウド脆弱性の傾向とShisho Cloudの活用
rvirus0817
0
120
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Designing for Performance
lara
605
69k
Agile that works and the tools we love
rasmusluckow
328
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Unsuck your backbone
ammeep
669
57k
GraphQLとの向き合い方2022年版
quramy
44
14k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
How to Ace a Technical Interview
jacobian
276
23k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.6k
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