Slide 1

Slide 1 text

© LY Corporation 2025/12/06 アクセシビリティカンファレンス福岡 2025 ⾼宮 ⼀樹 Yahoo! JAPANトップページ 〜アクセシビリティのせかいをつなぐ〜

Slide 2

Slide 2 text

© LY Corporation 2 今⽇お話しすること はじめに LINEヤフーのアクセシビリティ Yahoo! JAPAN トップページの アクセシビリティ つなげて⾒えた「せかい」 つなげたい「せかい」

Slide 3

Slide 3 text

© LY Corporation 3 ⾃⼰紹介 ⾼宮 ⼀樹 Kazuki Takamiya LINEヤフー株式会社所属 2023年⼊社 (新卒) # Yahoo! JAPAN トップページWeb開発 # トップページアクセシビリティ推進 リード # 1年前までアクセシビリティ初⼼者

Slide 4

Slide 4 text

© LY Corporation 4 今⽇お話しすること はじめに LINEヤフーのアクセシビリティ Yahoo! JAPAN トップページの アクセシビリティ つなげて⾒えた「せかい」 つなげたい「せかい」

Slide 5

Slide 5 text

© LY Corporation • アクセシビリティガイドラインの策定 • サービスと伴⾛する形でのサポート活動 • 各サービスからの問い合わせ対応 • 社内外での情報発信…など 5 全社アクセシビリティチームが主導 LINEヤフーのアクセシビリティ 全社横断の「アクセシビリティチーム」が存在

Slide 6

Slide 6 text

© LY Corporation LINEヤフーのアクセシビリティガイドラインが 2024年11⽉20⽇に施⾏ WCAG(Web Content Accessibility Guidelines)2.1 の 適合レベルAとAAの達成基準を元に読みやすく書き直されたガイドライン 対応の保留は許容しつつも、原則達成を義務付け 強制⼒を持つものとして位置づけている 6 アクセシビリティチームが主導 LINEヤフーのアクセシビリティガイドライン

Slide 7

Slide 7 text

© LY Corporation 7 LINEギフトでの取り組み 2024年の「アクセシビリティカンファレンス福岡」での登壇

Slide 8

Slide 8 text

© LY Corporation 8 今⽇お話しすること はじめに LINEヤフーのアクセシビリティ Yahoo! JAPAN トップページの アクセシビリティ つなげて⾒えた「せかい」 つなげたい「せかい」

Slide 9

Slide 9 text

© LY Corporation 9 1年間の活動の中で出会った「せかい」 Yahoo! JAPANトップページでのアクセシビリティ HTMLの せかい アクセ シビリティ のせかい デザイナー 企画の せかい 初⼼者の せかい デザイン システムの せかい AIのせかい

Slide 10

Slide 10 text

© LY Corporation ポータルサイト「Yahoo! JAPAN」 あなたの毎⽇をアップデートする情報ポータル。検索、ニュース、天気、スポーツ、メール、 ショッピング、オークションなど便利なサービスを展開しています 10 Yahoo! JAPAN トップページ アクセシビリティのせかい ※ 2025年11⽉時点 ※ 2025年11⽉時点

Slide 11

Slide 11 text

© LY Corporation 11 はじめの⼀歩としての「ガイドライン」と「チェックリスト」 アクセシビリティのせかい 2024年11⽉:アクセシビリティガイドライン施⾏ 2024年12⽉:トップページでの取り組みが開始 ⼀体どこから始めれば……?

Slide 12

Slide 12 text

© LY Corporation 12 はじめの⼀歩としての「ガイドライン」と「チェックリスト」 アクセシビリティのせかい ⼀体どこから始めれば……? 2024年12⽉:トップページでの取り組みが開始 ガイドラインの読み合わせ チェックリストを使った洗い出し

Slide 13

Slide 13 text

© LY Corporation 13 奥が深いHTML HTMLのせかい HTML = UIなど⾒た⽬や構造の実装に必要なもの? HTMLはUIを実装するだけのものではない • 適切に実装を⾏うことで、⽀援技術に情報を伝えている • DOMツリーだけではなく、アクセシビリティツリーが存在している 書籍やドキュメントで、HTMLの仕様を確認するように

Slide 14

Slide 14 text

© LY Corporation 14 エンジニアだけでは解決できない デザイナー・企画のせかい 2024年度:有志のエンジニアで取り組みをスタート 2025年度:デザイナー・企画・エンジニアからそれぞれ参加する形に 職種間の連携を深めながら改善活動に取り組み中 詳細な仕様や要件 エンジニアだけでは把握しきれない ⾊や⽂字サイズ、画像やUIのデザイン意図 エンジニアだけでは判断できない

Slide 15

Slide 15 text

© LY Corporation 15 「せかい」をつなげるきっかけ アクセシビリティ初⼼者のせかい 取り組みの機運が⾼まったが、実⾏してみると課題が顕在化 例)過剰な代替テキストで上書き リンク • アクセシブルネームが上書きされ、代替テキストが過剰になっていた • HTMLタグとは異なるセマンティクスがaria-label属性で追加されていた • 読み上げ⽤の読み仮名がaria-label属性で設定されていた……など • 例)「3D」にaria-label属性で「スリーディー」が付与 例)aria-labelでセマンティクスを追加 ※例は説明⽬的の擬似的なサンプルです

Slide 16

Slide 16 text

© LY Corporation 16 「せかい」をつなげるきっかけ アクセシビリティ初⼼者のせかい 取り組みの機運が⾼まったが、実⾏してみると課題が顕在化 例)過剰な代替テキストで上書き 例)aria-labelでセマンティクスを追加 ナレッジを共有していくだけでなく、⼟台を整えていく必要を感じる • 個⼈のスキルや知識に依存しないシステムの構築 • 横断的にサポートする仕組み

Slide 17

Slide 17 text

© LY Corporation 17 1年間の活動の中で出会った「せかい」 Yahoo! JAPANトップページでのアクセシビリティ HTMLの せかい アクセ シビリティ のせかい デザイナー 企画の せかい 初⼼者の せかい デザイン システムの せかい AIのせかい

Slide 18

Slide 18 text

© LY Corporation 18 これからつなげたい「せかい」 デザインシステムのせかい デザイントークンの中で ⾃然とアクセシビリティが担保される仕組みを作っていく トップページ内のデザインシステムと連携 • トップページ内にデザインシステムが存在 • アクセシビリティの取り組みが別で進んでしまったことで連携が疎

Slide 19

Slide 19 text

© LY Corporation 19 これからつなげたい「せかい」 AIのせかい • 量も多く、特に初⼼者には認知負荷が⾼い • 具体的なイメージが持てないと対応も進めづらい アクセシビリティのルールにある課題 アクセシビリティのルールをデザインシステムのガイドラインに組み込む それをソースとして、AIがドメイン知識を持って回答する環境を作っていく 認知負荷を減らして、職種を横断して取り組みを展開 アクセシビリティが当たり前の「せかい」へつなげていく

Slide 20

Slide 20 text

© LY Corporation 20 つながることで⾒えるせかい まとめ・さいごに 「せかい」が広がる アクセシビリティ初⼼者 「アクセシビリティのせかい」とつながる Yahoo! JAPAN トップページで、アクセシビリティに取り組む 「せかい」を広げてつなげることに貢献できるのではないか アクセシビリティやっていきます!ご期待ください!

Slide 21

Slide 21 text

© LY Corporation Thank You!