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
65
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
580
事業成長を加速させるフロントエンド改善のお話
kskymst
7
5.8k
Other Decks in Technology
See All in Technology
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
390
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
150
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
530
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.7k
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
320
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
110
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Thoughts on Productivity
jonyablonski
69
4.7k
Building Adaptive Systems
keathley
43
2.7k
The Pragmatic Product Professional
lauravandoore
35
6.7k
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 これから