アクセシブルなアイコン実装
6.7K Views
July 07, 22
スライド概要
アクセシビリティに配慮したアイコンの実装方法について、さまざまなパターンを試してその可能性を探ってみました。
2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp
関連スライド
各ページのテキスト
アクセシブルなアイコン実装 ⿊帯(アクセシビリティ) 中野 信 ©Yahoo Japan
⾃⼰紹介 • 中野 信(なかの まこと) • 広告事業のデザインと UIガイドラインの策定・運⽤と アクセシビリティの向上に関わっています • ⿊帯(アクセシビリティ) • ウェブアクセシビリティ基盤委員会 作業部会1(理解と普及) ©Yahoo JAPAN 2
「アクセシブルなアイコン」とは? • 視認性が⾼い • 代替情報(代替テキスト)がある • 多様な環境で認識できる(拡⼤できる) ©Yahoo JAPAN 3
様々な実装⽅法をご紹介し ベストプラクティスを探ります ©Yahoo Japan 4
今回ご紹介する実装⽅法 • 空要素を使う • テキスト置換を使う • 実体を使う • webフォントを使う ©Yahoo JAPAN 5
今回使うアイコン • Accessible Icon ©Yahoo JAPAN 6
今回の実装⽅法 スクリーンリーダーで検証しました • • PC: • Windows / NVDA • スマホ: • iPhone / VoiceOver ©Yahoo JAPAN 7
空要素を使う ©Yahoo Japan 8
空要素を使う 空要素を使うとは? • テキストが含まれないタグ(マークアップ)を使ってアイコンを表⽰すること • <i></i>、<b></b>、<span></span> などいくつか種類がある • CSSスプライトと組み合わせて使われることもある • Font Awesomeなど著名なサイトでも使われている • <i>要素はアイコンの略ではありません! ©Yahoo JAPAN 9
Font Awesome https://fontawesome.com/search?new=yes ©Yahoo Japan 10
空要素を使う 空要素を使うメリット・デメリット メリット • • (後述するテキスト置換と⽐べて)表⽰崩れが起きにくい デメリット • • スクリーンリーダーから認識できない • 「虚空」と⾔われる場合もある ©Yahoo JAPAN 11
空要素を使う 背景画像で表⽰ PC ✕ /スマホ ✕ ©Yahoo JAPAN 12
空要素を使う 背景画像で表⽰+aria-label PC ○ /スマホ ✕ ©Yahoo JAPAN 13
空要素を使う contentプロパティで置換 PC ✕ /スマホ ✕ ©Yahoo JAPAN 14
テキスト置換 ©Yahoo Japan 15
テキスト置換 テキスト置換とは? • マークアップされたテキストを⾮表⽰にしたり⾒えにくくして、代わりにアイコ ンを表⽰する⽅法 • 空要素同様、CSSスプライトと組み合わせて使われることもある • 「画像置換」で検索すると多くの実装⽅法が⾒つけられる ©Yahoo JAPAN 16
テキスト置換 テキスト置換を使うメリット・デメリット メリット • • スクリーンリーダーでも要素を読み取れる デメリット • • 実装⽅法がトリッキーなため、表⽰崩れが発⽣しやすい • フォーカス枠が⾒えなくなる場合もある • 実装⽅法によってはスクリーンリーダーで読み取れなくなる場合がある ©Yahoo JAPAN 17
テキスト置換 text-indent:-9999 PC △ / スマホ △ ©Yahoo JAPAN 18
テキスト置換 text-indent:-9999 • フォーカスが画⾯を突き抜けようとして⽂字が⾒える ©Yahoo JAPAN 19
テキスト置換 font-size:0 PC ○ / スマホ ✕ ©Yahoo JAPAN 20
テキスト置換 transparent:0 PC △ / スマホ △ ©Yahoo JAPAN 21
テキスト置換 transparent:0 テキスト選択ができる! ©Yahoo JAPAN 22
テキスト置換 display:none PC ✕ /スマホ ✕ ©Yahoo JAPAN 23
実体を使う ©Yahoo Japan 24
実体を使う 実体を使うとは? • png、SVGなど画像をそのまま表⽰する⽅法 • HTMLを使って画像を表⽰する時に、⼀番最初に覚える⽅法 ©Yahoo JAPAN 25
実体を使う 実体を使うメリット・デメリット メリット • • 確実にスクリーンリーダーで要素を読み取れる • CSSを使わないのでマークアップがシンプルになる デメリット • • たぶんない…? ©Yahoo JAPAN 26
実体を使う Img要素 PC ○ /スマホ ○ ©Yahoo JAPAN 27
実体を使う SVG(object要素) PC ○ /スマホ ○ ©Yahoo JAPAN 28
webフォントを使う ©Yahoo Japan 29
webフォントを使う webフォントを使うとは? • アイコン画像をフォントに変換して使⽤する⽅法 • 「合字(リガチャ)」という複数の⽂字を1⽂字で表記する⽅法を応⽤して、単語を アイコンに置き換えることもできる • Symbolsetというサイトが始めたと思われる • Google FontsのMaterial Symbolsのページでも使われている ©Yahoo JAPAN 30
Symbolset https://symbolset.com/ ©Yahoo Japan 31
Material Symbols https://fonts.google.com/icons ©Yahoo Japan 32
webフォントを使う webフォントを使うメリット・デメリット メリット • • スクリーンリーダーで要素を読み取れる • ファミリー展開、リサイズなどフォントの特性を使える デメリット • • ⾊の表現が単⾊になる • アイコンをフォント化にする⼿順が多少特殊 ©Yahoo JAPAN 33
webフォントを使う webフォントの合字 PC ○ /スマホ ○ ©Yahoo JAPAN 34
まとめ ©Yahoo Japan 35
実装⼀覧 PC(NVDA) スマホ(VoiceOver) 背景画像で表⽰ ✕ ✕ 背景画像で表⽰+aria-label ○ ✕ contentプロパティで置換 ✕ ✕ text-indent:-9999 △ △ font-size:0 △ ✕ transparent:0 △ △ display:none ✕ ✕ Img要素 ○ ○ SVG(object要素) ○ ○ webフォントの合字 ○ ○ ©Yahoo JAPAN 36
まとめ 今⽇のまとめ • 現時点では実体を使う⽅法が⼀番確実そうです • Webフォントも可読性が⾼いです • テキスト置換は読み上げの差異が起きやすいので要注意です • 空要素は可読性が低いため推奨しません ©Yahoo JAPAN 37
EOP ©Yahoo Japan