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.3k
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)
単一Gitリポジトリから独立しました
lycorptech_jp
PRO
0
72
Java, Go, Rustのメモリ管理手法の比較
lycorptech_jp
PRO
0
110
大規模PaaSにおける監視基盤の構築と効率化の道のり
lycorptech_jp
PRO
0
180
OTel meets Wasm: プラグイン機構としてのWebAssemblyから見る次世代のObservability
lycorptech_jp
PRO
1
300
令和最新版TypeScriptでのnpmパッケージ開発
lycorptech_jp
PRO
0
110
チェックツールを導入したけど使ってもらえなかった話 #GAADjp
lycorptech_jp
PRO
1
180
Step by Step: 生成AIアプリケーション開発入門
lycorptech_jp
PRO
1
200
LINEギフトのLINEミニアプリアクセシビリティ改善事例
lycorptech_jp
PRO
2
430
ウェブアクセシビリティとは
lycorptech_jp
PRO
1
430
Other Decks in Technology
See All in Technology
Introduction to Bill One Development Engineer
sansan33
PRO
0
240
金融システムをモダナイズするためのAmazon Elastic Kubernetes Service(EKS)ノウハウ大全
daitak
0
120
新卒から4年間、20年もののWebサービスと向き合って学んだソフトウェア考古学 - PHPカンファレンス新潟2025 / new graduate 4year software archeology
oguri
2
360
Cursor Meetup Tokyo
iamshunta
2
470
AIオンボーディングとAIプロセスマイニング
nrryuya
5
1.3k
LT:組込み屋さんのオシロが壊れた!
windy_pon
0
420
FastMCPでSQLをチェックしてくれるMCPサーバーを自作してCursorから動かしてみた
nayuts
1
210
技術書典18結果報告
mutsumix
2
180
大手企業のAIツール導入の壁を越えて:サイバーエージェントのCursor活用戦略
gunta
19
4.4k
それでもぼくらは貢献をつづけるのだ(たぶん) @FOSS4GLT会#002
furukawayasuto
1
280
Data Hubグループ 紹介資料
sansan33
PRO
0
1.7k
ゴリラ.vim #36 ~ Vim x SNS ~ スポンサーセッション
yasunori0418
1
350
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Designing Experiences People Love
moore
142
24k
Agile that works and the tools we love
rasmusluckow
329
21k
Documentation Writing (for coders)
carmenintech
71
4.8k
Producing Creativity
orderedlist
PRO
346
40k
Practical Orchestrator
shlominoach
188
11k
Git: the NoSQL Database
bkeepers
PRO
430
65k
What's in a price? How to price your products and services
michaelherold
245
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Unsuck your backbone
ammeep
671
58k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
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