アクセシビリティ導入法〜チームの意識作りと実際の勉強方法〜 | PPT
SlideShare a Scribd company logo
アクセシビリティ導入法
チームの意識作りと実際の勉強方法
自己紹介
Self‐Introduction
野崎 達也 フロントエンドエンジニア
のっちさん
最近厄除けに行った、呪われ気味のお兄さん
戸塚 真由子 UIデザイナー
とっつー
とっつーさん→1023→10/23で覚えて下さい
アクセシビリティ導入法〜チームの意識作りと実際の勉強方法〜
アジェンダ
1. なぜA11Yを始めようと思ったか
2. REQUのA11Y目標
3. デザインとA11Y
4. これからやりたいこと
なぜA11Yを
始めようと思ったか
Why?
危機感 
やばいって思ってた
でもリリースするので精一杯だったんだよお
社内にA11Y推進グループがあり
その方々にお話を聞いた
実際今のREQUは
どうなってるんだろう?
スクリーンリーダーを利用して
購入できるかやってみた
スクリーンリーダーで
購入できなかった
・画像のURLがそのまま読まれる…
・モーダルを開いてもフォーカスされない…
・隠しボタンを見つけてしまう
画像のURLがそのまま読まれる…
下記サムネイルをクリックすると動画が再生されます
モーダルを開いてもフォーカスされない…
下記サムネイルをクリックすると動画が再生されます
隠しボタンを見つけてしまう
下記サムネイルをクリックすると動画が再生されます
でも何から手をつければ…
ということで
まず知識をつけよう!
毎週、輪読会を開催したよ
これを読みました
体系的に学べる!
デザイニングWebアクセシビリティ
Engineer Designer
A11Y改善するには
チーム全員の理解が必要
Director
PM
Engineer Designer
・全員で進めることでA11Yに対して共通認識ができ、
 企画の段階で議論できるようになった
良かったこと 
・その場でプロダクトについて話すことができ、
 改善点が見えてきた
REQUのA11Y目標
Our Objective
私達は一人でも多くのお客様がいつでも、
迷わず「買える」と「売れる」が
できる状態を目指す
優先度も決めたった 
買える
① 商品詳細ページ
② 取引メッセージ
④ 注文履歴ページ
売れる
③ 商品登録ページ
⑤ 注文管理系
Happy!
目標 :メンバー間の共通認識
優先度:改善箇所の明確化
まとめ
デザインとA11Y
Design&A11Y
Enjoy Innovation!
アクションシートを
利用した決済選択
左のサムネイルをクリックすると
動画が再生されます
スクリーンリーダで
購入できなかった
回遊枠はasideになどデザイナーだけでは
出なかったアイデアが出た
改善アイデアを一緒に議論した
新しい体験 x A11Y
改善委員会
Improvement
技術者発信でどんどん
ユーザービリティ
改善しちゃうチーム 
改善前のUI
消えるエラー 
左のサムネイルをクリックすると
動画が再生されます
フォーム直下に
エラーを表示
改善しました
これから
やりたいこと
Future
WCAG2.1の項目を
Open Amebaを参考にどこまで
対応していくか決定
https://openameba.github.io/
a11y-guidelines/
URL
インクルーシブHTML
+CSS&JavaScript
これを読みます
技術的に学べる!
最後に
Lastly
ありがとうございました

More Related Content

アクセシビリティ導入法〜チームの意識作りと実際の勉強方法〜