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
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
470
Business ID Integration at LY Corporation : Phased Migration for a B2B authentication platform with Tens of Millions of Users
lycorptech_jp
PRO
0
32
LINE Messaging: From Active-Standby to Active-Active Multi-DC Architecture
lycorptech_jp
PRO
0
54
LY Corporation's implementation of Confidential VM ensuring privacy for AI features
lycorptech_jp
PRO
0
74
Good Design Pays Dividends: The Evolution of LINE API Gateway Handling 30B Daily Requests
lycorptech_jp
PRO
0
44
The Path Paved by Flava MCP Hub Piping Work for the AI Era
lycorptech_jp
PRO
0
46
The Kitakyushu Data Center's Unrelenting Effort to Reduce Air Cooling Power Consumption
lycorptech_jp
PRO
0
27
Designing a Media Content Ecosystem — Case Studies on Integrating AI-Generated Content
lycorptech_jp
PRO
0
46
Other Decks in Technology
See All in Technology
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
11k
背中から、背中へ /paying forward to community
naitosatoshi
0
210
ループエンジニアリングでE2Eテストを実践
noriyukitakei
0
190
スタートアップにおけるアジャイルの実践について #shibuyagile
murabayashi
3
1.9k
本当の”仕事”を手放せる未来が見えた
mu7889yoon
0
210
AI・ロボティクスと自動化社会 / AI, Robotics, and the Automated Society
ks91
PRO
0
140
Microsoft のサポートとフィードバック総まとめ
murachiakira
PRO
0
140
從觀望到全公司落地:AI Agentic Coding 導入實戰 — 流程整合與安全治理
appleboy
1
530
テスト設計の本質を改めて考えてみる~生成AIを活用する時代だからこそ、作ったテストの説明性を高めよう~
yamasaki696
1
270
デジタル・デザイン:次の50年を描く「進化する青写真」
y150saya
0
780
5分でわかるDuckDB Quack
chanyou0311
4
300
AIに「使われる」時代のSaaS戦略 〜既存WebAPIのMCPサーバー化における開発ノウハウ〜
ekispert_api
0
260
Featured
See All Featured
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.6k
A designer walks into a library…
pauljervisheath
211
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.5k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.3k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
760
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
180
Large-scale JavaScript Application Architecture
addyosmani
515
110k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
350
Making Projects Easy
brettharned
120
6.7k
For a Future-Friendly Web
brad_frost
183
10k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
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