© LY Corporation © LY Corporation ガイドラインを軸にした ウェブアクセシビリティ改善 テクノロジーエンハンスメントディビジョン Nakano Makoto / 中野 信 

© LY Corporation 自己紹介 中野 信 (なかの まこと) • LINEヤフー勤務 • プロダクトのアクセシビリティの向上 • Yahoo! JAPAN UIガイドラインの運用 • ウェブアクセシビリティ基盤委員会 (WAIC) 作業部会1 主査 2 

© LY Corporation 目次 1. LINEヤフーのアクセシビリティガイドライン 2. サポート文書 3. プロセスによるアクセシビリティ改善 4. 事例 3 

© LY Corporation LINEヤフーの アクセシビリティガイドライン 4 

© LY Corporation アクセシビリティガイドライン • WCAG 2.1 A/AAの達成基準を元にした社内ガイドライン • 文章の抽象度を下げて、達成基準を開発者が分かりやすい表現に置き換え • 社内ガイドラインに位置づけることで、開発フローにおける利用方法や優先度を規定 5 

© LY Corporation 置き換えの例 • 達成基準 1.1.1 非テキストコンテンツ • AG01: テキスト以外のコンテンツに代替テキストを提供する • 達成基準 2.1.1 キーボード • AG19: マウス操作やジェスチャー操作を使わずに、 キーボード操作だけで利用することができる 6 

© LY Corporation サポート文書 7 

© LY Corporation サポート文書とは • ガイドラインを満たすための各種情報をまとめた技術文書 • 具体的な内容の解説 • チェック方法 • 事例・実装方法 • Do / Caution / Don’t で分類 • WCAGにおける解説書と達成方法に相当する文書 8 

© LY Corporation 例: AG01のサポート文書 (設計資料) • 設計資料 (プロダクト企画時・UI設計時に配慮) • I101: 画像の代替テキストまたは説明を提供する • 画像と同等の情報をテキストで提供する • テキストは過不足がないようにする • 視覚情報や文脈から得られる情報よりも不足してはいけない 9 

© LY Corporation 例: AG01のサポート文書 (ソースコード) • ソースコード (UI実装時に配慮) • IT102: テキスト情報を提供する • alt属性で指定する • aria-labeledby属性またはaria-describedby属性を使用する • 意味のある画像を背景画像として表示しない 10 

© LY Corporation プロセスによる アクセシビリティ改善 11 

© LY Corporation アクセシビリティ改善のサイクル • チェック方法・内容の過不足をガイドライン群に反映する ガイドライン サポート文書 プロダ クト フィードバック フィードバック ガイドライン群 チェック チェック 12 

© LY Corporation アクセシビリティ改善の伴走 • UIデザイン方法の改善 • UIガイドライン、ブランドガイドライン、過去の経験など基づく改善方法 • 実装方法の改善 • WCAGの達成方法、APG (ARIA Authoring Practices Guide) などに基づく改善方法 • デザインシステムの改善 • UIコンポーネントの改善による作業効率化 13 

© LY Corporation 事例 14 

© LY Corporation デスクリサーチツール • WCAG 2.0 A相当のアクセシビリティをガイドラインを用いてWCAG 2.1 AA相当に引き上げ • UIコンポーネントのチェックと改善を先行して実施 • 順次プロダクトに反映 15 

© LY Corporation 社内プロダクト向けデザインシステム • 企画検討時からコミット • ガイドラインを用いてUIコンポーネントのフルチェックと改善を実施 • 初回のチェックは専門家が実施。2回目以降のチェックと改善はプロダクトの担当者で実施 16 

© LY Corporation プロダクトの伴走 • ポータルサイト、検索サービスなど • 定期的にコミュニケーションを取って改善方法を提案 • コーポレートサイト • JIS X 8341-3:2016 AA準拠のサポート 17 

© LY Corporation 18