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
コーポレートサイトのアクセシビリティ改善とJIS準拠への実践
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
LINEヤフーTech (LY Corporation Tech)
PRO
May 21, 2026
Technology
180
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
コーポレートサイトのアクセシビリティ改善とJIS準拠への実践
GAAD Japan 2026のライトニングトーク5の発表資料です。
https://www.gaad.jp/timetable/
LINEヤフーTech (LY Corporation Tech)
PRO
May 21, 2026
More Decks by LINEヤフーTech (LY Corporation Tech)
See All by LINEヤフーTech (LY Corporation Tech)
プライバシー保護の理論と実践
lycorptech_jp
PRO
1
230
AIDLC_ヤフーショッピングの取り組み
lycorptech_jp
PRO
0
500
Business ID Integration at LY Corporation : Phased Migration for a B2B authentication platform with Tens of Millions of Users
lycorptech_jp
PRO
0
33
LINE Messaging: From Active-Standby to Active-Active Multi-DC Architecture
lycorptech_jp
PRO
0
57
LY Corporation's implementation of Confidential VM ensuring privacy for AI features
lycorptech_jp
PRO
0
78
Good Design Pays Dividends: The Evolution of LINE API Gateway Handling 30B Daily Requests
lycorptech_jp
PRO
0
48
The Path Paved by Flava MCP Hub Piping Work for the AI Era
lycorptech_jp
PRO
0
49
The Kitakyushu Data Center's Unrelenting Effort to Reduce Air Cooling Power Consumption
lycorptech_jp
PRO
0
30
Designing a Media Content Ecosystem — Case Studies on Integrating AI-Generated Content
lycorptech_jp
PRO
0
47
Other Decks in Technology
See All in Technology
はてなのサービス基盤を支える Kubernetes《足腰》
masayoshimaezawa
0
420
Text-to-SQLをAgentCoreで実現し、生成されるSQLの精度を定量的に評価する
yakumo
2
410
ループエンジニアリングでE2Eテストを実践
noriyukitakei
0
220
テスト設計の本質を改めて考えてみる~生成AIを活用する時代だからこそ、作ったテストの説明性を高めよう~
yamasaki696
1
280
Mastraエージェント、どのクラウドにデプロイする?
minorun365
PRO
2
140
デジタル・デザイン:次の50年を描く「進化する青写真」
y150saya
0
800
感情と身体を置き去りにしない、エンジニアの生きのこり方 ──いまから、ここから「自分の状態」を扱うという選択
saorimurooka
1
460
秘密度ラベル初心者が第1歩でつまづかないための「設計・運用」ポイント
seafay
PRO
1
570
cccccc
moznion
0
1.5k
Terraform 101 (初心者向け) 資料
shuadachi
0
160
product engineering with qa
nealle
0
140
AI駆動開発におけるQAエンジニアの役割事例 〜AI駆動開発の現場から〜
kobayashiyorimitsu
0
280
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
55
10k
Facilitating Awesome Meetings
lara
57
7k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
230
From π to Pie charts
rasagy
0
220
A Soul's Torment
seathinner
6
3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
340
[SF Ruby Conf 2025] Rails X
palkan
2
1.1k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
450
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.3k
Transcript
© LY Corporation © LY Corporation コーポレートサイトのアクセシビリティ改善と JIS準拠への実践 GAAD Japan
スポンサーセッション LINEヤフー株式会社 中野 信
© LY Corporation 自己紹介 • 中野 信 (なかの まこと) •
主な業務 • プロダクトのアクセシビリティの向上 • Yahoo! JAPAN UIガイドラインの運用 • デジタル庁 アクセシビリティスペシャリスト (民間専門人材) • ウェブアクセシビリティ基盤委員会 (WAIC) 作業部会1 主査
© LY Corporation コーポレートサイトのアクセシビリティ改善 • 期間:2024年5月〜2025年10月 • ポイント • プレ試験
• コンテンツ改善と実装改善 • 持続可能な運用と方針公開
© LY Corporation 目的 1. 2023年の会社の経営統合時に十分対応できなかった サイトのアクセシビリティを向上する 2. 基準を満たせるまでアクセシビリティを高めて ウェブアクセシビリティ方針を再び公開する
© LY Corporation 作業プロセスとスケジュール 1. 試験対象ページ選定 2. プレ試験 3. 改善内容の精査
4. 実装改善 5. 試験 6. 最終調整 2025/1 2025/10/14 2024/5 1 2 3 4 5 6 公開
© LY Corporation プレ試験を実施 • ウェブアクセシビリティ基盤委員会(WAIC)の 「JIS X 8341-3:2016 試験実施ガイドライン」を参考に選定
• 代表ページとして多めに100ページ以上を選んだ
© LY Corporation プレ試験で見えた課題傾向 1.3.1 1.1.1 2.4.3 その他 • 課題は3つの達成基準に集中
• 1.3.1 情報及び関係性(A) • 1.1.1 非テキストコンテンツ(A) • 2.4.3 フォーカス順序(A) • 上位3つで全体の75%以上
© LY Corporation 主な課題(構造・代替テキスト) 情報構造の課題 • 見出しのないセクション • 見出しレベルのスキップ •
段落を改行で表現 • リストがHTMLで表現されていない 画像の代替テキストの課題 • 設定されていない • 内容が伝わらない代替テキスト • 説明不足のアイコン
© LY Corporation 主な課題(フォーカス・キーボード) キーボードだけで操作できない(しづらい)箇所がいくつかあった • 操作中にフォーカスが外へ抜けるメニュー(モーダルダイアログ) • フォーカスが移動しないページ内リンク •
フォーカスが移動しない「もっと見る」リンク • 操作が複雑かつ冗長なカルーセル
© LY Corporation 改善アプローチ • 毎週改善定例を実施 • 課題・進捗を継続的にレビュー(半年程度) • 企画
/ デザイン / 開発で役割分担して対応 • 個別の修正ではなく、運用可能な改善へ
© LY Corporation 共通UIの改善 カルーセル • 一時停止ボタンを追加 • フォーカス対象を整理 メガメニュー
(グローバルメニュー) • オンフォーカス → オンクリック展開 • 展開中はフォーカスはメニュー内循環
© LY Corporation 既存コンテンツのアクセシビリティ改修 • 既存コンテンツを維持しながら改修 • 「新しいウィンドウアイコン」などの共有UIは、検索・置換・確認で改修 • 作成時期や担当者などで実装差があり、確認と修正の作業が長引いた
© LY Corporation 画像の代替テキストの改善 • 画像を「イラスト」「写真」などにパターン化 • それぞれのパターンごとに代替テキストを付与するルールを作成 • 生成AIで代替テキストを半自動生成するフローを策定
代替テキスト生成用カスタムGPT Dekashibe
© LY Corporation 方針策定と公開 • アクセシビリティ改善を継続させるために方針を整備 • 会社のポリシーと方針策定ガイドラインを元に作成 • 2025年10月14日
ウェブアクセシビリティ方針と検証結果を公開
© LY Corporation 学び • ページ選定を先に行うと関係者間の認識を合わせやすい • 共通UIを優先すると効果が大きい • 既存のコンテンツは改善コストが高い
• マニュアル化すると改善は定着する
© LY Corporation 次の一手 • 他のプロダクトも試験結果を公開できるようアクセシビリティを改善したい • 公開した瞬間からアクセシビリティが低下する状況を減らしたい
© LY Corporation © LY Corporation Thank You 17