アイコン | 1人design system advent calender 8日目
8日目はアイコンについて。
If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options are using inline SVG and using icon fonts.
何か理由があってラスター形式のアイコンを用いる場合をのぞいて、基本的には縮尺可能なベクター形式のアイコンを用いることになる。モダンブラウザによるサポート状況や柔軟性の点からアイコンフォントよりもSVGを利用するケースが増えてると思う。
サイズ
どのようなサイズでアイコンを提供するにしても、タイポグラフィと同様に一貫したサイズで提供する。タイポグラフィと同様に、一貫性に欠けていて規則性が読み取れないアイコンシステムは管理していくことが困難になる。 アイコンはテキストと合わせて利用することが多いので、タイポグラフィのサイズと切り離して考えていくことは難しい。
a11y
For screen reader accessibility, provide a context-rich title for the SVG using
<title>element.
アクセシビリティの観点から考えるとsvgでアイコンシステムを作る場合、基本的には<title>タグでタイトルテキストを提供することが望ましい。一方で、スクリーンリーダーで読み取る必要のない、ただの装飾目的のアイコンであれば、area-hidden="true"を与えるようにしておく。
9日目はモーションについて書く。
