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
170
はじめてのアクセシビリティ実践記
「アクセシビリティ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)
Step by Step: 生成AIアプリケーション開発入門
lycorptech_jp
PRO
0
110
LINEギフトのLINEミニアプリアクセシビリティ改善事例
lycorptech_jp
PRO
1
380
ウェブアクセシビリティとは
lycorptech_jp
PRO
1
380
Head toward Java 24 (JVM)
lycorptech_jp
PRO
0
130
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
580
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
1.5k
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
1.8k
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
1.7k
LINEスキマニのフロントエンド開発にDenoを採用した理由
lycorptech_jp
PRO
0
130
Other Decks in Technology
See All in Technology
LiteXとオレオレCPUで作る自作SoC奮闘記
msyksphinz
0
660
Terraform Cloudで始めるおひとりさまOrganizationsのすゝめ
handy
2
180
Automatically generating types by running tests
sinsoku
2
3.2k
AWS Control Towerを 数年運用してきての気づきとこれから/aws-controltower-ops-tips
tadayukinakamura
0
160
Running JavaScript within Ruby
hmsk
3
330
Recap of Next - Google Cloud で実践する クラウドネイティブ最前線 / The Frontlines of Cloud-Native with Insights from Google Cloud
aoto
PRO
1
100
AIで進化するソフトウェアテスト:mablの最新生成AI機能でQAを加速!
mfunaki
0
140
Cursor AgentによるパーソナルAIアシスタント育成入門―業務のプロンプト化・MCPの活用
os1ma
14
4.8k
Would you THINK such a demonstration interesting ?
shumpei3
1
220
4/16/25 - SFJug - Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
2
110
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
nikkei_engineer_recruiting
0
380
SmartHR プロダクトエンジニア求人ガイド_2025 / PdE job guide 2025
smarthr
0
130
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
RailsConf 2023
tenderlove
30
1.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Practical Orchestrator
shlominoach
186
11k
Why Our Code Smells
bkeepers
PRO
336
57k
How to Ace a Technical Interview
jacobian
276
23k
Into the Great Unknown - MozCon
thekraken
37
1.7k
KATA
mclloyd
29
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Making Projects Easy
brettharned
116
6.1k
Optimising Largest Contentful Paint
csswizardry
36
3.2k
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