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
49
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
540
事業成長を加速させるフロントエンド改善のお話
kskymst
7
5.8k
Other Decks in Technology
See All in Technology
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
180
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
110
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.6k
分解して理解する Aspire
nenonaninu
2
1.1k
Fraxinus00tw assembly manual
fukumay
0
110
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
160
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
140
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
110
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.8k
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
180
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
170
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
650
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
It's Worth the Effort
3n
184
28k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Typedesign – Prime Four
hannesfritz
40
2.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Invisible Side of Design
smashingmag
299
50k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
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 これから