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.1k
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
July 17, 2024
Tweet
Share
More Decks by ryokatsuse
See All by ryokatsuse
shadcn/uiで考えるコンポーネント設計
ryokatsuse
6
1.7k
Other Decks in Technology
See All in Technology
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
5
3.7k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
900
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
220
AIのAIによるAIのための出力評価と改善
chocoyama
2
570
Github Copilot エージェントモードで試してみた
ochtum
0
110
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.9k
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
260
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
140
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
190
A2Aのクライアントを自作する
rynsuke
1
190
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
17
5.7k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Automating Front-end Workflow
addyosmani
1370
200k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Unsuck your backbone
ammeep
671
58k
Fireside Chat
paigeccino
37
3.5k
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 スキルの平準Ã
思い切って外部で著名なアクセシビリティスペシャリストにご協力いただき取り組んでいきたい!
本当にやっていくの?
アクセシビリティタスクフォース結成の宣言をしました!
ご清聴ありがとうございました!