サイト制作を進める上で、ユーザービリティからの観点で作成することで、より多くのユーザーに使っていただきやすくなります。

ユーザービリティとは、以下のように定義されます。
「年齢や身体的条件、利用環境に関わらず、全ての人がウェブで提供されている情報にアクセスし、利用できること」
どんな人でも、障壁のないサイト制作を心がけたいものです。

今回は、サイトのユーザービリティを向上させる一つとして、
アイコンの表記をどうすれば良いか、２点簡単にまとめてみました。

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

１）CSSスプライトで表記する場合
CSSスプライトとは、複数の画像をひとつにまとめて、CSSのbackground-positionプロパティで位置を指定することにより表示させる、CSSの技のひとつです。
メリットとしては、画像の数を減らすことによって、サイトの表示を速めることができます。

注意点としては、表示されないと使いにくく箇所は避けたほうがいいということです。
例えば、グローバルナビや、テキストの代替画像、重要な矢印など、それが見えていないと成り立たないような要素を指します。

実は、ハイコントラストモード（弱視など視覚障害者の人向けに、背景を黒くさせる配色）をWindowsで設定した場合、スプライトが表示されないようになっているのです。

なので、そのような重要な画像の場合は、スプライトではなく、imgで配置させた方が良いです。また、スクリーンリーダーで読んでもらえるよう、alt属性に画像の説明を入れます。
装飾や特に重要度が高くないアイコンなど、表示されなくても問題ないような箇所にスプライトを使いましょう。

２）フォントアイコンで表記する場合
Font Awesomeなどのフォントアイコンを使用する場合、スクリーンリーダーの観点から、以下のように設定します。

・alt属性で、代替テキストを提供する：「右矢印」など。これによって、altの中のテキストを、スクリーンリーダーが読んでくれます。

・装飾的なアイコン (たとえば、具体的なラベルがアイコンに隣接して表示されている) 場合は、スクリーン
リーダーが無視する (音声読み上げの対象として認識しない)ようにしておきたいです。

アイコンフォントを表わす HTML 要素の中に「aria hidden=”true”」と記述することで、スクリーンリーダーがその箇所をスキップしてくれます。また、:beforeなどの擬似要素でフォントアイコンを指定する場合、speak:none;と指定することにより、読み上げをスキップしてくれます

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Webサイトのコーディングを、意図したデザイン通りに組むだけでなく、スクリーンリーダーなど支援技術を使った場合でも問題なく閲覧できるか、というところまでを考えたサイト制作ができるようになれたら、と思います。