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
4
Real World Ray
lycorptech_jp
PRO
1
35
アナリティクスエンジニアとその周辺の技術について
lycorptech_jp
PRO
1
58
풍성한 디자인 요청사항에 대응하기
lycorptech_jp
PRO
0
18
Flutter Web을 활용해 제품 개발 환경 개선하기
lycorptech_jp
PRO
0
50
Flutter Bloc 을 제품개발에 야무지게 적용하기
lycorptech_jp
PRO
0
26
テクニカルライターのチームで「目標」をどう決めたか / 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
地域DXにおけるGrafana活用事例
wacky
0
340
Cosmos DB で持続可能な RAG を実現しよう!~ AOAI Dev Day ふりかえりを添えて / Sustainable RAG with Cosmos DB with recap AOAI Dev Day
miyake
0
150
多数のWebサービスをECS/Fargate構成で効率よく構築・運用するなら copilot-cli
interu
2
120
小さな勉強会の始め方、広げ方、あるいは友達の作り方 / How to Start, Grow, and Build Connections with Small Study Groups
ar_tama
6
3.2k
【㈱アイモバイル】エンジニア向け会社説明資料
imobile
0
480
Japan AWS Jr. Championsがお届けする、アウトプットのすすめ
hamijay_cloud
0
170
運営11年目タイトルを守る最強の盾の有効性と活用法
mixi_engineers
PRO
2
110
シェルとPerlの使い分け、 そういった思考の道具は、どこから来て、どこへゆくのか?v1.1.0
fmlorg
0
670
さくっと実践!Postmanを活用した高品質で持続可能なAPI管理
yokawasa
5
300
コード✕AIーソフトウェア開発者のための生成AI実践入門~
yuhattor
4
920
ゼロから実装まで!機械学習入門
natsuki0726
0
230
データ分析基盤のためにS3を深堀りする~アーキテクチャ設計の考え方のヒントに~
nrinetcom
PRO
1
550
Featured
See All Featured
Designing Experiences People Love
moore
138
23k
What the flash - Photography Introduction
edds
67
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
240
Side Projects
sachag
452
42k
Building Your Own Lightsaber
phodgson
102
6k
From Idea to $5000 a Month in 5 Months
shpigford
381
46k
Faster Mobile Websites
deanohume
304
30k
Designing the Hi-DPI Web
ddemaree
280
34k
Ruby is Unlike a Banana
tanoku
96
11k
Into the Great Unknown - MozCon
thekraken
31
1.4k
How to Think Like a Performance Engineer
csswizardry
17
1k
No one is an island. Learnings from fostering a developers community.
thoeni
19
2.9k
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