Yahoo! JAPANトップページ〜アクセシビリティのせかいをつなぐ〜

2025年12月6日に行われた「アクセシビリティカンファレンス福岡2025」で使用した資料です。
Yahoo! JAPANトップページでのアクセシビリティの取り組みについて紹介します。
#fukuoka_a11yconf

Transcript

1. © LY Corporation 2025/12/06 アクセシビリティカンファレンス福岡 2025 ⾼宮 ⼀樹 Yahoo! JAPANトップページ 〜アクセシビリティのせかいをつなぐ〜
2. © LY Corporation 2 今⽇お話しすること はじめに LINEヤフーのアクセシビリティ Yahoo! JAPAN トップページの アクセシビリティ つなげて⾒えた「せかい」 つなげたい「せかい」
3. © LY Corporation 3 ⾃⼰紹介 ⾼宮 ⼀樹 Kazuki Takamiya LINEヤフー株式会社所属 2023年⼊社 (新卒) # Yahoo! JAPAN トップページWeb開発 # トップページアクセシビリティ推進 リード # 1年前までアクセシビリティ初⼼者
4. © LY Corporation 4 今⽇お話しすること はじめに LINEヤフーのアクセシビリティ Yahoo! JAPAN トップページの アクセシビリティ つなげて⾒えた「せかい」 つなげたい「せかい」
5. © LY Corporation • アクセシビリティガイドラインの策定 • サービスと伴⾛する形でのサポート活動 • 各サービスからの問い合わせ対応 • 社内外での情報発信…など 5 全社アクセシビリティチームが主導 LINEヤフーのアクセシビリティ 全社横断の「アクセシビリティチーム」が存在
6. © LY Corporation LINEヤフーのアクセシビリティガイドラインが 2024年11⽉20⽇に施⾏ WCAG（Web Content Accessibility Guidelines）2.1 の 適合レベルAとAAの達成基準を元に読みやすく書き直されたガイドライン 対応の保留は許容しつつも、原則達成を義務付け 強制⼒を持つものとして位置づけている 6 アクセシビリティチームが主導 LINEヤフーのアクセシビリティガイドライン
7. © LY Corporation 7 LINEギフトでの取り組み 2024年の「アクセシビリティカンファレンス福岡」での登壇
8. © LY Corporation 8 今⽇お話しすること はじめに LINEヤフーのアクセシビリティ Yahoo! JAPAN トップページの アクセシビリティ つなげて⾒えた「せかい」 つなげたい「せかい」
9. © LY Corporation 9 1年間の活動の中で出会った「せかい」 Yahoo! JAPANトップページでのアクセシビリティ HTMLの せかい アクセ シビリティ のせかい デザイナー 企画の せかい 初⼼者の せかい デザイン システムの せかい AIのせかい
10. © LY Corporation ポータルサイト「Yahoo! JAPAN」 あなたの毎⽇をアップデートする情報ポータル。検索、ニュース、天気、スポーツ、メール、 ショッピング、オークションなど便利なサービスを展開しています 10 Yahoo! JAPAN トップページ アクセシビリティのせかい ※ 2025年11⽉時点 ※ 2025年11⽉時点
11. © LY Corporation 11 はじめの⼀歩としての「ガイドライン」と「チェックリスト」 アクセシビリティのせかい 2024年11⽉：アクセシビリティガイドライン施⾏ 2024年12⽉：トップページでの取り組みが開始 ⼀体どこから始めれば……？
12. © LY Corporation 12 はじめの⼀歩としての「ガイドライン」と「チェックリスト」 アクセシビリティのせかい ⼀体どこから始めれば……？ 2024年12⽉：トップページでの取り組みが開始 ガイドラインの読み合わせ チェックリストを使った洗い出し
13. © LY Corporation 13 奥が深いHTML HTMLのせかい HTML = UIなど⾒た⽬や構造の実装に必要なもの？ HTMLはUIを実装するだけのものではない • 適切に実装を⾏うことで、⽀援技術に情報を伝えている • DOMツリーだけではなく、アクセシビリティツリーが存在している 書籍やドキュメントで、HTMLの仕様を確認するように
14. © LY Corporation 14 エンジニアだけでは解決できない デザイナー・企画のせかい 2024年度：有志のエンジニアで取り組みをスタート 2025年度：デザイナー・企画・エンジニアからそれぞれ参加する形に 職種間の連携を深めながら改善活動に取り組み中 詳細な仕様や要件 エンジニアだけでは把握しきれない ⾊や⽂字サイズ、画像やUIのデザイン意図 エンジニアだけでは判断できない
15. © LY Corporation 15 「せかい」をつなげるきっかけ アクセシビリティ初⼼者のせかい 取り組みの機運が⾼まったが、実⾏してみると課題が顕在化 例）過剰な代替テキストで上書き <a aria-label=“リンク先に遷移して詳細を確 認する” href=“…”>リンク</a> • アクセシブルネームが上書きされ、代替テキストが過剰になっていた • HTMLタグとは異なるセマンティクスがaria-label属性で追加されていた • 読み上げ⽤の読み仮名がaria-label属性で設定されていた……など • 例）「3D」にaria-label属性で「スリーディー」が付与 例）aria-labelでセマンティクスを追加 <section aria-label=“⾒出し”> </section> ※例は説明⽬的の擬似的なサンプルです
16. © LY Corporation 16 「せかい」をつなげるきっかけ アクセシビリティ初⼼者のせかい 取り組みの機運が⾼まったが、実⾏してみると課題が顕在化 例）過剰な代替テキストで上書き 例）aria-labelでセマンティクスを追加 ナレッジを共有していくだけでなく、⼟台を整えていく必要を感じる • 個⼈のスキルや知識に依存しないシステムの構築 • 横断的にサポートする仕組み
17. © LY Corporation 17 1年間の活動の中で出会った「せかい」 Yahoo! JAPANトップページでのアクセシビリティ HTMLの せかい アクセ シビリティ のせかい デザイナー 企画の せかい 初⼼者の せかい デザイン システムの せかい AIのせかい
18. © LY Corporation 18 これからつなげたい「せかい」 デザインシステムのせかい デザイントークンの中で ⾃然とアクセシビリティが担保される仕組みを作っていく トップページ内のデザインシステムと連携 • トップページ内にデザインシステムが存在 • アクセシビリティの取り組みが別で進んでしまったことで連携が疎
19. © LY Corporation 19 これからつなげたい「せかい」 AIのせかい • 量も多く、特に初⼼者には認知負荷が⾼い • 具体的なイメージが持てないと対応も進めづらい アクセシビリティのルールにある課題 アクセシビリティのルールをデザインシステムのガイドラインに組み込む それをソースとして、AIがドメイン知識を持って回答する環境を作っていく 認知負荷を減らして、職種を横断して取り組みを展開 アクセシビリティが当たり前の「せかい」へつなげていく
20. © LY Corporation 20 つながることで⾒えるせかい まとめ・さいごに 「せかい」が広がる アクセシビリティ初⼼者 「アクセシビリティのせかい」とつながる Yahoo! JAPAN トップページで、アクセシビリティに取り組む 「せかい」を広げてつなげることに貢献できるのではないか アクセシビリティやっていきます！ご期待ください！
21. © LY Corporation Thank You!