アクセシブルなアイコン実装

アクセシブルなアイコン実装 ⿊帯(アクセシビリティ) 中野 信 ©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

• https://fontawesome.com/

Font Awesome https://fontawesome.com/search?new=yes ©Yahoo Japan 10

• https://fontawesome.com/search?new=yes

空要素を使う 空要素を使うメリット・デメリット メリット • • (後述するテキスト置換と⽐べて)表⽰崩れが起きにくい デメリット • • スクリーンリーダーから認識できない • 「虚空」と⾔われる場合もある ©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

• https://symbolset.com/
• https://fonts.google.com/icons

Symbolset https://symbolset.com/ ©Yahoo Japan 31

• https://symbolset.com/

Material Symbols https://fonts.google.com/icons ©Yahoo Japan 32

• https://fonts.google.com/icons

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