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

タグ

スライド概要

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

profile-image

Yahoo!デベロッパーネットワーク

@ydnjp

作者について:

エンジニア・デザイナー向けのヤフー公式アカウント。イベント/登壇情報/ブログ記事など、ヤフーの技術・デザインに関わる情報を発信します。

スライド一覧
シェア
埋め込む»CMSなどでJSが使えない場合

公開日

2022-07-07 10:44:00

各ページのテキスト

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