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

7.8K Views

July 07, 22

スライド概要

アクセシビリティに配慮したアイコンの実装方法について、さまざまなパターンを試してその可能性を探ってみました。

profile-image

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

アクセシブルなアイコン実装 ⿊帯(アクセシビリティ) 中野 信 ©Yahoo Japan

2.

⾃⼰紹介 • 中野 信(なかの まこと) • 広告事業のデザインと UIガイドラインの策定・運⽤と アクセシビリティの向上に関わっています • ⿊帯(アクセシビリティ) • ウェブアクセシビリティ基盤委員会 作業部会1(理解と普及) ©Yahoo JAPAN 2

3.

「アクセシブルなアイコン」とは? • 視認性が⾼い • 代替情報(代替テキスト)がある • 多様な環境で認識できる(拡⼤できる) ©Yahoo JAPAN 3

4.

様々な実装⽅法をご紹介し ベストプラクティスを探ります ©Yahoo Japan 4

5.

今回ご紹介する実装⽅法 • 空要素を使う • テキスト置換を使う • 実体を使う • webフォントを使う ©Yahoo JAPAN 5

6.

今回使うアイコン • Accessible Icon ©Yahoo JAPAN 6

7.

今回の実装⽅法 スクリーンリーダーで検証しました • • PC: • Windows / NVDA • スマホ: • iPhone / VoiceOver ©Yahoo JAPAN 7

8.

空要素を使う ©Yahoo Japan 8

9.

空要素を使う 空要素を使うとは? • テキストが含まれないタグ(マークアップ)を使ってアイコンを表⽰すること • <i></i>、<b></b>、<span></span> などいくつか種類がある • CSSスプライトと組み合わせて使われることもある • Font Awesomeなど著名なサイトでも使われている • <i>要素はアイコンの略ではありません! ©Yahoo JAPAN 9

10.

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

11.

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

12.

空要素を使う 背景画像で表⽰ PC ✕ /スマホ ✕ ©Yahoo JAPAN 12

13.

空要素を使う 背景画像で表⽰+aria-label PC ○ /スマホ ✕ ©Yahoo JAPAN 13

14.

空要素を使う contentプロパティで置換 PC ✕ /スマホ ✕ ©Yahoo JAPAN 14

15.

テキスト置換 ©Yahoo Japan 15

16.

テキスト置換 テキスト置換とは? • マークアップされたテキストを⾮表⽰にしたり⾒えにくくして、代わりにアイコ ンを表⽰する⽅法 • 空要素同様、CSSスプライトと組み合わせて使われることもある • 「画像置換」で検索すると多くの実装⽅法が⾒つけられる ©Yahoo JAPAN 16

17.

テキスト置換 テキスト置換を使うメリット・デメリット メリット • • スクリーンリーダーでも要素を読み取れる デメリット • • 実装⽅法がトリッキーなため、表⽰崩れが発⽣しやすい • フォーカス枠が⾒えなくなる場合もある • 実装⽅法によってはスクリーンリーダーで読み取れなくなる場合がある ©Yahoo JAPAN 17

18.

テキスト置換 text-indent:-9999 PC △ / スマホ △ ©Yahoo JAPAN 18

19.

テキスト置換 text-indent:-9999 • フォーカスが画⾯を突き抜けようとして⽂字が⾒える ©Yahoo JAPAN 19

20.

テキスト置換 font-size:0 PC ○ / スマホ ✕ ©Yahoo JAPAN 20

21.

テキスト置換 transparent:0 PC △ / スマホ △ ©Yahoo JAPAN 21

22.

テキスト置換 transparent:0 テキスト選択ができる! ©Yahoo JAPAN 22

23.

テキスト置換 display:none PC ✕ /スマホ ✕ ©Yahoo JAPAN 23

24.

実体を使う ©Yahoo Japan 24

25.

実体を使う 実体を使うとは? • png、SVGなど画像をそのまま表⽰する⽅法 • HTMLを使って画像を表⽰する時に、⼀番最初に覚える⽅法 ©Yahoo JAPAN 25

26.

実体を使う 実体を使うメリット・デメリット メリット • • 確実にスクリーンリーダーで要素を読み取れる • CSSを使わないのでマークアップがシンプルになる デメリット • • たぶんない…? ©Yahoo JAPAN 26

27.

実体を使う Img要素 PC ○ /スマホ ○ ©Yahoo JAPAN 27

28.

実体を使う SVG(object要素) PC ○ /スマホ ○ ©Yahoo JAPAN 28

29.

webフォントを使う ©Yahoo Japan 29

30.

webフォントを使う webフォントを使うとは? • アイコン画像をフォントに変換して使⽤する⽅法 • 「合字(リガチャ)」という複数の⽂字を1⽂字で表記する⽅法を応⽤して、単語を アイコンに置き換えることもできる • Symbolsetというサイトが始めたと思われる • Google FontsのMaterial Symbolsのページでも使われている ©Yahoo JAPAN 30

31.

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

32.

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

33.

webフォントを使う webフォントを使うメリット・デメリット メリット • • スクリーンリーダーで要素を読み取れる • ファミリー展開、リサイズなどフォントの特性を使える デメリット • • ⾊の表現が単⾊になる • アイコンをフォント化にする⼿順が多少特殊 ©Yahoo JAPAN 33

34.

webフォントを使う webフォントの合字 PC ○ /スマホ ○ ©Yahoo JAPAN 34

35.

まとめ ©Yahoo Japan 35

36.

実装⼀覧 PC(NVDA) スマホ(VoiceOver) 背景画像で表⽰ ✕ ✕ 背景画像で表⽰+aria-label ○ ✕ contentプロパティで置換 ✕ ✕ text-indent:-9999 △ △ font-size:0 △ ✕ transparent:0 △ △ display:none ✕ ✕ Img要素 ○ ○ SVG(object要素) ○ ○ webフォントの合字 ○ ○ ©Yahoo JAPAN 36

37.

まとめ 今⽇のまとめ • 現時点では実体を使う⽅法が⼀番確実そうです • Webフォントも可読性が⾼いです • テキスト置換は読み上げの差異が起きやすいので要注意です • 空要素は可読性が低いため推奨しません ©Yahoo JAPAN 37

38.

EOP ©Yahoo Japan