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
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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)
検索技術知識0のエンジニアが広告検索システムを内製化して運用するまで
lycorptech_jp
PRO
0
140
No More Log Digging 〜AIを一次調査係にする アラートレビュー改善〜
lycorptech_jp
PRO
0
83
実践!既存 Project への AI-Driven Development 適用〜 一ヶ月で Project 唯一のフロントエンドエンジニアを作り出せ〜
lycorptech_jp
PRO
1
410
AIが実装を自走する時代の認知負債との戦い
lycorptech_jp
PRO
3
1.1k
AIと1000本ノックしてたどり着いた、最速のプロダクト開発 ~toC向けAIエージェントUXを、動く選択肢とAIキャパシティで設計する~
lycorptech_jp
PRO
1
150
プライバシー保護の理論と実践
lycorptech_jp
PRO
1
280
AIDLC_ヤフーショッピングの取り組み
lycorptech_jp
PRO
0
710
Business ID Integration at LY Corporation : Phased Migration for a B2B authentication platform with Tens of Millions of Users
lycorptech_jp
PRO
0
62
LINE Messaging: From Active-Standby to Active-Active Multi-DC Architecture
lycorptech_jp
PRO
0
93
Other Decks in Technology
See All in Technology
ソフトウェアアーキテクチャ研修【MIXI 26新卒技術研修】
mixi_engineers
PRO
2
960
2026年のソフトウェア開発を考える(2026/07版) / Agentic Software Engineering 2026-07 Findy Edition
twada
PRO
31
20k
大 AI 時代におけるC# の事情 ~ぶっちゃけトークを交えながら~
nenonaninu
1
530
AIがコードを書く時代、人間は何を保証するのか———馬場さんと考える、開発者に求められる新しい責任と価値 - TECH PLAY
netmarkjp
0
300
運用を犠牲にせずコストを制御し事業成長を支える B2B SaaS ID管理基盤におけるS3 Tableのログストレージ活用
kaminashi
1
100
現場をAIで動かす「フィジカル AI」の組み込み設計の考え方【SORACOM Discovery 2026】
soracom
PRO
0
150
最高のシステムプロンプトを作るためにフィードバック機能を導入した話
alchemy1115
0
220
QAタスクをスキル化したいときに考えること
aomoriringo
0
120
なぜ、あなたのAPIは使われないのか? AX時代の設計原則、ガードレール、運用体制
yokawasa
1
260
AIで楽になるはずが、なぜ疲れる?
kinopeee
0
130
カメラ×AIで挑む「ホワイト物流」― 車両管理、自動化の壁と突破口【SORACOM Discovery 2026】
soracom
PRO
0
180
AI時代におけるエンジニアの新たな役割──FDEとクオリアの探求/登壇資料(戸井田 裕貴)
hacobu
PRO
0
640
Featured
See All Featured
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2.1k
Balancing Empowerment & Direction
lara
6
1.2k
Statistics for Hackers
jakevdp
799
230k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.8k
We Are The Robots
honzajavorek
0
290
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
230
Paper Plane (Part 1)
katiecoart
PRO
1
9.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
23k
Discover your Explorer Soul
emna__ayadi
2
1.2k
The SEO identity crisis: Don't let AI make you average
varn
0
520
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