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
1.9k
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
July 17, 2024
Tweet
Share
More Decks by ryokatsuse
See All by ryokatsuse
shadcn/uiで考えるコンポーネント設計
ryokatsuse
6
1.5k
Other Decks in Technology
See All in Technology
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
人はなぜISUCONに夢中になるのか
kakehashi
PRO
3
530
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
780
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
140
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
280
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.9k
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
Platform Engineeringは自由のめまい
nwiizo
4
2k
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
120
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
23
6.3k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Writing Fast Ruby
sferik
628
61k
A designer walks into a library…
pauljervisheath
205
24k
Site-Speed That Sticks
csswizardry
3
370
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Thoughts on Productivity
jonyablonski
69
4.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Navigating Team Friction
lara
183
15k
KATA
mclloyd
29
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Done Done
chrislema
182
16k
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 スキルの平準Ã
思い切って外部で著名なアクセシビリティスペシャリストにご協力いただき取り組んでいきたい!
本当にやっていくの?
アクセシビリティタスクフォース結成の宣言をしました!
ご清聴ありがとうございました!