スマート反転とウェブアクセシビリティ

Transcript

1. スマート反転と ウェブアクセシビリティ CO-LAB Tech Night #13 KAMIHARA Takumi / @camiha
2. 自己紹介 • 神原拓海（かみはらたくみ） • 所属 • 株式会社アンティー・ファクトリー • フロントエンドエンジニア/アクセシビリティスペシャリスト • 好き • 料理、音楽、ものづくり • 苦手 • 焼きそば、にんじんのグラッセ、JIS キーボード 2
3. TL;DR • 画面を見やすくするために、色反転を行う機能が iOS/macOS に備わる • ただし、色反転時、コンテンツの意味が損なわれる場合も • Safari では、inverted-colors Media Query で色反転の検出ができる • これを活用することでも、色反転時にも情報伝達を維持できる 3
4. 反転（スマート） • iOS / macOS に備わる機能 • 呼びにくいのでスマート反転と言いがち • 画像や動画を除外して、色反転する • 除外しない反転（クラシック）も • iOS の場合、設定から • アクセシビリティ > 画面表示とテキ ストサイズ > 反転（スマート） 通常 4 反転（スマート）
5. なんで反転を使っているの？ • 困っていることがある • 明るいと眩しい • （黒い画面かっこいい） • 自分の視覚特性的に疲れにくい • どんな色覚特性？ 5
7. Visual Snow Syndrome (VSS) • 視野全体に、モノクロのドットがちらつく • 実際にはずっと動いている • 目を閉じていても症状は継続する • 体調でも変わる • 自分は明るいところでよりノイズが目立つ • あくまでも私個人の見え方っぽくしたもの • Visual Snow Syndrome を代表するものではない 7 Visual Snow Syndrome の 見え方を再現した公園の写真
8. 通常 通常 + VSS 再現 反転（スマート） 8 反転（スマート） + VSS 再現
9. 常用するようになったのは最近 • 頻繁に切り替えたいけど、切り替えにくい • ダークモードのサイトが真っ白になったら OFF にする等 • iPhone 16 Pro のアクションボタン • 使いやすくなった • 反転（スマート）自体、不安定なところはある • 反転後は再読み込みしている • ちなみに MacBook では使っていない • システム UI ごと反転されるので • ブラウザ拡張を使って強制的にダークモードに 9 iOS 26 における アクションボタンの設定画面
10. inverted-colors と 具体的な課題 10
11. <img> が反転しないことによる問題（1） • 黒い線だけの透過PNGは反転時に埋もれてしまう • ロゴが反転されず、背景が反転されることで見えない 通常 反転（スマート） ペンギンのアイコンと社名が背景に埋もれてる 11
12. <img> が反転しないことによる問題（1） • 対象の画像を、inverted の時に再反転し、打ち消す 実装例 反転（スマート）+ 対策 対策することで、ロゴが確認できる 12
13. CSS inverted-colors Media Query • 反転（スマート）のみ検出 • 反転（クラシック）は none のまま • 全てが反転する前提なので検出できな くて良い（変えるべきではない） Inverted-colors の使用例 • Safari のみサポート • 反転（スマート）は Windows にはない • 反転挙動はブラウザ側の UA CSS で定義 13
14. Safari の UA 内記述 https://github.com/WebKit/WebKit/blob/ 37e8b8b7168a1bb74906e56deae7c5e696a041c2/Source/WebCore/css/ html.css#L1539-L1543 14
15. <img> が反転しないことによる問題（2） • 文字画像が明るいままになることがある • （そもそも）文字画像を利用しないのがベストではある 通常 反転（スマート） 15 反転（スマート）+ 対策
16. <svg> が反転することによる問題 • <img> と異なり、<svg> は反転する • SNS シェアのボタンはよく反転してる印象 通常 反転（スマート） 16 反転（スマート）+ 対策 SVG に対して、反転を打ち消す CSS を追加
17. 色を用いた伝達がノイズになる • 伝達の補助として利用している、アイコンの意味が変わってしまう • 戸惑うので、反転の対象外とする 通常 反転（スマート） 17 反転（スマート）+ 対策
18. シャドウの見え方が大きく変わる • エレベーションというよりハイライトになっているケース 通常 反転（スマート） 18
19. シャドウの見え方が大きく変わる • シャドウを削除する • ボーダーを配置する • 境界がわかりにくくなるので 反転（スマート）+ 対策 19
20. ベストプラクティスに繋げる • 極力、面倒を増やさずに済むデザインや実装を目指す • 例えば • 反転してほしいロゴは、<svg> で記述する • 反転してほしくない SVG は、 <img> 要素で読み込む • シャドウを境界線として利用しない • 色を用いた伝達補助を見直す • その上で、本当に必要になる場所に適用していく • デザインや実装設計の判断材料でも活かしていきたい 20
21. 参考 • Media Queries Level 5 • https://drafts.csswg.org/mediaqueries-5/#inverted • html.css • https://github.com/WebKit/WebKit/blob/ 37e8b8b7168a1bb74906e56deae7c5e696a041c2/Source/WebCore/css/html.css#L1539L1543 • [css-mediaqueries] Inverted-colors media feature can cause problems on semi-transparent images. #9674 • https://github.com/w3c/csswg-drafts/issues/9674 • AX: "(inverted-colors)" match sometimes fails on change • https://bugs.webkit.org/show_bug.cgi?id=168491 21