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
68
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
590
事業成長を加速させるフロントエンド改善のお話
kskymst
7
5.8k
Other Decks in Technology
See All in Technology
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
2
770
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
430
AI時代の経営、Bet AI Vision #BetAIDay
layerx
PRO
1
1.7k
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
3
250
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
25
11k
Rubyの国のPerlMonger
anatofuz
3
730
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする~遊びやすさと競技性の両立~
cygames
PRO
1
290
Google Cloud で学ぶデータエンジニアリング入門 2025年版 #GoogleCloudNext / 20250805
kazaneya
PRO
11
2.7k
SRE新規立ち上げ! Hubbleインフラのこれまでと展望
katsuya0515
0
160
KubeCon + CloudNativeCon Japan 2025 Recap
donkomura
0
160
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
0
280
Findy Freelance 利用シーン別AI活用例
ness
0
300
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Building an army of robots
kneath
306
45k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Unsuck your backbone
ammeep
671
58k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Being A Developer After 40
akosma
90
590k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
750
Practical Orchestrator
shlominoach
190
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
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 これから