Slide 1
Slide 1 text
2024.10.10 アクセシビリティLT会 #2 with Mix Leap Study
みんなに知って欲しい
のアクセシビリティ
視覚過敏
ORI / @0opacity
Slide 2
Slide 2 text
YUMEMIのUIデザイナー
おり
社内でアクセシビリティを
推進しています
視覚過敏持ち
Ori /
Slide 3
Slide 3 text
https://note.com/0opacity_/n/n1d3f407ab233
書籍『Webアプリケーションアクセシビリティ』輪読会の完走とその効果
Slide 4
Slide 4 text
https://note.com/0opacity_/n/n0f74f5e18599
STUDIOで適切なマークアップやアクセシビリティについて、エンジニアさんからレビューをもらったらよかった話
Slide 5
Slide 5 text
あなたの知らないアクセシビリティの世界（社内LTフェス）
Slide 6
Slide 6 text
目次
イントロダクション
視覚過敏のためのWCAG
視覚過敏の人のデジタル環境
まとめ
1
2
3
4
Slide 7
Slide 7 text
イントロダクション
1
Slide 8
Slide 8 text
イントロダクション
アクセシビリティでやれることは多い
ALTテキスト
タイポグラフィ
コントラスト比
フォーム周りあれこれ
スクリーンリーダー
ユーザビリティ
インクルーシブデザイン セマンティックHTML
Slide 9
Slide 9 text
だれのために
やっているか？
イントロダクション
Slide 10
Slide 10 text
− 本日のフォーカス −
視覚過敏の人のための
アクセシビリティ
イントロダクション
Slide 11
Slide 11 text
視覚過敏のためのWCAG
2
Slide 12
Slide 12 text
光や色、物の動きなど、
苦痛や不快感を伴い、生活に不便が生じる状態
目から入る刺激が過剰に感じられ、
視覚過敏とは？
視覚過敏のためのWCAG
アクセシビリティはこのような人にも効果的
Slide 13
Slide 13 text
今回は視覚過敏についてフォーカスしますが、
アクセシビリティは万人のためのもので、
必要としている人は数多く存在します。
視覚過敏のためのWCAG
視覚障害のある人
色覚特性がある人
聴覚障害のある人
高齢者
盲ろうの人
一時的に障害がある状態の人
上肢障害のある人 発達障害や学習障害のある人、知的障害がある人
Slide 14
Slide 14 text
https://waic.jp/translations/WCAG22/
WCAGとは？
視覚過敏のためのWCAG
Web Content Accessibility Guidelinesの略。
ウェブのコンテンツを障害のある人に使いやすいようにするための、
ウェブアクセシビリティに関するガイドライン。
Slide 15
Slide 15 text
https://waic.jp/translations/WCAG22/
WCAGとは？
視覚過敏のためのWCAG
Web Content Accessibility Guidelinesの略。
ウェブのコンテンツを障害のある人に使いやすいようにするための、
ウェブアクセシビリティに関するガイドライン。
ガイドラインと覚えておけばOK
Slide 16
Slide 16 text
明日からできる！視覚過敏から見た
WCAGの項目を4つ紹介
視覚過敏のためのWCAG
すでに知っている人も視覚過敏から見ると
こうなんだ！と感じて欲しいです◎
Slide 17
Slide 17 text
ウェブページには、どの 1 秒間においても 3 回を超える閃光を放つも
のがない。
2.3.2：3回の閃光
視覚過敏のためのWCAG❶
点滅するコンテンツを控える！
絶対に守って欲しいです
Slide 18
Slide 18 text
動きのある、点滅している、スクロールする、又は自動更新する情報
は、一時停止、停止、もしくは非表示できるようにする
2.2.2：一時停止、停止、非表示
視覚過敏のためのWCAG❷
目がうろうろして集中できないので停止ボタンは助かります
カルーセルなどには一時停止ボタンを設置する
Slide 19
Slide 19 text
視覚過敏のためのWCAG
https://brand.yumemi.co.jp/font
Slide 20
Slide 20 text
Q 幅が 80 字を越えない (全角文字の場合は、40 字)1
Q テキストが、均等割り付けされていない (両端揃えではない)1
Q 段落中の行送りは、少なくとも 1.5 文字分ある。そして、段落の間
隔は、その行送りの少なくとも 1.5 倍以上ある。
1.4.8：視覚的提示
視覚過敏のためのWCAG❸
行送りは文字の読みやすさに影響大！タイポグラフィの設定を大事にしよう
タイポグラフィの設定は最初に注意！
Slide 21
Slide 21 text
テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラス
ト比がある。
1.4.3：コントラスト (最低限)
視覚過敏のためのWCAG❹
コントラストチェッカーなどでテストする
Figmaのプラグインなどを活用するとよいです◎色覚用のものもあります！
Slide 22
Slide 22 text
https://note.com/0opacity_/n/n1a12d9baf3d6
文字のコントラスト比が気になったらFigmaの「Contrast」プラグインを使おう
Slide 23
Slide 23 text
B WCAGに記載はないが、あまりにも すぎると、眩し
くて 視覚過敏の特性がある
B 特に など明度の高い色の面積が多いものはずっと見ていると目
がチカチカしやすいので注意（個人的意見）
高コントラスト
目が痛くなってしまう
白色
1.4.3：コントラスト (最低限)について補足
視覚過敏のためのWCAG
テキスト 眩しいよー
Slide 24
Slide 24 text
視覚過敏の人のデジタル環境
3
こんな環境の人もいるんだ！
という学びになれば嬉しいです◎
Slide 25
Slide 25 text
0 目が疲れないように、輝度を低く、コントラスト比を少しあげ
ています
0 暖かみのある色温度に調整する人もいま
0 わたしは を着用しています
ブルーライトメガネ
モニターの調整
個人的に視覚過敏で気をつけていること
Slide 26
Slide 26 text
9 目に負担がかからないように、
、kindleなどの などのテーマを選んでい
ます
9 Slackのように、選べるテーマが多いと、状況に応じて自分の
目にあったものが選べるのでとても嬉しい！
デバイスの標準：ダークモード
読書時：クリーム系
テーマカラーの選択
個人的に視覚過敏で気をつけていること
Slide 27
Slide 27 text
まとめ
4
Slide 28
Slide 28 text
視覚過敏の人向けの
アクセシビリティを
少しでも意識してもらえたら
嬉しいです
まとめ
Slide 29
Slide 29 text
特に はアクセシブル！
チェックツールなどを
使ってみよう
ウェブ
まとめ
Slide 30
Slide 30 text
ここにいるみなさんにとっての
アクセシビリティも
知りたいです
まとめ
Slide 31
Slide 31 text
アクセシビリティの話をしていると
自然と の話になる
プロダクト
まとめ
Slide 32
Slide 32 text
まだWCAGにないような、
や が
活発になれば、
さらに が
社会に増えるのではないか
自分だけのこだわり 課題点の議論
良いプロダクト
まとめ
Slide 33
Slide 33 text
ご清聴
ありがとうございました
まとめ