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
STORESにおけるアクセシビリティ向上の取り組み
Search
Kosuke Yamashita
December 15, 2022
Technology
0
53
STORESにおけるアクセシビリティ向上の取り組み
2022年12月15日の「事例に学ぶ、ウェブアクセシビリティ〜フロントエンド最前線〜」の「ウェブアクセシビリティにおける各社の取り組み事例」パートでのスライド
Kosuke Yamashita
December 15, 2022
Tweet
Share
More Decks by Kosuke Yamashita
See All by Kosuke Yamashita
頑張りすぎないVue.js単体テストのススメ / Vue.js unit testing that does not work too hard
kskymst
1
550
事業成長を加速させるフロントエンド改善のお話
kskymst
7
5.8k
Other Decks in Technology
See All in Technology
ソフトウェア開発現代史: なぜ日本のソフトウェア開発は「滝」なのか?製造業の成功体験とのギャップ #jassttokyo
takabow
2
1.6k
Cline、めっちゃ便利、お金が飛ぶ💸
iwamot
19
18k
大規模サービスにおける カスケード障害
takumiogawa
1
210
お問い合わせ対応の改善取り組みとその進め方
masartz
1
370
バクラクでのSystem Risk Records導入による変化と改善の取り組み/Changes and Improvement Initiatives Resulting from the Implementation of System Risk Records
taddy_919
0
220
RAGの基礎から実践運用まで:AWS BedrockとLangfuseで実現する構築・監視・評価
sonoda_mj
0
440
コンソールで学ぶ!AWS CodePipelineの機能とオプション
umekou
2
110
「家族アルバム みてね」を支えるS3ライフサイクル戦略
fanglang
0
170
AWS CDK コントリビュート はじめの一歩
yendoooo
1
120
Javaの新しめの機能を知ったかぶれるようになる話 #kanjava
irof
3
4.9k
ISUCONにPHPで挑み続けてできるようになっ(てき)たこと / phperkaigi2025
blue_goheimochi
0
140
AIエージェント完全に理解した
segavvy
4
270
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
Code Reviewing Like a Champion
maltzj
522
39k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
500
Optimizing for Happiness
mojombo
377
70k
Designing for Performance
lara
606
69k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Pragmatic Product Professional
lauravandoore
33
6.5k
Building Adaptive Systems
keathley
41
2.5k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
Practical Orchestrator
shlominoach
187
10k
Transcript
STORES 株式会社 STORES における アクセシビリティ向上の取り組み 2022.12.15 事例に学ぶ、ウェブアクセシビリティ〜フロントエンド最前線〜
STORES について
STORES の事業 お店のデジタルを まるっとサポート。 個人や中小事業の方々に向けて、 お店のデジタル化をまるっと 実現できる価値を提供しています。
サービス 自分でつくれる、 本格的なネットショップ むずかしい知識や技術いらずで 自分だけのネットショップをかんたんに。
きっかけ
• 「スクリーンリーダーでの操作で購入ができない」という問い合わせから • 実際にスクリーンリーダー & キーボード操作のみで購入を試みる ◦ 購入完了まで進められない ◦ 時間を掛ければ操作を進められるがスムーズにはいかない
• 社内のメンバーもアクセシビリティをもっと意識していくべきだが全然でき てないというメンバーが多かった ◦ ワーキンググループを作りアクセシビリティ向上の取り組みを本格的に スタート きっかけ
浸透までの取り組み
目標と計画 学習 実践 運用 • 「アクセシビリティについてUIと同じように(UIの一部として)会話できる ようになっていること」を目標 • 知見が深いメンバーもいなかったため、学習、実践、運用のステップで各メ ンバーの足並みを揃えつつ進行
学習 • アクセシビリティの全体像を掴むために勉強会を開催 ◦ 1回30~60分で各回テーマと担当を決め、全6回開催 ▪ 第1回 アクセシビリティとは、ハンディキャップ、支援技術、4つの原則 ▪ 第2回
WCAGを読み解き、アクセシビリティを阻む問題と解決方法を俯瞰してみよう ▪ 第3回 ボタン、メニューの実装 ▪ 第4回 アクセシビリティチェックツールでデバッグや検査を進めよう ▪ 第5回 モーダルの実装 ▪ 第6回 アクセシビリティガイドラインとチェックリスト • 外部からアクセシビリティ有識者をお招きして対応方針のアドバイスを頂く
• ショップの購入フローをガイドラインに基づいてアクセシビリティチェック &改善実装 ◦ 商品を探す → カートに入れる → 購入者情報入力&支払い方法入力 →
購入完了 • freee社のアクセシビリティガイドラインとチェックリストを使用させて頂 いた ◦ 導入の詳細については弊社プロダクトブログの freee 社のアクセシビリティガイドラインとチェッ クリストを丸ごと導入した に記載 実践 freee アクセシビリティー・チェック・リスト: https://a11y-guidelines.freee.co.jp/checks/index.html
• アクセシビリティのチェックを行いNGだったものをIssue化 ◦ Issue化されたものの解決策をフロントエンド & デザイナーで議論 ◦ チェックを一通り終えたらそのIssueを対応していく • フロントエンドチームでは以前から月に1日メンバー全員で負債を解消する
「大改善Day」と取り組みを行っていたため、そこで対応 • 半年ほど行い100近くのIssueを消化(未解決なものも一部あり) 実践 購入フローが改善され、メンバーもアクセシビリティのチェックと修正を経験
• 普段の開発フローに取り込んでいく ◦ 新規開発のページから開始 • ルール化、仕組み化 ◦ ガイドラインは引き続き freee社のガイドライン、チェックリストを使用 ◦
PRにチェックリストを導入 ▪ ガイドラインから一部まとめたもの ◦ Lintの導入 ▪ eslint-plugin-vuejs-accessibility • 土台作り ◦ デザインシステム、コンポーネントライブラリのアクセシビリティチェックとIssueの起票 運用
これから
やりたいこと & 課題はたくさん • 既存ページ、コンポーネントの改善 • E2Eを用いたチェックの一部自動化 • アクセシビリティを向上するユーザー向け機能 ◦
ex: 挿入する画像にALTを設定できるようにする • プラットフォームとしての体験の統一 • ..etc これから