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
LY Corporation Tech
PRO
October 15, 2024
Technology
2
77
はじめてのアクセシビリティ実践記
「アクセシビリティLT会 #2 with Mix Leap Study」の登壇資料です
LY Corporation Tech
PRO
October 15, 2024
Tweet
Share
More Decks by LY Corporation Tech
See All by LY Corporation Tech
合併後のインフラ環境におけるアラートフローの問題点洗い出しと改善をした話
lycorptech_jp
PRO
0
16
Real World Ray
lycorptech_jp
PRO
1
35
アナリティクスエンジニアとその周辺の技術について
lycorptech_jp
PRO
1
58
풍성한 디자인 요청사항에 대응하기
lycorptech_jp
PRO
0
18
Flutter Web을 활용해 제품 개발 환경 개선하기
lycorptech_jp
PRO
0
51
Flutter Bloc 을 제품개발에 야무지게 적용하기
lycorptech_jp
PRO
0
27
テクニカルライターのチームで「目標」をどう決めたか / MVV for a Team of Technical Writers
lycorptech_jp
PRO
3
140
分析者起点の企画を成功させた連携面の工夫
lycorptech_jp
PRO
1
270
Causal Impactを用いたLINE Pay UIの効果検証とABテスト実施への貢献
lycorptech_jp
PRO
3
590
Other Decks in Technology
See All in Technology
パートナー企業のテクニカルサポートエンジニアとして気になる、より良い AWS サポートの利活用について
kazzpapa3
0
140
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
48k
プロダクト開発の貢献をアピールするための目標設計や認知活動 / Goal design and recognition activities to promote product development contributions.
oomatomo
5
1k
Binary Hacks Rebooted 私選ハック集
nullpo_head
1
330
スタサプ ForSCHOOLアプリのシンプルな設計
recruitengineers
PRO
3
770
RAG: from dumb implementation to serious results
glaforge
0
470
AWSの初級者向けAI・ML資格『AWS Certified AI Practitioner』の傾向と対策/So You Want To Pass AWS Certified AI Practitioner
quiver
0
780
KongによるAPIライフサイクル マネジメント
hashitokyo
1
140
業務ヒアリングと知識の呪い
tamai_63
0
310
Bluesky 2019〜2022
yamarten
1
110
テストを楽に書きたい
tomorrowkey
2
240
なぜ Rack を理解すべきかプレトーク / Why should you understand Rack - Pre-talk
hogelog
0
190
Featured
See All Featured
From Idea to $5000 a Month in 5 Months
shpigford
381
46k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Thoughts on Productivity
jonyablonski
67
4.2k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Designing with Data
zakiwarfel
98
5.1k
What's new in Ruby 2.0
geeforr
341
31k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Gamification - CAS2011
davidbonilla
80
5k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
The Invisible Customer
myddelton
119
13k
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