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
ゆめみのアクセシビリティの現在地と今後
Search
ryokatsuse
July 17, 2024
Technology
4
2.2k
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
July 17, 2024
Tweet
Share
More Decks by ryokatsuse
See All by ryokatsuse
友達ではなく仲間とはなにか? 〜『映像研には手を出すな!』から学ぶ仕事の取り組み方〜
ryokatsuse
0
430
shadcn/uiで考えるコンポーネント設計
ryokatsuse
6
1.8k
Other Decks in Technology
See All in Technology
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
250
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
250
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
250
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
260
Agile PBL at New Grads Trainings
kawaguti
PRO
1
440
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
290
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
460
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
490
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
300
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
What's in a price? How to price your products and services
michaelherold
246
12k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Invisible Side of Design
smashingmag
301
51k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Unsuck your backbone
ammeep
671
58k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
For a Future-Friendly Web
brad_frost
180
9.9k
Transcript
ゆめみのアクセシビリティ の現在地と今後 YUMEMI.grow アクセシビリティLT会 2024/07/16
自己紹介 X Infixer(Ryo Katsuse5 X 株式会社ゆめ8 X フロントエンドエンジニW X 放送大学3年
X アウトプッ% X X(Twitter X Cosense(旧scrapbox5 X ブロÅ X GitHub
お品書き $ ゆめみについ' $ これまでのゆめみのアクセシビリティの取り組 $ 今後のアクセシビリティ活動について
ゆめみについて 国内にとどまらずグローバルに展開するWebサービスに必要な、 サービスデザイン・システム構築・運用・改善など様々な課題解決をサポートしています。
ゆめみオープンハンドブック R 詳しくはゆめみオープンハンドブックをご確認 くださいQ R ゆめみの制度やどういう環境なのかを公開して います。 ゆめみオープンハンドブック
結論からいうと まだまだ社内的にも対外的に アクセシビリティやっていきとは言えません
これまでのアクセシビリティの取り組み a 時を遡ること4年前...W a Webアクセシビリティ勉強会が行われていG a スクリーンリーダー体験な# a WCAG2.1を読む輪読会が開催された
その後ここ最近まで目立ったアクセシビリティ活動は なかったような
いやそんなことはない!!! ` 最近また活発化してきP ` アクセシビリティへの第一歩〜JISを読も2 ` ゆるアクセシビリティ雑談' ` デジタル庁のアクセシビリティガイドライン輪読' `
Webアプリケーションアクセシビリティ輪読' ` あなたの知らないアクセシビリティの世界
「ゆるアクセシビリティ雑談会」を社内開催した話 ゆるアクセシビリティ雑談会
デジタル庁のアクセシビリティガイドライン輪読会 デジタル庁『ウェブアクセシビリティ導入ガイドブック』の輪読会を完走しました!
書籍『Webアプリケーションアクセシビリティ』輪読会の完走とその効果 Webアプリケーションアクセシビリティ輪読会
あなたの知らないアクセシビリティの世界 g フロントエンドエンジニア、デザイナー、広報、営業、PMを交えてアクセシビリ ティに関して徹底討論す4 g アクセシビリティを伝えたい人とアクセシビリティに興味ある人に別れて議論す4 g エンジニア以外の職種と議論することでとても有意義な議論ができた
話をしたテーマ
ここまでみてきて 8 ゆめみは、元々アクセシビリティに興味ある人が何かしら活動していV 8 内部的には各々アクセシビリティをやっていき!をしているようにみえD 8 しかし全体に浸透しているとは言い難A 8 各々で行っていることで情報共有ができていない なので社内的にも対外的にはアクセシビリティを取り組んでいますと言えない。言いたい
ゆめみはクライアントワークではあるものの、作って終わりの集団ではない q 作って終わりではなく、そのまま作ったアプリケーションを運用までしてい} q エンジニア、デザイナー、PMなどそれぞれの職位ごとで作るアプリケーションに対して、最高の価値 提供・品質にしたいと思っている(ユーザビリティa q これって世に出してしまうとまずいよねという認識力はあ q しかし胸を張ってアクセシビリティ対応しますと、お客様に提案できていない状況になってい
q アクセシビリティとの向き合い方が分からない
何故できていないのか 6 ゆめみの中で言語化できていな 6 言語化できていないということは当然説明できな 6 言語化できていないということは当然で社内で浸透しな 6 スキル不足(一部の人への偏り 6
平準化できていな 6 ということを伝えていきたい。 「アクセシビリティがすべての土台・基盤であり、ユーザビリティはその基盤の上に成り立つもの だ!」
今後やっていくこと
ステップごとに小さく少しずつ始めたい STEP1 浸透・学習 STEP2 行動 STEP3 実践
STEP1:浸透・学習 t アクセシビリティを自分ごとに捉えることのできる人を増やしていx t 先人の知恵を借りる t ディーゼロさ8 t SmartHRさ8 t
freeeさ8 t トルクさ8 t サイバーエージェントさ8 t 困った!を解決するデザインをタネ本にして浸透活d t 普段の仕事内で取り組めるガイドラインを策3 t Slackに画像を投稿するときのaltの付け( t オンライン会議では字幕をオンにすE t 提案スライドをアクセシビリティにすE t 怪我したときなど一時的に身体の一部が使えなくなったときどうするか
STEP2:行動 d ゆめみではユーザビリティに関して気をつけていることや意識しないといけないこと(満足や安心な ど)に関しては浸透している d でもアクセシビリティ(アクセスのしやすさ)について奥深くまで追求できていな& d アクセスできないことがどういうことなのかを体現してもらg d VoiceOverの体験な
d 職位関係なくアクセシビリティに関して行動できるように仕組み d チェック項目の導 d オンボーディングプログラムに組み込む
STEP2:行動 H プロジェクトの要件定義書などにアクセシビリティのチェック項目を追加す% H 「アクセシビリティに関する勉強会に参加する」をオンボーディングプログラムに追加する オンボーディングシート
STEP3:実践 F 今まではアクセシビリティ対応って何かメリットがあるの?追加で工数掛かるんでしょのような状況 だっu F 提案時にアクセシビリティの開発方針を見積もりとセットで提案できるようにす F 各フェーズでのアクセシビリティ対応項目を説明す F 要件定義、デザイン、開発、テスト、運用フェーズなどでどのような対応が行われているか説明し
ていく。
要件定義フェーズ D プロジェクトにおけるアクセシビリティ基準(例:WCAG 2.1、JISなど)を確認し、具体的な目標を 設定す D 法規制やガイドラインを確認し、要件に反映させ D 関係者全員(ステークホルダーと)にアクセシビリティの重要性を説明し、共通認識を持ってもらう
デザインフェーズ c 色のコントラスト、フォントサイズ、ナビゲーションの使いやすさなどを定めたデザインガイドライ ン作成すB c 初期段階のプロトタイプでアクセシビリティのテストを行い、フィードバックを反映させB c スクリーンリーダーやキーボードナビゲーション(フォーカス)など、補助技術に対応したデザイン を設計すB c
要件定義で決めたWCAGの方針に基づく適合レベルの基準に従う u ※エンジニアも可能限りデザインフェーズから入れるとよh
開発フェーズ D 代替テキストの設F D キーボードナビゲーショ@ D フォームの操作` D 正しいHTMLでのコーディン2 D
ARIA属性を正しく付与するな D スクリーンリーダーの読み上げ
テストフェーズ p axeなどを使用したアクセシビリティチェックを行W p 極力自動化できるものは自動化してい# p CIに組み込T p 障害者によるユーザーテストの実施(可能であれば)
運用フェーズ エンドユーザーからのフィードバックを受けて対応方針を選定す 障害者が何かしらの理由で、代替機能が用意されておらずアプリケーションが使えないなどがあった 場合に対応す 障害者差別解消法に基づいて対応してい% 「環境の整備」は努力義務だが必要性は高くなるので、アクセシビリティ向上に向けて改善する
セミナー「改正障害者差別解消法とWebアクセシビリティ」の録画を公開
情報発信 ( 引き続き継続的なアウトプットを続けÈ ( 職位に縛られないアウトプットを目指す
課題点 g 熱量冷めずに継続していく方法を考えないといけなQ g 職位ごとにアクセシビリティの認識が違うB g お互い歩み寄る、妥協点をみつける姿勢を根付かせるのが重要B g スキルの平準Ã
思い切って外部で著名なアクセシビリティスペシャリストにご協力いただき取り組んでいきたい!
本当にやっていくの?
アクセシビリティタスクフォース結成の宣言をしました!
ご清聴ありがとうございました!