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
75
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
600
事業成長を加速させるフロントエンド改善のお話
kskymst
7
5.8k
Other Decks in Technology
See All in Technology
o11yで育てる、強い内製開発組織
_awache
3
120
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
150
実装で解き明かす並行処理の歴史
zozotech
PRO
1
340
Goにおける 生成AIによるコード生成の ベンチマーク評価入門
daisuketakeda
2
100
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
340
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
0
100
20250929_QaaS_vol20
mura_shin
0
110
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
320
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
900
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
420
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
130
extension 現場で使えるXcodeショートカット一覧
ktombow
0
210
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
We Have a Design System, Now What?
morganepeng
53
7.8k
The Cult of Friendly URLs
andyhume
79
6.6k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
The World Runs on Bad Software
bkeepers
PRO
71
11k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
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 これから