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
はじめてのアクセシビリティ実践記
Search
LINEヤフーTech (LY Corporation Tech)
PRO
October 15, 2024
Technology
2
130
はじめてのアクセシビリティ実践記
「アクセシビリティLT会 #2 with Mix Leap Study」の登壇資料です
LINEヤフーTech (LY Corporation Tech)
PRO
October 15, 2024
Tweet
Share
More Decks by LINEヤフーTech (LY Corporation Tech)
See All by LINEヤフーTech (LY Corporation Tech)
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
160
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
67
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
95
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
120
LINEスキマニのフロントエンド開発にDenoを採用した理由
lycorptech_jp
PRO
0
78
「コード品質向上のテクニック」連載継続の秘訣
lycorptech_jp
PRO
0
67
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
260
Arakawa 101 Or How To Build a Data App by Python
lycorptech_jp
PRO
0
43
ドメイン駆動設計の実践により事業の成長スピードと保守性を両立するショッピングクーポン
lycorptech_jp
PRO
17
3.7k
Other Decks in Technology
See All in Technology
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
130
次世代KYC活動報告 / 20250219-BizDay17-KYC-nextgen
oidfj
0
410
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
240
人はなぜISUCONに夢中になるのか
kakehashi
PRO
6
1.7k
CDKのコードを書く環境を作りました with Amazon Q
nobuhitomorioka
1
120
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
370
分解して理解する Aspire
nenonaninu
2
500
コンピュータビジョンの社会実装について考えていたらゲームを作っていた話
takmin
1
500
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
180
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
350
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
6
1.2k
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Invisible Side of Design
smashingmag
299
50k
Become a Pro
speakerdeck
PRO
26
5.1k
Fireside Chat
paigeccino
34
3.2k
Agile that works and the tools we love
rasmusluckow
328
21k
A better future with KSS
kneath
238
17k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Music & Morning Musume
bryan
46
6.4k
Automating Front-end Workflow
addyosmani
1368
200k
Code Reviewing Like a Champion
maltzj
521
39k
Transcript
© LY Corporation LINEヤフー株式会社 コマースカンパニー ショッピング統括本部 尾崎勇一 はじめての アクセシビリティ実践記
© LY Corporation 尾崎勇一 LINEヤフー株式会社 コマースカンパニー ショッピング統括本部 2 2022年1月に旧ヤフーに中途入社 Yahoo!ショッピングの商品レビュー/ストアレビューの
開発を担当 所属はバックエンドチームですが Webフロントエンドへの技術も好きです アクセシビリティに興味を持ったきっかけは HTML5 Conference 2017でアクセシビリティのセッ ションを聞いたことです
© LY Corporation Yahoo!ショッピングの アクセシビリティ 3
© LY Corporation Yahoo!ショッピングは規模が大きく関わる人もとても多い • ショッピング統括本部所属の社員は約1000人 そのうち • エンジニアは約280人 •
デザイナーは約30人 今回のLTがいい機会だったのでアクセシビリティの取組状況についてアンケートをとってみました 4 Yahoo!ショッピングの体制
© LY Corporation 5 取り組み状況のアンケート結果 ※ショッピング統括本部所属の企画、デザイナー、エンジニアの社員が対象
© LY Corporation Yahoo!ショッピングは社内の他のサービスと比べて積極的に取り組んでいるとは言えない状況 私見としては、 • Yahoo!ショッピングのサービス規模を考えるとアクセシビリティを担保する社会的責任がある • a11yの困り事がある人に「Amazonや楽天を使ってください」でいいと思ってる人はいないはず 6
Yahoo!ショッピングがa11yに取り組む意義
© LY Corporation アクセシビリティ実践記 7
© LY Corporation 入社以来所属はバックエンドチーム 1年ほど経った頃にフロントエンドに興味があると相談 ⇒フロントエンドチームの開発を手伝えることに アクセシビリティについて興味はあったが 本番サービスでの実践は今回がはじめて 8 背景
© LY Corporation • フォーム周り • 独自UIのドロップダウン/ラジオボタン/ファイル選択 ⇒対応が必要なことは分かるが、どう対応したらいいか悩むことが多かった • 見出し周りの整理
• なぜかh1のみのページが多く全体を整理 プルリクエストに自分でコメントをつけてレビュアーにも意識してもらえるように気をつかった 9 はじめてのアクセシビリティを意識した開発
© LY Corporation なんとか対応できて満足した気分でいたが… 自分が離れた後はうまく運用されていなかった • キーボード操作できるよう頑張ったコードが消えていた • 見出しレベルがガタガタになっていた •
見た目は同じなのに片方はh3タグでもう片方はpタグなんてことも ボトムアップでのアプローチも必要だが、トップダウンでの組織レベルでの浸透も必要 10 開発のその後
© LY Corporation 企画との関わり方 • 自分のプロジェクトの担当者はアクセシビリティにあまり馴染がなかった • アクセシビリティ確保基本の「キ」を紹介してみた • https://weba11y.jp/know-how/10basics/10basics_index/
• まずは受け入れ試験でキーボード操作ができるか見てほしいとお願いしてみた できるところから一歩ずつやっていくのがよさそう 11 他職種との関わり方
© LY Corporation デザイナーとの関わり方 • デザイナーチームがアクセシビリティの意識が高いかよく分からなかった • アクセシビリティに関する話が来たことがない • 自分(開発側)で判断していい感じに対応することが多かった
• 画像のalt • キーボードインタラクション • 非同期での画面書き換え時のフォーカス等 エンジニアとデザイナーでアクセシビリティについてやりとりできるような文化にしていきたい 12 他職種との関わり方
© LY Corporation 共通UIコンポーネントのチーム • Yahoo!ショッピングの共通UIコンポーネントを提供しているチーム • アクセシビリティの意識が高くて信頼できる • アクセシビリティ改善のissueをあげたらいつも積極的に取り組んでくれる
共通部品の質が上がると間接的に全体の品質向上につながる 積極的にフィードバックして貢献したいと思えた 13 頼りになった人たち
© LY Corporation 全社横断のアクセシビリティチーム • 旧ヤフーと旧LINEのスペシャリストがあわさったチーム • 自分が作ったページが不安だった時に相談できた • 困った時に頼れる人が社内にいるのはとても心強い
ボトムアップとトップダウンの両輪で推進していくためにも頼れるところは頼っていきたい 14 頼りになった人たち
© LY Corporation
© LY Corporation