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
ori
October 10, 2024
Design
5
1.9k
みんなに知って欲しい 視覚過敏のアクセシビリティ
2024.10.10 アクセシビリティLT会 #2 with Mix Leap Study
での発表スライドです。
ori
October 10, 2024
Tweet
Share
Other Decks in Design
See All in Design
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
1
1k
The Golden Whitney
ohtristanart
PRO
0
160
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
300
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
660
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.6k
PF_濵村ひろみ_202503
maru_design78
0
160
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
350
Goodpatch Tour💙 / We are hiring!
goodpatch
31
850k
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
2
600
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
190
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
310
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
2.7k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Gamification - CAS2011
davidbonilla
81
5.3k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
A Tale of Four Properties
chriscoyier
159
23k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Automating Front-end Workflow
addyosmani
1370
200k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Transcript
2024.10.10 アクセシビリティLT会 #2 with Mix Leap Study みんなに知って欲しい のアクセシビリティ 視覚過敏
ORI / @0opacity
YUMEMIのUIデザイナー おり 社内でアクセシビリティを 推進しています 視覚過敏持ち Ori /
https://note.com/0opacity_/n/n1d3f407ab233 書籍『Webアプリケーションアクセシビリティ』輪読会の完走とその効果
https://note.com/0opacity_/n/n0f74f5e18599 STUDIOで適切なマークアップやアクセシビリティについて、エンジニアさんからレビューをもらったらよかった話
あなたの知らないアクセシビリティの世界(社内LTフェス)
目次 イントロダクション 視覚過敏のためのWCAG 視覚過敏の人のデジタル環境 まとめ 1 2 3 4
イントロダクション 1
イントロダクション アクセシビリティでやれることは多い ALTテキスト タイポグラフィ コントラスト比 フォーム周りあれこれ スクリーンリーダー ユーザビリティ インクルーシブデザイン セマンティックHTML
だれのために やっているか? イントロダクション
− 本日のフォーカス − 視覚過敏の人のための アクセシビリティ イントロダクション
視覚過敏のためのWCAG 2
光や色、物の動きなど、 苦痛や不快感を伴い、生活に不便が生じる状態 目から入る刺激が過剰に感じられ、 視覚過敏とは? 視覚過敏のためのWCAG アクセシビリティはこのような人にも効果的
今回は視覚過敏についてフォーカスしますが、 アクセシビリティは万人のためのもので、 必要としている人は数多く存在します。 視覚過敏のためのWCAG 視覚障害のある人 色覚特性がある人 聴覚障害のある人 高齢者 盲ろうの人 一時的に障害がある状態の人
上肢障害のある人 発達障害や学習障害のある人、知的障害がある人
https://waic.jp/translations/WCAG22/ WCAGとは? 視覚過敏のためのWCAG Web Content Accessibility Guidelinesの略。 ウェブのコンテンツを障害のある人に使いやすいようにするための、 ウェブアクセシビリティに関するガイドライン。
https://waic.jp/translations/WCAG22/ WCAGとは? 視覚過敏のためのWCAG Web Content Accessibility Guidelinesの略。 ウェブのコンテンツを障害のある人に使いやすいようにするための、 ウェブアクセシビリティに関するガイドライン。 ガイドラインと覚えておけばOK
明日からできる!視覚過敏から見た WCAGの項目を4つ紹介 視覚過敏のためのWCAG すでに知っている人も視覚過敏から見ると こうなんだ!と感じて欲しいです◎
ウェブページには、どの 1 秒間においても 3 回を超える閃光を放つも のがない。 2.3.2:3回の閃光 視覚過敏のためのWCAG❶ 点滅するコンテンツを控える! 絶対に守って欲しいです
動きのある、点滅している、スクロールする、又は自動更新する情報 は、一時停止、停止、もしくは非表示できるようにする 2.2.2:一時停止、停止、非表示 視覚過敏のためのWCAG❷ 目がうろうろして集中できないので停止ボタンは助かります カルーセルなどには一時停止ボタンを設置する
視覚過敏のためのWCAG https://brand.yumemi.co.jp/font
Q 幅が 80 字を越えない (全角文字の場合は、40 字)1 Q テキストが、均等割り付けされていない (両端揃えではない)1 Q
段落中の行送りは、少なくとも 1.5 文字分ある。そして、段落の間 隔は、その行送りの少なくとも 1.5 倍以上ある。 1.4.8:視覚的提示 視覚過敏のためのWCAG❸ 行送りは文字の読みやすさに影響大!タイポグラフィの設定を大事にしよう タイポグラフィの設定は最初に注意!
テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラス ト比がある。 1.4.3:コントラスト (最低限) 視覚過敏のためのWCAG❹ コントラストチェッカーなどでテストする Figmaのプラグインなどを活用するとよいです◎色覚用のものもあります!
https://note.com/0opacity_/n/n1a12d9baf3d6 文字のコントラスト比が気になったらFigmaの「Contrast」プラグインを使おう
B WCAGに記載はないが、あまりにも すぎると、眩し くて 視覚過敏の特性がある B 特に など明度の高い色の面積が多いものはずっと見ていると目 がチカチカしやすいので注意(個人的意見) 高コントラスト
目が痛くなってしまう 白色 1.4.3:コントラスト (最低限)について補足 視覚過敏のためのWCAG テキスト 眩しいよー
視覚過敏の人のデジタル環境 3 こんな環境の人もいるんだ! という学びになれば嬉しいです◎
0 目が疲れないように、輝度を低く、コントラスト比を少しあげ ています 0 暖かみのある色温度に調整する人もいま 0 わたしは を着用しています ブルーライトメガネ
モニターの調整 個人的に視覚過敏で気をつけていること
9 目に負担がかからないように、 、kindleなどの などのテーマを選んでい ます 9 Slackのように、選べるテーマが多いと、状況に応じて自分の 目にあったものが選べるのでとても嬉しい! デバイスの標準:ダークモード 読書時:クリーム系
テーマカラーの選択 個人的に視覚過敏で気をつけていること
まとめ 4
視覚過敏の人向けの アクセシビリティを 少しでも意識してもらえたら 嬉しいです まとめ
特に はアクセシブル! チェックツールなどを 使ってみよう ウェブ まとめ
ここにいるみなさんにとっての アクセシビリティも 知りたいです まとめ
アクセシビリティの話をしていると 自然と の話になる プロダクト まとめ
まだWCAGにないような、 や が 活発になれば、 さらに が 社会に増えるのではないか 自分だけのこだわり 課題点の議論 良いプロダクト
まとめ
ご清聴 ありがとうございました まとめ